CSS Metaframeworks - King of all @media

Transcript

1. WYNNNETHERLAND CSS FRAMEWORKS: KING OF ALL @media ^ meta updated for Sass 3.0
2. Have you heard? CSS3 is big
3. New properties Hot
4. border-radius
5. border-image
6. www.zurb.com/playground/ awesome-overlays
7. background-size
8. gradients
9. RGBA, HSL, HSLA colors rgba (0,0,0,1) is the new black!
10. text-shadow
11. box-shadow
12. word wrap
13. outline
14. columns
15. @font-face Typographic freedom! means
16. New selectors Cool
17. * E .class #id E F E > F E + F E[attribute] E[attribute=value] E[attribute~=value] E[attribute|=value] :first-child :link :visited :lang() :before ::before :after ::after :first-letter ::first-letter :first-line ::first-line E[attribute^=value] E[attribute$=value] E[attribute*=value] E ~ F :root :last-child :only-child :nth-child() :nth-last-child() :first-of-type :last-of-type :only-of-type :nth-of-type() :nth-last-of-type() :empty :not() :target :enabled :disabled :checked CSS3 selectors (and some golden oldies) :header Steal this from jQuery, please
18. Some smash hits from the design blogs
19. 30 tips for SemanticTM markup and classes
20. 101 CSS resets
21. 40 Grid layouts you must see
22. 7 UP-lifting reasons to use CSS Sprites
23. Have the <TABLE>'s turned?
24. 30 sites for great typography
25. RT @linkbait: Effortless drop shadows, gradients, and rounded corners
26. This is not a talk about CSS Follow @smashingmag for your CSS tips & tricks
27. REAL stylesheet innovation I want to talk about
28. HOW we write stylesheets I want to talk about
29. how we MAINTAIN stylesheets I want to talk about
30. how we SIMPLIFY stylesheets I want to talk about
31. History of radio A brief
32. In the beginning...
33. AM
34. AM = Amplitude Modulation
35. Invented in 1906
36. Dominant format until 1978
37. Still rockin' after 100 years!
38. Then came
39. FM
40. FM = Frequency Modulation
41. Does not suffer susceptibility to atmospheric and electrical interference.
42. Patented in 1933. Approved in 1941. Standardized in 1961. World domination in 1978. Unchallenged for thirty years.
43. Until...
44. XM
45. XM = Beyond FM Hey, it was the 90s, Xs were in!
46. Founded in 1988. Launched in 2001. Merged with Sirius in 2009.
47. Superior sound.
48. No commercials.
49. Listen to Kasem's Top 40 from coast to coast.
50. What the heck does this have to do with stylesheets, anyway?
51. I see some parallels.
52. History of web presentation A brief
53. In the beginning...
54. HTML
55. HTML + <TABLE> for layout
56. Invented in 1989
57. <TABLE> added in 1997
58. Still rockin' after 20 years!
59. Then came
60. HTML + CSS
61. HTML + CSS = Content + Presentation
62. CSS 1 published in 1996.
63. No more <FONT> tags.
64. font styling, color, borders & more!
65. CSS 2 published in 1998.
66. Improved selectors
67. * E .class #id E F E > F E + F E[attribute] E[attribute=value] E[attribute|=value] :first-child :link :visited :lang() :before ::before :after ::after :first-letter :first-line CSS2 selectors
68. ... and even more stuff no browsers supported until years later.
69. Which brings us back to...
70. CSS 3 published in 20??
71. Web 2.0 brought new demands
72. Round corners
73. Drop shadows
74. Gradients
75. But we already covered that.
76. That's the 75 slide introduction Titles are the new bullets.
77. 14 years of CSS has basically given us
78. more selectors + more properties
79. Until now...
80. Metaframeworks = high fidelity stylesheets
81. Metaframeworks output CSS.
82. Nested rules
83. table.users tr td {background: #111} table.users tr td a {color: #333} Nested rules - selectors
84. table.users { tr { td { background: #d1d1d; a { color: #111; } } } } Nested rules - selectors
85. table.users { tr { td { color: #111; &.alt { color: #333; } &:hover { color: #666; } } } } Nested rules - selectors
86. .users { font: { size: 1.2em; style: italics; weight: bold; } } Nested rules - properties
87. Syntax options
88. table.users { tr { td { background: #d1d1d; a { color: #111; } } } } Syntax options - SCSS Sassy CSS!
89. table.users tr td background: #d1d1d a color: #111 Syntax options - Indented I — whitespace
90. Variables
91. .user { background: #333; border-size: 2px; } .owner { background: #333; border-size: 2px; } .admin { background: #666; border-size: 4px; } Variables
92. $gray: #333; $default_border: 2px; .user { background: $gray; border-size: $default_border;} .owner { background: $gray; border-size: $default_border;} .admin { background: $gray + #333; border-size: $default_border + 2px; } Variables Even math! and color mixing!
93. Mixins
94. .avatar { padding: 2px; border: solid 1px #ddd; position: absolute; top: 5px; left: 5px; } p img { padding: 2px; border: solid 1px #ddd; } Mixins
95. @mixin frame($padding_width: 2px, $border_color: #ddd) { padding: $padding_width; border: { width: 1px; style: solid; color $border_color; } } .avatar { @include frame; position: absolute; top: 5px; left: 5px; } p img { @include frame(1px, #ccc);} Mixins defines the mixin mixes in the rules
96. Extend
97. .flash { padding: 5px; border-width: 1px; font-weight: bold; } .error { color: #8a1f11; background: #fbe3e4; } .notice { color: #514721; background: #fff6bf; } Mixins
98. .flash { padding: 5px; border-width: 1px; font-weight: bold; } .error { @extend .flash; color: #8a1f11; background: #fbe3e4; } .notice { @extend .flash; color: #514721; background: #fff6bf; } Mixins
99. .flash, .error, .notice { padding: 5px; border-width: 1px; font-weight: bold; } .error { color: #8a1f11; background: #fbe3e4; } .notice { color: #514721; background: #fff6bf; } Mixins now we can use a single class in our markup
100. Imports
101. @import url(/css/reset.css) @import url(/css/typography.css) @import url(/css/layout.css) Imports parent + 3 @imports = 4 http requests
102. @import "reset.scss" # _reset.scss @import "typography" # _typography.scss @import "layout.css" # url(layout.css) Imports Included at compile time - just one http request
103. Imports + Mixins Now it gets fun!
104. @import "compass/css3"; .callout { @include border-radius(5px); @include linear-gradient("left top", "left bottom", #fff, #ddd); } .callout { -moz-border-radius: 5px; -webkit-border-radius: 5px; -border-radius: 5px; background-image: -moz-linear-gradient(top, bottom, from(#fff), to (#ddd)); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #ddd)); } Compass CSS3 mixins very different syntax
105. A brief detour
106. “It’s time to abolish all vendor prefixes. They’ve become solutions for which there is no problem, and they are actively harming web standards.” -Peter-Paul Koch aka @ppk http:/ /www.quirksmode.org/blog/ archives/2010/03/ css_vendor_pref.html
107. Ummm. Not so fast.
108. @import "compass/css3.scss"; .callout { @include border-radius(5px); @include linear-gradient("left top", "left bottom", #fff, #ddd); } .callout { -moz-border-radius: 5px; -webkit-border-radius: 5px; -border-radius: 5px; background-image: -moz-linear-gradient(top, bottom, from(#fff), to (#ddd)); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #ddd)); } Compass CSS3 mixins very different syntax
109. “Well, reactions to my proposal to abolish vendor prefixes are mixed, and I might have overshot my target here.” -Peter-Paul Koch aka @ppk http:/ /www.quirksmode.org/blog/ archives/2010/03/ css_vendor_pref_1.html
110. Solutions?
111. beta-new-css8-property-dilly isn't that just like not having it? ...and we're back.
112. Vendor specific stylesheets Maybe. But I'd like to retain Internet Explorer's special status unto itself
113. CSS preprocesors Hey, funny you should ask!
114. css3/border_radius.sass css3/inline_block.sass css3/opacity.sass css3/text_shadow.sass css3/box_shadow.sass css3/columns.sass css3/box_sizing.sass css3/gradient.sass css3/background_clip.sass css3/background_origin.sass css3/background_size.sass css3/font_face.sass css3/transform.sass css3/transition.sass Compass CSS3 mixins
115. Bring your favorite CSS Framework
116. <div id='wrapper' class="container"> <div id='content' class="span-7 prepend-1"> <div id='main' class="container"> ... </div> <div id='featured' class="span-5 last"> ... </div> </div> <div id='sidebar' class="span-3 append-1 last"> ... </div> </div> A Blueprint example boo
117. #wrapper { @include container; #content { @include column(7); @include append(1); #featured { @include column(5, true); } } #sidebar { @include column(3, true); @include prepend(1); } } A Blueprint example
118. Functions
119. Very. Powerful. Functions.
120. hue(#cc3) => 60deg saturation(#cc3) => 60% lightness(#cc3) => 50% adjust-hue(#cc3, 20deg) => #9c3 saturate(#cc3, 10%) => #d9d926 desaturate(#cc3, 10%) => #bfbf40 lighten(#cc3, 10%) => #d6d65c darken(#cc3, 10%) => #a3a329 grayscale(#cc3) => desaturate(#cc3, 100%) = #808080 complement(#cc3) => adjust-hue(#cc3, 180deg) = #33c mix(#cc3, #00f) => #e56619 mix(#cc3, #00f, 10%) => #f91405 mix(#cc3, #00f, 90%) => #d1b72d Sass 2.4 color functions http://nex-3.com/posts/89-powerful-color-manipulation-with-sass
121. mix(rgba(51, 255, 51, 0.75), #f00) => rgba(178, 95, 19, 0.875) mix(rgba(51, 255, 51, 0.90), #f00) => rgba(163, 114, 22, 0.95) alpha(rgba(51, 255, 51, 0.75)) => 0.75 opacity(rgba(51, 255, 51, 0.75)) => 0.75 opacify(rgba(51, 255, 51, 0.75), 0.1) => rgba(51, 255, 51, 0.85) fade-in(rgba(51, 255, 51, 0.75), 0.1) => rgba(51, 255, 51, 0.85) transparentize(rgba(51, 255, 51, 0.75), 0.1) => rgba(51, 255, 51, 0.65) fade-out(rgba(51, 255, 51, 0.75), 0.1) => rgba(51, 255, 51, 0.65) Sass 2.4 color functions with alpha support! http://nex-3.com/posts/89-powerful-color-manipulation-with-sass
122. Share your patterns
123. http://brandonmathis.com/projects/fancy-buttons/
124. Image sprites
125. EXAMPLE 1 a.twitter +sprite-img("icons-32.png", 1) a.facebook +sprite-img("icons-32png", 2) ... EXAMPLE 2 a +sprite-background("icons-32.png") a.twitter +sprite-column(1) a.facebook +sprite-row(2) ... Image sprites
126. URL helpers
127. #nav { background: image-url("nav_bg.png") repeat-x top center; } DEVELOPMENT #nav { background: url("/images/nav_bg.png") repeat-x top center; } PRODUCTION #nav { background: url("http://assets.example.com/images/nav_bg.png") repeat-x top center; } URL helpers relative paths for development, absolute for production
128. stylesheet-url($path) font-url($path) image-url($path) URL helpers
129. Who makes this syntactic sugar?
130. Sass and Compass oh yeah, and haml, too
131. hamlsass
132. hamlsass
133. $ sudo gem install haml $ sudo gem install compass --pre CALL IT FROM THE COMMAND LINE $ sass --watch screen.scss OR COMPASS-IZE YOUR PROJECT $ compass --rails -f blueprint OR WATCH A FOLDER $ compass --watch Sass and Compass
134. $ sudo gem install compass-wordpress CRANK OUT A NEW SASS-Y WORDPRESS THEME $ compass -r compass-wordpress \ -f wordpress -p thematic \ --sass-dir=sass --css-dir=css \ -s compressed my_awesome_theme AUTOCOMPILE YOUR CHANGES $ compass --watch Compass and WordPress shameless plug
135. DEMO and code spelunking
136. What's the future?
137. First, grow the category
139. Next, recruit some talent
140. You'll love it or hate it.
141. Resources http://sass-lang.com http://compass-style.org http://compass-style.org/docs/ blog: wynnnetherland.com twitter: @pengwynn linkedin.com/in/netherland and thanks for having me!