CSS Frameworks: King of All @media
•
13 likes•1,703 views
CSS frameworks allow for nested rules, variables, mixins, extends and imports to simplify stylesheet maintenance. Preprocessors like Sass compile CSS with additional features like nested selectors, variables, functions and mixins. Popular frameworks include Blueprint and Compass which provide tools and patterns for common tasks. Preprocessors increase abstraction and reduce duplication, improving organization and simplifying code.
More Related Content
What's hot
What's hot (20)
Similar to CSS Frameworks: King of All @media
Similar to CSS Frameworks: King of All @media (20)
More from Wynn Netherland
More from Wynn Netherland (9)
CSS Frameworks: King of All @media
- 1. meta ^ CSS FRAMEWORKS: KING OF ALL @media updated for Sass 3.0 WYNNNETHERLAND
- 2. Have you heard? CSS3 is big
- 3. Hot New properties
- 5. border-image
- 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 means Typographic freedom!
- 16. Cool New selectors
- 17. CSS3 selectors (and some golden oldies) * ::first-letter :enabled E :first-line :disabled .class ::first-line :checked #id E[attribute^=value] :header E F E[attribute$=value] E > F E[attribute*=value] E + F E ~ F E[attribute] :root Steal this from jQuery, please E[attribute=value] :last-child E[attribute~=value] :only-child E[attribute|=value] :nth-child() :first-child :nth-last-child() :link :first-of-type :visited :last-of-type :lang() :only-of-type :before :nth-of-type() ::before :nth-last-of-type() :after :empty ::after :not() :first-letter :target
- 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. I want to talk about REAL stylesheet innovation
- 28. I want to talk about HOW we write stylesheets
- 29. I want to talk about how we MAINTAIN stylesheets
- 30. I want to talk about how we SIMPLIFY stylesheets
- 31. A brief History of radio
- 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. Hey, it w as t h e 9 0 s, X s w e re in! XM = Beyond FM
- 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. A brief History of web presentation
- 54. HTML
- 55. for layout HTML + <TABLE>
- 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.
- 67. CSS2 selectors * 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
- 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
- 82. Nested rules
- 83. Nested rules - selectors table.users tr td {background: #111} table.users tr td a {color: #333}
- 84. Nested rules - selectors table.users { tr { td { background: #d1d1d; a { color: #111; } } } }
- 85. Nested rules - selectors table.users { tr { td { color: #111; &.alt { color: #333; } &:hover { color: #666; } } } }
- 86. Nested rules - properties .users { font: { size: 1.2em; style: italics; weight: bold; } }
- 87. Syntax options
- 88. Syntax options - SCSS Sassy CSS! table.users { tr { td { background: #d1d1d; a { color: #111; } } } }
- 89. Syntax options - Indented I whitespace table.users tr td background: #d1d1d a color: #111
- 90. Variables
- 91. Variables .user { background: #333; border-size: 2px; } .owner { background: #333; border-size: 2px; } .admin { background: #666; border-size: 4px; }
- 92. Variables $gray: #333; $default_border: 2px; .user { background: $gray; border-size: $default_border;} .owner { background: $gray; border-size: $default_border;} and colo r mixing! .admin { Ev e n ma t h ! background: $gray + #333; border-size: $default_border + 2px; }
- 93. Mixins
- 94. Mixins .avatar { padding: 2px; border: solid 1px #ddd; position: absolute; top: 5px; left: 5px; } p img { padding: 2px; border: solid 1px #ddd; }
- 95. Mixins @mixin frame($padding_width: 2px, $border_color: #ddd) { padding: $padding_width; border: { fines the mixin de width: 1px; style: solid; color $border_color; } } .avatar { ru le s he in t @include frame; es mix position: absolute; top: 5px; left: 5px; } p img { @include frame(1px, #ccc);}
- 96. Extend
- 97. Mixins .flash { padding: 5px; border-width: 1px; font-weight: bold; } .error { color: #8a1f11; background: #fbe3e4; } .notice { color: #514721; background: #fff6bf; }
- 98. Mixins .flash { padding: 5px; border-width: 1px; font-weight: bold; } .error { @extend .flash; color: #8a1f11; background: #fbe3e4; } .notice { @extend .flash; color: #514721; background: #fff6bf; }
- 99. Mixins .flash, .error, .notice { padding: 5px; border-width: 1px; font-weight: bold; } .error { color: #8a1f11; background: #fbe3e4; } .notice { color: #514721; background: #fff6bf; } now we can use a single class in our markup
- 100. Imports
- 101. Imports @import url(/css/reset.css) @import url(/css/typography.css) @import url(/css/layout.css) parent + 3 @imports = 4 http requests
- 102. Imports @import "reset.scss" # _reset.scss @import "typography" # _typography.scss @import "layout.css" # url(layout.css) Included at compile time - just one http request
- 103. Imports + Mixins Now it gets fun!
- 104. Compass CSS3 mixins @import "compass/css3"; .callout { @include border-radius(5px); @include linear-gradient("left top", "left bottom", #fff, #ddd); } .callout { -moz-border-radius: 5px; very different syntax -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)); }
- 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. Compass CSS3 mixins @import "compass/css3.scss"; .callout { @include border-radius(5px); @include linear-gradient("left top", "left bottom", #fff, #ddd); } .callout { -moz-border-radius: 5px; very different syntax -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)); }
- 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. isn't that just like not having it? beta-new-css8-property-dilly ...and we're back.
- 112. Vendor specific stylesheets Maybe. But I'd like to retain Internet Explorer's special status unto itself
- 113. Hey, funny you should ask! CSS preprocesors
- 115. Bring your favorite CSS Framework
- 116. A Blueprint example <div id='wrapper' class="container"> <div id='content' class="span-7 prepend-1"> <div id='main' class="container"> boo ... </div> <div id='featured' class="span-5 last"> ... </div> </div> <div id='sidebar' class="span-3 append-1 last"> ... </div> </div>
- 117. A Blueprint example #wrapper { @include container; #content { @include column(7); @include append(1); #featured { @include column(5, true); } } #sidebar { @include column(3, true); @include prepend(1); } }
- 118. Functions
- 120. Sass 2.4 color functions 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 http://nex-3.com/posts/89-powerful-color-manipulation-with-sass
- 121. with alpha support! Sass 2.4 color functions 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) http://nex-3.com/posts/89-powerful-color-manipulation-with-sass
- 122. Share your patterns
- 124. Image sprites
- 125. Image sprites 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) ...
- 126. URL helpers
- 127. URL helpers #nav { background: image-url("nav_bg.png") repeat-x top center; } DEVELOPMENT #nav { background: url("/images/nav_bg.png") repeat-x top center; elopment, } v ths for de relative pa production PRODUCTION a bsolute for #nav { background: url("http://assets.example.com/images/nav_bg.png") repeat-x top center; }
- 129. Who makes this syntactic sugar?
- 130. Sass and Compass oh yeah, and haml, too
- 131. hamlsass
- 132. hamlsass
- 133. Sass and Compass $ 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
- 134. shameless plug Compass and WordPress $ 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
- 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 an d thanks for having me! http://sass-lang.com http://compass-style.org http://compass-style.org/docs/ blog: wynnnetherland.com twitter: @pengwynn linkedin.com/in/netherland