Slide 1

Slide 1 text

Pure @ericf Yahoo purecss.io

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Pure 4.4KB

Slide 4

Slide 4 text

CSS Only NORMALIZE.CSS

Slide 5

Slide 5 text

$ bower install pure OR

Slide 6

Slide 6 text

Common & Hard PROBLEMS

Slide 7

Slide 7 text

Base Grids Forms Menus Tables Buttons

Slide 8

Slide 8 text

Buy now index.html Buy now

Slide 9

Slide 9 text

.pure-button { display: inline-block; *display: inline; zoom: 1; line-height: normal; white-space: nowrap; vertical-align: baseline; text-align: center; cursor: pointer; font-family: inherit; font-size: 100%; *font-size: 90%; *overflow: visible; padding: 0.5em; background-color: #E6E6E6; color: #444; color: rgba(0, 0, 0, 0.80); *color: #444; border: 1px solid #999; border: none rgba(0, 0, 0, 0); border-radius: 2px; text-decoration: none; -webkit-user-drag: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .pure-button { color: #fff; background-color: #70bf41; } app.css pure-button.css

Slide 10

Slide 10 text

.pure-button { color: #fff; background-color: #70bf41; } app.css Buy now

Slide 11

Slide 11 text

Pure & Sass OR ANY PREPROCESSOR

Slide 12

Slide 12 text

Buy now index.html Buy now

Slide 13

Slide 13 text

Buy now index.html Buy now

Slide 14

Slide 14 text

@import "pure"; ! button { @extend .pure-button; color: #fff; background-color: #70bf41; } app.scss Buy now

Slide 15

Slide 15 text

Responsive Design

Slide 16

Slide 16 text

2 PROBLEMS

Slide 17

Slide 17 text

@media screen and (min-width: 48em) { ... }

Slide 18

Slide 18 text

@media screen and (min-width: 48em) { ... } 1. CAN’T OVERRIDE

Slide 19

Slide 19 text

2. IE < 9

Slide 20

Slide 20 text

Pure & Tooling DEVELOPER WORKFLOW

Slide 21

Slide 21 text

REWORK

Slide 22

Slide 22 text

REWORK REWORK PLUGINS GRUNT PLUGINS WEB UI YEOMAN

Slide 23

Slide 23 text

var rework = require('rework'), pureGrids = require('rework-pure-grids'); ! var css = rework('') .use(pureGrids.units(10)) .toString(); rework-pure-grids

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Let’s Discuss @ericf Yahoo purecss.io