Your SlideShare is downloading. ×
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Accelerated Stylesheets

2,980

Published on

Published in: Technology
1 Comment
8 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,980
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
53
Comments
1
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. ACCELERATED STYLESHEETS ...or more style with less typing NATHAN SMITH WYNN NETHERLAND
  • 2. CSS3 is BIG
  • 3. Hot New properties
  • 4. border-radius
  • 5. border-image
  • 6. www.zurb.com/playground/awesome-overlays
  • 7. background-size
  • 8. gradients
  • 9. RGBA, HSL, HSLA colorsrgba (0,0,0,1) is the new black!
  • 10. text-shadow
  • 11. box-shadow
  • 12. wordwrap
  • 13. outline
  • 14. columns
  • 15. @font-face meansTypographic 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, pleaseE[attribute=value] :last-childE[attribute~=value] :only-childE[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. WE  CSS
  • 19. This is not a talk about CSS.
  • 20. We think you write too much CSS.
  • 21. You have an ADDICTION.
  • 22.
  • 23.
  • 24. ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘
  • 25. It’s time to ⎋.
  • 26. “Design web systems, not justweb pages or web sites.” — Todd Nienkerk aka @toddross co-founder, FourKitchens.com
  • 27. We want to talk about REAL stylesheet innovation
  • 28. We want to talk about HOW we write stylesheets
  • 29. We want to talk about how we MAINTAIN stylesheets
  • 30. We want to talk about how we SIMPLIFY stylesheets
  • 31. We want to talk about when OLD SCHOOL beats the NEW SHINY
  • 32. Tool #1 CSS Frameworks
  • 33. Rapidly prototype your layouts
  • 34. Examples:
  • 35. Percentage-based grid, screenshot in Firefox 4.0http://host.sonspring.com/yui3_grid
  • 36. Understand the underlying CSS Tools. Not crutches.
  • 37. Tool #2 JavaScript
  • 38. JavaScript? You mean like jQuery?
  • 39. What’s JavaScript got to do with CSS?
  • 40. Mobile
  • 41. Responsive Design & Media Queries
  • 42. Adapt.js
  • 43. Adapt.js - Serve 960’s (or any) CSS dynamically http://adapt.960.gs
  • 44. How to use Adapt.js = A human-readable config <script> // Edit to suit your needs. var ADAPT_CONFIG = { // Where is your CSS? path: assets/css/, // false = Only run once, when page first loads. // true = Change on window resize and page tilt. dynamic: true, // Optional callback... myCallback(i, width) callback: myCallback, // First range entry is the minimum. // Last range entry is the maximum. // Separate ranges by "to" keyword. range: [ 0px to 760px = mobile.css, 760px to 980px = 720.css, 980px to 1280px = 960.css, 1280px to 1600px = 1200.css, 1600px to 1920px = 1560.css, 1920px = fluid.css ] }; </script>
  • 45. How to use Adapt.js = A human-readable config <script> // Edit to suit your needs. var ADAPT_CONFIG = { // Where is your CSS? path: assets/css/, // false = Only run once, when page first loads. // true = Change on window resize and page tilt. dynamic: true, // Optional callback... myCallback(i, width) callback: myCallback, // First range entry is the minimum. // Last range entry is the maximum. // Separate ranges by "to" keyword. range: [ 0px to 760px = mobile.css, 760px to 980px = 720.css, 980px to 1280px = 960.css, 1280px to 1600px = 1200.css, 1600px to 1920px = 1560.css, 1920px = fluid.css ] }; </script>
  • 46. Forms
  • 47. Formalize
  • 48. Tool #3 Sass & Compass
  • 49. “GET OFF MY LAWN.” Nathan Smith Creator, 960.gs Big Design Speaker (and Reformed Curmudgeon)
  • 50. A brief History of web presentation
  • 51. In the beginning...
  • 52. HTML
  • 53. for layoutHTML + <TABLE>
  • 54. HTML was invented in 1989
  • 55. <TABLE> added in 1997
  • 56. Still rockin after 20 years!
  • 57. Then came
  • 58. HTML + CSS
  • 59. HTML + CSS = Content + Presentation
  • 60. CSS 1 published in 1996.
  • 61. No more <FONT> tags.
  • 62. font styling, color, borders & more!
  • 63. CSS 2 published in 1998.
  • 64. Improved selectors
  • 65. 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
  • 66. ... and even more stuff no browsers supported until years later.
  • 67. Which brings us back to...
  • 68. CSS 3 published in 20__?
  • 69. “Web 2.0” brought new demands
  • 70. Round corners
  • 71. Drop shadows
  • 72. Gradients
  • 73. But we already covered that.
  • 74. Thats the 70+ slide introduction Titles are the new bullets.
  • 75. 14 years of CSS has basically given us
  • 76. more selectors + more properties
  • 77. Until now...
  • 78. Metaframeworks =high fidelity stylesheets
  • 79. Metaframeworks output CSS.
  • 80. Nested rules
  • 81. Nested rules - selectorstable.users tr td {background: #111}table.users tr td a {color: #333}
  • 82. Nested rules - selectorstable.users { tr { td { background: #d1d1d; a { color: #111; } } }}
  • 83. Nested rules - selectorstable.users { tr { td { color: #111; &.alt { color: #333; } &:hover { color: #666; } } }}
  • 84. Nested rules - properties.users { font: { size: 1.2em; style: italics; weight: bold; }}
  • 85. Syntax options
  • 86. Syntax options - SCSS Sassy CSS!table.users { tr { td { background: #d1d1d; a { color: #111; } } }}
  • 87. Syntax options - Indented I whitespacetable.users tr td background: #d1d1d a color: #111
  • 88. Variables
  • 89. Variables.user { background: #333; border-size: 2px;}.owner { background: #333; border-size: 2px;}.admin { background: #666; border-size: 4px;}
  • 90. 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;}
  • 91. Mixins
  • 92. Mixins.avatar { padding: 2px; border: solid 1px #ddd; position: absolute; top: 5px; left: 5px;}p img { padding: 2px; border: solid 1px #ddd;}
  • 93. 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);}
  • 94. Extend
  • 95. Mixins.flash { padding: 5px; border-width: 1px; font-weight: bold;}.error { color: #8a1f11; background: #fbe3e4;}.notice { color: #514721; background: #fff6bf;}
  • 96. Mixins.flash { padding: 5px; border-width: 1px; font-weight: bold;}.error { @extend .flash; color: #8a1f11; background: #fbe3e4;}.notice { @extend .flash; color: #514721; background: #fff6bf;}
  • 97. 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
  • 98. Imports
  • 99. Imports@import url(/css/reset.css)@import url(/css/typography.css)@import url(/css/layout.css) parent + 3 @imports = 4 HTTP requests
  • 100. Imports@import "reset.scss" # _reset.scss@import "typography" # _typography.scss@import "layout.css" # url(layout.css) Included at compile time - just one http request
  • 101. Imports + Mixins Now it gets fun!
  • 102. A brief detour
  • 103. “It’s time to abolish all vendor prefixes.They’ve become solutions for which there is noproblem, and they are actively harming webstandards.” — Peter-Paul Koch aka @ppkhttp://www.quirksmode.org/blog/archives/2010/03/css_vendor_pref.html
  • 104. Ummm. Not so fast.
  • 105. 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));}
  • 106. “Well, reactions to my proposal to abolishvendor prefixes are mixed, and I might haveovershot my target here.” -Peter-Paul Koch aka @ppkhttp://www.quirksmode.org/blog/archives/2010/03/css_vendor_pref_1.html
  • 107. Solutions?
  • 108. isnt that just like not having it?beta-new-css8-property-dilly ...and were back.
  • 109. Vendor specific stylesheets Maybe. But Id like to retainInternet Explorers special status unto itself
  • 110. Hey, funny you should ask! CSS preprocesors
  • 111. Bring your favorite CSS Framework
  • 112. A Blueprint example<div id= "wrapper" class="container"> <div id="content" class="span-7 prepend-1"> <div id="main"> / Yay? ... </div> boo? <div id="featured" class="span-5 last"> ... </div> </div> <div id="sidebar" class="span-3 append-1 last"> ... </div> </div></div>
  • 113. 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); }}
  • 114. Look, Ma! No math!
  • 115. Functions
  • 116. Very. Powerful. Functions.
  • 117. Sass 2.4 color functionshue(#cc3) => 60degsaturation(#cc3) => 60%lightness(#cc3) => 50%adjust-hue(#cc3, 20deg) => #9c3saturate(#cc3, 10%) => #d9d926desaturate(#cc3, 10%) => #bfbf40lighten(#cc3, 10%) => #d6d65cdarken(#cc3, 10%) => #a3a329grayscale(#cc3) => desaturate(#cc3, 100%) = #808080complement(#cc3) => adjust-hue(#cc3, 180deg) = #33cmix(#cc3, #00f) => #e56619mix(#cc3, #00f, 10%) => #f91405mix(#cc3, #00f, 90%) => #d1b72dhttp://nex-3.com/posts/89-powerful-color-manipulation-with-sass
  • 118. with alpha support!Sass color functionsmix(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.75opacity(rgba(51, 255, 51, 0.75)) => 0.75opacify(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
  • 119. Blueprint
  • 120. Blueprint ★ Buttons ★ Link Icons ★ Colors ★ Liquid ★ Debug ★ Print ★ Fancy Type ★ Reset ★ Form ★ Rtl ★ Grid ★ Scaffolding ★ Interaction ★ Typography ★ Internet Explorer ★ Utilities
  • 121. CSS3
  • 122. CSS3 ★ Appearance ★ Gradient ★ Background Clip ★ Images ★ Background Origin ★ Inline Block ★ Background Size ★ Opacity ★ Border Radius ★ Shared Utilities ★ Box ★ Text Shadow ★ Box Shadow ★ Transform ★ Box Sizing ★ Transform (legacy) ★ CSS3 Pie ★ Transition ★ Columns ★ Font Face
  • 123. Image sprites
  • 124. I like the Sprite in you Image sprites ® 1. @import "icon/*.png"@import "icon/*.png".actions 2. public/images/icon/new.png public/images/icon/edit.png .new public/images/icon/save.png +icon-sprite(new) public/images/icon/delete.png .edit +icon-sprite(edit) .save .icon-sprite, +icon-sprite(save) .actions .new, .delete .actions .edit, +icon-sprite(delete) .actions .save, .actions .delete { background: url(/images/icon-34fe0604ab.png) no-repeat; } .actions .new { background-position: 0 -64px; } .actions .edit { background-position: 0 -32px; } .actions .save { background-position: 0 -96px; } 3. .actions .delete { background-position: 0 0; }
  • 125. URL helpers
  • 126. URL helpers#nav background: image-url("nav_bg.png") repeat-x top centerDEVELOPMENT#nav { background: url("/images/nav_bg.png") repeat-x top center; v elopment, ths for de} relative pa productionPRODUCTION a bsolute for#nav { background: url("http://assets.example.com/images/nav_bg.png")repeat-x top center;}
  • 127. URL helpersstylesheet-url($path)font-url($path)image-url($path)
  • 128. Stats
  • 129. Stats| --------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- || Filename | Rules | Properties | Mixins Defs | Mixins Used | CSS Rules | CSS Properties || --------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- || app/stylesheets/_960.sass | 198 | 141 | 0 | 0 | -- | -- || app/stylesheets/_animation.sass | 2 | 2 | 0 | 0 | -- | -- || app/stylesheets/application.sass | 268 | 607 | 0 | 33 | 1131 | 3684 || app/stylesheets/_data_table.sass | 39 | 66 | 0 | 4 | -- | -- || app/stylesheets/_datepicker.sass | 125 | 242 | 0 | 0 | -- | -- || app/stylesheets/_formalize.sass | 82 | 78 | 0 | 4 | -- | -- || app/stylesheets/_forms.sass | 227 | 242 | 0 | 21 | -- | -- || app/stylesheets/ie.sass | 0 | 0 | 0 | 0 | 0 | 0 || app/stylesheets/_jscrollpane.sass | 20 | 43 | 0 | 0 | -- | -- || app/stylesheets/_prettify.sass | 16 | 16 | 0 | 0 | -- | -- || app/stylesheets/print.sass | 0 | 0 | 0 | 0 | 0 | 0 || app/stylesheets/_reset.sass | 111 | 18 | 0 | 0 | -- | -- || app/stylesheets/_text.sass | 27 | 18 | 0 | 0 | -- | -- || app/stylesheets/_tiptip.sass | 19 | 40 | 0 | 0 | -- | -- || app/stylesheets/_util.sass | 56 | 54 | 0 | 0 | -- | -- || app/stylesheets/_vars.sass | 0 | 6 | 2 | 0 | -- | -- || --------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- || Total (16 files): | 1190 | 1573 | 2 | 62 | 1131 | 3684 || --------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- |
  • 130. Share your patterns
  • 131. http://brandonmathis.com/projects/fancy-buttons/
  • 132. @import "fancy-buttons"button,a.button +fancy-button(#2966a8)
  • 133. compass-960
  • 134. Compass 960 $ninesixty-columns: 16 #wrap +grid-container #left-nav +alpha +grid(5) #main-content +grid-prefix(1) +grid(10) +omegahttps://github.com/chriseppstein/compass-960-plugin
  • 135. Sass & Compass$ gem install sass$ gem install compassCall it from the command line$ sass watch screen.scssCompass-ize your project$ compass init rails -f blueprintWatch a folder$ compass watch
  • 136. compass-wordpress
  • 137. shameless plugCompass and WordPress$ gem install compass-wordpressCrank out a new Wordpress theme$ compass -r compass-wordpress -f wordpress  -p thematic  --sass-dir=sass --css-dir=css -s compressed my_awesome_themeAutocompile your changes$ compass watch
  • 138. compass-formalize
  • 139. shameless plug #2Compass and Formalize$ gem install compass_formalize$ compass create my-project -r compass_formalizecompass install formalize/dojocompass install formalize/extjscompass install formalize/jquery And one of thesecompass install formalize/mootoolscompass install formalize/prototypecompass install formalize/yui
  • 140. Isn’t she Sassy, folks?GETTHEBOOK.
  • 141. Save 40% and get early access! sass40Sadly, sass100 is not a valid code.
  • 142. DEMOand code spelunking

×