Accelerated Stylesheets

Transcript

1. ACCELERATED STYLESHEETS WYNN NETHERLAND NATHAN SMITH ...or more style with less typing
2. 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. 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 just web pages or web sites.” — Todd Nienkerk aka @toddross co-founder, FourKitchens.com
27. REAL stylesheet innovation We want to talk about
28. HOW we write stylesheets We want to talk about
29. how we MAINTAIN stylesheets We want to talk about
30. how we SIMPLIFY stylesheets We want to talk about
31. when OLD SCHOOL beats the NEW SHINY We want to talk about
32. CSS Frameworks Tool #1
33. Rapidly prototype your layouts
34. Examples:
37. Percentage-based grid, screenshot in Firefox 4.0 http://host.sonspring.com/yui3_grid
38. Understand the underlying CSS Tools. Not crutches.
39. JavaScript Tool #2
40. JavaScript? You mean like jQuery?
41. What’s JavaScript got to do with CSS?
42. Mobile
43. Responsive Design & Media Queries
44. Adapt.js
45. Adapt.js - Serve 960’s (or any) CSS dynamically http://adapt.960.gs
46. 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>
47. 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>
48. Forms
49. Formalize
51. Sass & Compass Tool #3
52. “GET OFF MY LAWN.” Nathan Smith Creator, 960.gs Big Design Speaker (and Reformed Curmudgeon)
53. History of web presentation A brief
54. In the beginning...
55. HTML
56. HTML + <TABLE> for layout
57. HTML was invented in 1989
58. <TABLE> added in 1997
59. Still rockin' after 20 years!
60. Then came
61. HTML + CSS
62. HTML + CSS = Content + Presentation
63. CSS 1 published in 1996.
64. No more <FONT> tags.
65. font styling, color, borders & more!
66. CSS 2 published in 1998.
67. Improved selectors
68. * 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
69. ... and even more stuff no browsers supported until years later.
70. Which brings us back to...
71. CSS 3 published in 20__?
72. “Web 2.0” brought new demands
73. Round corners
74. Drop shadows
75. Gradients
76. But we already covered that.
77. That's the 70+ slide introduction Titles are the new bullets.
78. 14 years of CSS has basically given us
79. more selectors + more properties
80. Until now...
81. Metaframeworks = high fidelity stylesheets
82. Metaframeworks output CSS.
83. Nested rules
84. table.users tr td {background: #111} table.users tr td a {color: #333} Nested rules - selectors
85. table.users { tr { td { background: #d1d1d; a { color: #111; } } } } Nested rules - selectors
86. table.users { tr { td { color: #111; &.alt { color: #333; } &:hover { color: #666; } } } } Nested rules - selectors
87. .users { font: { size: 1.2em; style: italics; weight: bold; } } Nested rules - properties
88. Syntax options
89. table.users { tr { td { background: #d1d1d; a { color: #111; } } } } Syntax options - SCSS Sassy CSS!
90. table.users tr td background: #d1d1d a color: #111 Syntax options - Indented I — whitespace
91. Variables
92. .user { background: #333; border-size: 2px; } .owner { background: #333; border-size: 2px; } .admin { background: #666; border-size: 4px; } Variables
93. $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!
94. Mixins
95. .avatar { padding: 2px; border: solid 1px #ddd; position: absolute; top: 5px; left: 5px; } p img { padding: 2px; border: solid 1px #ddd; } Mixins
96. @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
97. Extend
98. .flash { padding: 5px; border-width: 1px; font-weight: bold; } .error { color: #8a1f11; background: #fbe3e4; } .notice { color: #514721; background: #fff6bf; } Mixins
99. .flash { padding: 5px; border-width: 1px; font-weight: bold; } .error { @extend .flash; color: #8a1f11; background: #fbe3e4; } .notice { @extend .flash; color: #514721; background: #fff6bf; } Mixins
100. .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
101. Imports
102. @import url(/css/reset.css) @import url(/css/typography.css) @import url(/css/layout.css) Imports parent + 3 @imports = 4 HTTP requests
103. @import "reset.scss" # _reset.scss @import "typography" # _typography.scss @import "layout.css" # url(layout.css) Imports Included at compile time - just one http request
104. Imports + Mixins Now it gets fun!
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. Bring your favorite CSS Framework
115. <div id= "wrapper" class="container"> <div id="content" class="span-7 prepend-1"> <div id="main"> ... </div> <div id="featured" class="span-5 last"> ... </div> </div> <div id="sidebar" class="span-3 append-1 last"> ... </div> </div> </div> A Blueprint example boo? / Yay?
116. #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
117. Look, Ma! No math!
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 color functions with alpha support! http://nex-3.com/posts/89-powerful-color-manipulation-with-sass
123. Blueprint
124. Blueprint ★ Buttons ★ Colors ★ Debug ★ Fancy Type ★ Form ★ Grid ★ Interaction ★ Internet Explorer ★ Link Icons ★ Liquid ★ Print ★ Reset ★ Rtl ★ Scaffolding ★ Typography ★ Utilities
125. CSS3
126. CSS3 ★ Appearance ★ Background Clip ★ Background Origin ★ Background Size ★ Border Radius ★ Box ★ Box Shadow ★ Box Sizing ★ CSS3 Pie ★ Columns ★ Font Face ★ Gradient ★ Images ★ Inline Block ★ Opacity ★ Shared Utilities ★ Text Shadow ★ Transform ★ Transform (legacy) ★ Transition
127. Image sprites
128. @import "icon/*.png" .actions .new +icon-sprite(new) .edit +icon-sprite(edit) .save +icon-sprite(save) .delete +icon-sprite(delete) Image sprites .icon-sprite, .actions .new, .actions .edit, .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; } .actions .delete { background-position: 0 0; } @import "icon/*.png" public/images/icon/new.png public/images/icon/edit.png public/images/icon/save.png public/images/icon/delete.png 1. 2. 3. I like the Sprite in you®
129. URL helpers
130. #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
131. stylesheet-url($path) font-url($path) image-url($path) URL helpers
132. Stats
133. 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 | | --------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- |
134. Share your patterns
135. http://brandonmathis.com/projects/fancy-buttons/
136. @import "fancy-buttons" button, a.button +fancy-button(#2966a8)
137. compass-960
138. $ninesixty-columns: 16 #wrap +grid-container #left-nav +alpha +grid(5) #main-content +grid-prefix(1) +grid(10) +omega Compass 960 https://github.com/chriseppstein/compass-960-plugin
139. $ gem install sass $ gem install compass Call it from the command line $ sass watch screen.scss Compass-ize your project $ compass init rails -f blueprint Watch a folder $ compass watch Sass & Compass
140. compass-wordpress
141. $ gem install compass-wordpress Crank out a new 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
142. compass-formalize
143. $ gem install compass_formalize $ compass create my-project -r compass_formalize compass install formalize/dojo compass install formalize/extjs compass install formalize/jquery compass install formalize/mootools compass install formalize/prototype compass install formalize/yui Compass and Formalize shameless plug #2 And one of these
144. Isn’t she Sassy, folks? GET THE BOOK.
145. sass40 Save 40% and get early access! Sadly, sass100 is not a valid code.
146. DEMO and code spelunking