ACCELERATED STYLESHEETS        ...or more style with less typing                          NATHAN SMITH                    ...
CSS3 is   BIG
Hot      New properties
border-radius
border-image
www.zurb.com/playground/awesome-overlays
background-size
gradients
RGBA, HSL, HSLA colorsrgba (0,0,0,1) is the new black!
text-shadow
box-shadow
wordwrap
outline
columns
@font-face       meansTypographic freedom!
Cool       New selectors
CSS3 selectors (and some golden oldies)          *                 ::first-letter                   :enabled          E   ...
WE  CSS
This is not a talk about CSS.
We think you write too much CSS.
You have an ADDICTION.
⌘
⌘
⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘
It’s time to ⎋.
“Design web systems, not justweb pages or web sites.”         — Todd Nienkerk aka @toddross           co-founder, FourKitc...
We want to talk about           REAL stylesheet innovation
We want to talk about            HOW we write stylesheets
We want to talk about         how we MAINTAIN stylesheets
We want to talk about          how we SIMPLIFY stylesheets
We want to talk about   when OLD SCHOOL beats the NEW SHINY
Tool #1          CSS Frameworks
Rapidly prototype your layouts
Examples:
Percentage-based grid, screenshot in Firefox 4.0http://host.sonspring.com/yui3_grid
Understand the underlying CSS       Tools. Not crutches.
Tool #2          JavaScript
JavaScript? You mean like jQuery?
What’s JavaScript got to do with CSS?
Mobile
Responsive Design & Media Queries
Adapt.js
Adapt.js - Serve 960’s (or any) CSS dynamically                  http://adapt.960.gs
How to use Adapt.js = A human-readable config        <script>        // Edit to suit your needs.        var ADAPT_CONFIG = ...
How to use Adapt.js = A human-readable config        <script>        // Edit to suit your needs.        var ADAPT_CONFIG = ...
Forms
Formalize
Tool #3      Sass & Compass
“GET OFF MY LAWN.” Nathan Smith Creator, 960.gs Big Design Speaker (and Reformed Curmudgeon)
A brief    History of web presentation
In the beginning...
HTML
for layoutHTML + <TABLE>
HTML was invented in 1989
<TABLE> added in 1997
Still rockin after 20 years!
Then came
HTML + CSS
HTML + CSS = Content + Presentation
CSS 1 published in 1996.
No more <FONT> tags.
font styling, color, borders & more!
CSS 2 published in 1998.
Improved selectors
CSS2 selectors         *         E      .class        #id        E F       E > F       E + F   E[attribute]E[attribute=val...
... and even more stuff no browsers     supported until years later.
Which brings us back to...
CSS 3 published in 20__?
“Web 2.0” brought new demands
Round corners
Drop shadows
Gradients
But we already covered that.
Thats the 70+ slide introduction  Titles are the new bullets.
14 years of CSS has basically given us
more selectors + more properties
Until now...
Metaframeworks =high fidelity stylesheets
Metaframeworks output CSS.
Nested rules
Nested rules - selectorstable.users tr td {background: #111}table.users tr td a {color: #333}
Nested rules - selectorstable.users {  tr {    td {       background: #d1d1d;       a {         color: #111;       }    } ...
Nested rules - selectorstable.users {  tr {    td {       color: #111;       &.alt {         color: #333;       }       &:...
Nested rules - properties.users {  font: {    size: 1.2em;    style: italics;    weight: bold;  }}
Syntax options
Syntax options - SCSS   Sassy CSS!table.users {  tr {    td {       background: #d1d1d;       a {         color: #111;    ...
Syntax options - Indented   I   whitespacetable.users  tr     td        background: #d1d1d        a          color: #111
Variables
Variables.user {  background: #333;  border-size: 2px;}.owner {  background: #333;  border-size: 2px;}.admin {  background...
Variables$gray: #333;$default_border: 2px;.user { background: $gray; border-size: $default_border;}.owner { background: $g...
Mixins
Mixins.avatar {  padding: 2px;  border: solid 1px #ddd;  position: absolute;  top: 5px;  left: 5px;}p img {  padding: 2px;...
Mixins@mixin frame($padding_width: 2px, $border_color: #ddd) {  padding: $padding_width;  border: {                       ...
Extend
Mixins.flash {  padding: 5px;  border-width: 1px;  font-weight: bold;}.error {  color: #8a1f11;  background: #fbe3e4;}.not...
Mixins.flash {  padding: 5px;  border-width: 1px;  font-weight: bold;}.error {  @extend .flash;  color: #8a1f11;  backgrou...
Mixins.flash,.error,.notice { padding: 5px; border-width: 1px; font-weight: bold; }.error { color: #8a1f11; background: #f...
Imports
Imports@import url(/css/reset.css)@import url(/css/typography.css)@import url(/css/layout.css)   parent + 3 @imports = 4 H...
Imports@import "reset.scss"          #   _reset.scss@import "typography"          #   _typography.scss@import "layout.css"...
Imports + Mixins Now it gets fun!
A brief detour
“It’s time to abolish all vendor prefixes.They’ve become solutions for which there is noproblem, and they are actively har...
Ummm. Not so fast.
Compass CSS3 mixins@import "compass/css3.scss";.callout {  @include border-radius(5px);  @include linear-gradient("left to...
“Well, reactions to my proposal to abolishvendor prefixes are mixed, and I might haveovershot my target here.”            ...
Solutions?
isnt that just like not having it?beta-new-css8-property-dilly       ...and were back.
Vendor specific stylesheets        Maybe. But Id like to retainInternet Explorers special status unto itself
Hey, funny you should ask! CSS preprocesors
Bring your favorite CSS Framework
A Blueprint example<div id= "wrapper" class="container">  <div id="content" class="span-7 prepend-1">    <div id="main">  ...
A Blueprint example#wrapper {  @include container;  #content {    @include column(7);    @include append(1);    #featured ...
Look, Ma! No math!
Functions
Very. Powerful. Functions.
Sass 2.4 color functionshue(#cc3) => 60degsaturation(#cc3) => 60%lightness(#cc3) => 50%adjust-hue(#cc3, 20deg) => #9c3satu...
with alpha support!Sass color functionsmix(rgba(51, 255, 51, 0.75), #f00) => rgba(178, 95, 19, 0.875)mix(rgba(51, 255, 51,...
Blueprint
Blueprint ★ Buttons             ★ Link Icons ★ Colors              ★ Liquid ★ Debug               ★ Print ★ Fancy Type    ...
CSS3
CSS3 ★ Appearance          ★ Gradient ★ Background Clip     ★ Images ★ Background Origin   ★ Inline Block ★ Background Siz...
Image sprites
I like the Sprite in you   Image sprites                                                                  ®               ...
URL helpers
URL helpers#nav  background: image-url("nav_bg.png") repeat-x top centerDEVELOPMENT#nav {  background: url("/images/nav_bg...
URL helpersstylesheet-url($path)font-url($path)image-url($path)
Stats
Stats|   ---------------------------------   |   -----   |   ----------   |   --------------   |   -----------   |   -----...
Share your patterns
http://brandonmathis.com/projects/fancy-buttons/
@import "fancy-buttons"button,a.button  +fancy-button(#2966a8)
compass-960
Compass 960 $ninesixty-columns: 16 #wrap   +grid-container   #left-nav     +alpha     +grid(5)   #main-content     +grid-p...
Sass & Compass$ gem install sass$ gem install compassCall it from the command line$ sass watch screen.scssCompass-ize your...
compass-wordpress
shameless plugCompass and WordPress$ gem install compass-wordpressCrank out a new Wordpress theme$ compass -r compass-word...
compass-formalize
shameless plug #2Compass and Formalize$ gem install compass_formalize$ compass create my-project -r compass_formalizecompa...
Isn’t she Sassy, folks?GETTHEBOOK.
Save 40% and get early access!           sass40Sadly, sass100 is not a valid code.
DEMOand code spelunking
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Accelerated Stylesheets
Upcoming SlideShare
Loading in...5
×

Accelerated Stylesheets

3,033

Published on

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

No notes for slide

Accelerated Stylesheets

  1. 1. ACCELERATED STYLESHEETS ...or more style with less typing NATHAN SMITH WYNN NETHERLAND
  2. 2. CSS3 is BIG
  3. 3. Hot New properties
  4. 4. border-radius
  5. 5. border-image
  6. 6. www.zurb.com/playground/awesome-overlays
  7. 7. background-size
  8. 8. gradients
  9. 9. RGBA, HSL, HSLA colorsrgba (0,0,0,1) is the new black!
  10. 10. text-shadow
  11. 11. box-shadow
  12. 12. wordwrap
  13. 13. outline
  14. 14. columns
  15. 15. @font-face meansTypographic freedom!
  16. 16. Cool New selectors
  17. 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. 18. WE  CSS
  19. 19. This is not a talk about CSS.
  20. 20. We think you write too much CSS.
  21. 21. You have an ADDICTION.
  22. 22.
  23. 23.
  24. 24. ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘
  25. 25. It’s time to ⎋.
  26. 26. “Design web systems, not justweb pages or web sites.” — Todd Nienkerk aka @toddross co-founder, FourKitchens.com
  27. 27. We want to talk about REAL stylesheet innovation
  28. 28. We want to talk about HOW we write stylesheets
  29. 29. We want to talk about how we MAINTAIN stylesheets
  30. 30. We want to talk about how we SIMPLIFY stylesheets
  31. 31. We want to talk about when OLD SCHOOL beats the NEW SHINY
  32. 32. Tool #1 CSS Frameworks
  33. 33. Rapidly prototype your layouts
  34. 34. Examples:
  35. 35. Percentage-based grid, screenshot in Firefox 4.0http://host.sonspring.com/yui3_grid
  36. 36. Understand the underlying CSS Tools. Not crutches.
  37. 37. Tool #2 JavaScript
  38. 38. JavaScript? You mean like jQuery?
  39. 39. What’s JavaScript got to do with CSS?
  40. 40. Mobile
  41. 41. Responsive Design & Media Queries
  42. 42. Adapt.js
  43. 43. Adapt.js - Serve 960’s (or any) CSS dynamically http://adapt.960.gs
  44. 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. 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. 46. Forms
  47. 47. Formalize
  48. 48. Tool #3 Sass & Compass
  49. 49. “GET OFF MY LAWN.” Nathan Smith Creator, 960.gs Big Design Speaker (and Reformed Curmudgeon)
  50. 50. A brief History of web presentation
  51. 51. In the beginning...
  52. 52. HTML
  53. 53. for layoutHTML + <TABLE>
  54. 54. HTML was invented in 1989
  55. 55. <TABLE> added in 1997
  56. 56. Still rockin after 20 years!
  57. 57. Then came
  58. 58. HTML + CSS
  59. 59. HTML + CSS = Content + Presentation
  60. 60. CSS 1 published in 1996.
  61. 61. No more <FONT> tags.
  62. 62. font styling, color, borders & more!
  63. 63. CSS 2 published in 1998.
  64. 64. Improved selectors
  65. 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. 66. ... and even more stuff no browsers supported until years later.
  67. 67. Which brings us back to...
  68. 68. CSS 3 published in 20__?
  69. 69. “Web 2.0” brought new demands
  70. 70. Round corners
  71. 71. Drop shadows
  72. 72. Gradients
  73. 73. But we already covered that.
  74. 74. Thats the 70+ slide introduction Titles are the new bullets.
  75. 75. 14 years of CSS has basically given us
  76. 76. more selectors + more properties
  77. 77. Until now...
  78. 78. Metaframeworks =high fidelity stylesheets
  79. 79. Metaframeworks output CSS.
  80. 80. Nested rules
  81. 81. Nested rules - selectorstable.users tr td {background: #111}table.users tr td a {color: #333}
  82. 82. Nested rules - selectorstable.users { tr { td { background: #d1d1d; a { color: #111; } } }}
  83. 83. Nested rules - selectorstable.users { tr { td { color: #111; &.alt { color: #333; } &:hover { color: #666; } } }}
  84. 84. Nested rules - properties.users { font: { size: 1.2em; style: italics; weight: bold; }}
  85. 85. Syntax options
  86. 86. Syntax options - SCSS Sassy CSS!table.users { tr { td { background: #d1d1d; a { color: #111; } } }}
  87. 87. Syntax options - Indented I whitespacetable.users tr td background: #d1d1d a color: #111
  88. 88. Variables
  89. 89. Variables.user { background: #333; border-size: 2px;}.owner { background: #333; border-size: 2px;}.admin { background: #666; border-size: 4px;}
  90. 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. 91. Mixins
  92. 92. Mixins.avatar { padding: 2px; border: solid 1px #ddd; position: absolute; top: 5px; left: 5px;}p img { padding: 2px; border: solid 1px #ddd;}
  93. 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. 94. Extend
  95. 95. Mixins.flash { padding: 5px; border-width: 1px; font-weight: bold;}.error { color: #8a1f11; background: #fbe3e4;}.notice { color: #514721; background: #fff6bf;}
  96. 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. 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. 98. Imports
  99. 99. Imports@import url(/css/reset.css)@import url(/css/typography.css)@import url(/css/layout.css) parent + 3 @imports = 4 HTTP requests
  100. 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. 101. Imports + Mixins Now it gets fun!
  102. 102. A brief detour
  103. 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. 104. Ummm. Not so fast.
  105. 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. 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. 107. Solutions?
  108. 108. isnt that just like not having it?beta-new-css8-property-dilly ...and were back.
  109. 109. Vendor specific stylesheets Maybe. But Id like to retainInternet Explorers special status unto itself
  110. 110. Hey, funny you should ask! CSS preprocesors
  111. 111. Bring your favorite CSS Framework
  112. 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. 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. 114. Look, Ma! No math!
  115. 115. Functions
  116. 116. Very. Powerful. Functions.
  117. 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. 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. 119. Blueprint
  120. 120. Blueprint ★ Buttons ★ Link Icons ★ Colors ★ Liquid ★ Debug ★ Print ★ Fancy Type ★ Reset ★ Form ★ Rtl ★ Grid ★ Scaffolding ★ Interaction ★ Typography ★ Internet Explorer ★ Utilities
  121. 121. CSS3
  122. 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. 123. Image sprites
  124. 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. 125. URL helpers
  126. 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. 127. URL helpersstylesheet-url($path)font-url($path)image-url($path)
  128. 128. Stats
  129. 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. 130. Share your patterns
  131. 131. http://brandonmathis.com/projects/fancy-buttons/
  132. 132. @import "fancy-buttons"button,a.button +fancy-button(#2966a8)
  133. 133. compass-960
  134. 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. 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. 136. compass-wordpress
  137. 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. 138. compass-formalize
  139. 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. 140. Isn’t she Sassy, folks?GETTHEBOOK.
  141. 141. Save 40% and get early access! sass40Sadly, sass100 is not a valid code.
  142. 142. DEMOand code spelunking
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×