Building Beautiful Web Apps using Pure CSS

Slide 1

Slide 1 text

Saturday, September 28, 13

Slide 2

Slide 2 text

purecss.io github.com/yui/pure/ purecss.io BUILDING BEAUTIFUL WEB APPS USING PURE CSS Saturday, September 28, 13

Slide 3

Slide 3 text

purecss.io github.com/yui/pure/ @tilomitra Saturday, September 28, 13

Slide 4

Slide 4 text

purecss.io github.com/yui/pure/ 30:00 Good looking hacks win. I’m here to help you write CSS to make your hack look sexy. Saturday, September 28, 13

Slide 5

Slide 5 text

purecss.io github.com/yui/pure/ 30:00 What problem does Pure solve? Hacking with Pure CSS tips, tricks and tools Saturday, September 28, 13

Slide 6

Slide 6 text

purecss.io github.com/yui/pure/ purecss.io CSS frameworks can be very useful Saturday, September 28, 13

Slide 7

Slide 7 text

purecss.io github.com/yui/pure/ CSS frameworks can look meh. Sites made using Saturday, September 28, 13

Slide 8

Slide 8 text

purecss.io github.com/yui/pure/ CSS frameworks can look great. Sites made on top of Saturday, September 28, 13

Slide 9

Slide 9 text

purecss.io github.com/yui/pure/ Saturday, September 28, 13

Slide 10

Slide 10 text

purecss.io github.com/yui/pure/ Saturday, September 28, 13

Slide 11

Slide 11 text

purecss.io github.com/yui/pure/ Saturday, September 28, 13

Slide 12

Slide 12 text

purecss.io github.com/yui/pure/ Let’s consider the cons Saturday, September 28, 13

Slide 13

Slide 13 text

purecss.io github.com/yui/pure/ CSS FRAMEWORK APP.CSS Saturday, September 28, 13

Slide 14

Slide 14 text

purecss.io github.com/yui/pure/ CSS FRAMEWORK The part of the framework you use APP.CSS Saturday, September 28, 13

Slide 15

Slide 15 text

purecss.io github.com/yui/pure/ CSS FRAMEWORK The part of the framework you use The CSS you write to overwrite the framework APP.CSS Saturday, September 28, 13

Slide 16

Slide 16 text

purecss.io github.com/yui/pure/ CSS FRAMEWORK Potentially lots of unused CSS rules Heavy (do you need 8000 lines of CSS?) Overwriting existing rules is annoying Hard to update Saturday, September 28, 13

Slide 17

Slide 17 text

purecss.io github.com/yui/pure/ BASE Normalize/Reset APP.CSS Saturday, September 28, 13

Slide 18

Slide 18 text

purecss.io github.com/yui/pure/ BASE + APP Write lots of boilerplate code Can’t focus on your application’s design Saturday, September 28, 13

Slide 19

Slide 19 text

purecss.io github.com/yui/pure/ All sites share some common elements Saturday, September 28, 13

Slide 20

Slide 20 text

purecss.io github.com/yui/pure/ All sites share some common elements Base Grids Forms Menus Tables Buttons Saturday, September 28, 13

Slide 21

Slide 21 text

purecss.io github.com/yui/pure/ PURE A minimal set of CSS styles for common components APP.CSS Saturday, September 28, 13

Slide 22

Slide 22 text

purecss.io github.com/yui/pure/ Say hello to Pure Foundational CSS modules for every web project 4KB miniﬁed + gzipped Minimal and ﬂat design, that you can build on Namespaced .pure-* On Yahoo CDN Saturday, September 28, 13

Slide 23

Slide 23 text

purecss.io github.com/yui/pure/ Say hello to Pure 690+ FORKS 5900+ STARS 4,000+ TWEETS 3,600,000+ PAGE VIEWS Saturday, September 28, 13

Slide 24

Slide 24 text

purecss.io github.com/yui/pure/ purecss.io Saturday, September 28, 13

Slide 25

Slide 25 text

purecss.io github.com/yui/pure/ A set of small, responsive, CSS modules that you can use in every web project purecss.io RECAP Saturday, September 28, 13

Slide 26

Slide 26 text

purecss.io github.com/yui/pure/ BUILD YOUR APP USING PURE Saturday, September 28, 13

Slide 27

Slide 27 text

purecss.io github.com/yui/pure/ Saturday, September 28, 13

Slide 28

Slide 28 text

purecss.io github.com/yui/pure/ $ bower install pure $ yo mobile Saturday, September 28, 13

Slide 29

Slide 29 text

purecss.io github.com/yui/pure/ and that’s pretty much it... ...well, almost. Saturday, September 28, 13

Slide 30

Slide 30 text

purecss.io github.com/yui/pure/ Unless you’re interested in... Customizing Pure Preprocessors Skinning Bleeding Edge Goodies Pure + JavaScript Saturday, September 28, 13

Slide 31

Slide 31 text

purecss.io github.com/yui/pure/ Extending Pure A Primary Button Saturday, September 28, 13

Slide 32

Slide 32 text

purecss.io github.com/yui/pure/ Saturday, September 28, 13

Slide 33

Slide 33 text

purecss.io github.com/yui/pure/ Base styles. Applies to all buttons. Saturday, September 28, 13

Slide 34

Slide 34 text

purecss.io github.com/yui/pure/ Saturday, September 28, 13

Slide 35

Slide 35 text

purecss.io github.com/yui/pure/ Presentational styles for a primary button. Saturday, September 28, 13

Slide 36

Slide 36 text

purecss.io github.com/yui/pure/ ... Saturday, September 28, 13

Slide 37

Slide 37 text

purecss.io github.com/yui/pure/ ... Add presentational styles for your own button. Saturday, September 28, 13

Slide 38

Slide 38 text

purecss.io github.com/yui/pure/ .pure-button { background: #ddd; color: #111; font-weight: bold; ... } My custom button Saturday, September 28, 13

Slide 39

Slide 39 text

purecss.io github.com/yui/pure/ All Pure components can be extended this way! Saturday, September 28, 13

Slide 40

Slide 40 text

purecss.io github.com/yui/pure/ You can adopt this too. Separate styles into a base class and presentational classes. Saturday, September 28, 13

Slide 41

Slide 41 text

purecss.io github.com/yui/pure/ Preprocessors Don’t use them on Pure’s source ﬁles. Use them in your app’s CSS instead! Saturday, September 28, 13

Slide 42

Slide 42 text

purecss.io github.com/yui/pure/ @import “pure”; @primaryColor: red; @backgroundColor: #fff; @textColor: #111; @buttonBgColor: #ddd; .pure-button { background: @buttonBgColor; color: @textColor; } ... app.scss Pull in Pure’s CSS ﬁle... ...Then add or modify classes Saturday, September 28, 13

Slide 43

Slide 43 text

purecss.io github.com/yui/pure/ Skinning 1 click = a whole new skin No need to code yui.github.io/skinbuilder/?mode=pure Saturday, September 28, 13

Slide 44

Slide 44 text

purecss.io github.com/yui/pure/ Bleeding Edge Mobile-ﬁrst Grids Responsive Menus } tilomitra.github.io/pure.html UI Components Typography Saturday, September 28, 13

Slide 45

Slide 45 text

purecss.io github.com/yui/pure/ Pure + JS Pure works with all JS frameworks Use what you like Focus on your hack, not on the stack Saturday, September 28, 13

Slide 46

Slide 46 text

purecss.io github.com/yui/pure/ JS alternatives -webkit-overflow-scroll: touch; transition(...) @keyframes{...} Control CSS Animations and Transitions with JS Saturday, September 28, 13

Slide 47

Slide 47 text

purecss.io github.com/yui/pure/ RECAP Use via , bower, or yo Don’t modify Pure source ﬁles Skin Builder Saturday, September 28, 13

Slide 48

Slide 48 text

purecss.io github.com/yui/pure/ USE PURE FOR YOUR HACK Saturday, September 28, 13

Slide 49

Slide 49 text

purecss.io github.com/yui/pure/ I’LL BE HERE T O H E L P O U T Saturday, September 28, 13

Slide 50

Slide 50 text

purecss.io github.com/yui/pure/ Thanks! TILO MITRA Twitter/Github: @tilomitra Thanks to Woot for the awesome rainbow unicorn drawings. http://go-ccart.deviantart.com/art/Woot-354798326 Saturday, September 28, 13