meta
                              ^
                   CSS FRAMEWORKS: KING OF ALL @media
                               ...
before we start




Wednesday, February 3, 2010
We need to know about your cool projects!




       http://thechangelog.com        @changelogshow


Wednesday, February 3...
Your project could end up here!




Wednesday, February 3, 2010
thanks!




Wednesday, February 3, 2010
Have you heard?

                               CSS3 is big



Wednesday, February 3, 2010
Hot
                                    New properties



Wednesday, February 3, 2010
border-radius



Wednesday, February 3, 2010
border-image



Wednesday, February 3, 2010
background-size



Wednesday, February 3, 2010
gradients



Wednesday, February 3, 2010
RGBA, HSL, HSLA colors

                       rgba (0,0,0,1) is the new black!



Wednesday, February 3, 2010
text-shadow



Wednesday, February 3, 2010
box-shadow



Wednesday, February 3, 2010
word
                              wrap



Wednesday, February 3, 2010
outline



Wednesday, February 3, 2010
columns



Wednesday, February 3, 2010
@font-face
                                     means

                              Typographic freedom!

Wednesday, Febr...
Cool
                                     New selectors



Wednesday, February 3, 2010
CSS3 selectors (and some golden oldies)
                           *               ::first-letter                   :enabl...
Some smash hits from the design blogs




Wednesday, February 3, 2010
30 tips for SemanticTM markup and classes




Wednesday, February 3, 2010
101 CSS resets



Wednesday, February 3, 2010
40 Grid layouts you must see



Wednesday, February 3, 2010
7 UP-lifting reasons to use
                                      CSS Sprites



Wednesday, February 3, 2010
Have the <TABLE>'s turned?



Wednesday, February 3, 2010
30 sites for great typography



Wednesday, February 3, 2010
RT @linkbait: Effortless drop shadows,
                            gradients, and rounded corners




Wednesday, February ...
But this is not a talk about CSS
                      Follow @smashingmag for your CSS tips & tricks




Wednesday, Febru...
I want to talk about

                              REAL stylesheet innovation



Wednesday, February 3, 2010
I want to talk about

                              HOW we write stylesheets



Wednesday, February 3, 2010
I want to talk about

                          how we MAINTAIN stylesheets



Wednesday, February 3, 2010
I want to talk about

                              how we SIMPLIFY stylesheets



Wednesday, February 3, 2010
A brief

                                 History of radio



Wednesday, February 3, 2010
In the beginning...



Wednesday, February 3, 2010
AM



Wednesday, February 3, 2010
AM = Amplitude Modulation



Wednesday, February 3, 2010
Invented in 1906



Wednesday, February 3, 2010
Dominant format until 1978



Wednesday, February 3, 2010
Still rockin' after 100 years!



Wednesday, February 3, 2010
Then came



Wednesday, February 3, 2010
FM



Wednesday, February 3, 2010
FM = Frequency Modulation



Wednesday, February 3, 2010
Does not suffer
                   susceptibility to atmospheric and
                        electrical interference.

Wed...
Patented in 1933.
               Approved in 1941.
               Standardized in 1961.
               World domination in...
Until...



Wednesday, February 3, 2010
XM



Wednesday, February 3, 2010
Hey, it w
                                                as t h e 9 0
                                                   ...
Founded in 1988.
               Launched in 2001.
               Merged with Sirius in 2009.


Wednesday, February 3, 2010
Superior sound.



Wednesday, February 3, 2010
No commercials.



Wednesday, February 3, 2010
Listen to Kasem's Top 40
                                 from coast to coast.



Wednesday, February 3, 2010
What the heck does this have to do
                                  with stylesheets, anyway?




Wednesday, February 3, ...
I see some parallels.




Wednesday, February 3, 2010
A brief

                              History of web presentation



Wednesday, February 3, 2010
In the beginning...



Wednesday, February 3, 2010
HTML



Wednesday, February 3, 2010
for layout

                              HTML + <TABLE>



Wednesday, February 3, 2010
Invented in 1989



Wednesday, February 3, 2010
<TABLE> added in 1997



Wednesday, February 3, 2010
Still rockin' after 20 years!



Wednesday, February 3, 2010
Then came



Wednesday, February 3, 2010
HTML + CSS



Wednesday, February 3, 2010
HTML + CSS = Content + Presentation



Wednesday, February 3, 2010
CSS 1 published in 1996.



Wednesday, February 3, 2010
No more <FONT> tags.



Wednesday, February 3, 2010
font styling, color, borders & more!



Wednesday, February 3, 2010
CSS 2 published in 1998.



Wednesday, February 3, 2010
Improved selectors



Wednesday, February 3, 2010
CSS2 selectors
                          *
                          E
                       .class
                     ...
... and even more stuff no browsers
                     supported until years later.



Wednesday, February 3, 2010
Which brings us back to...



Wednesday, February 3, 2010
CSS 3 published in 20??



Wednesday, February 3, 2010
Web 2.0 brought new demands



Wednesday, February 3, 2010
Round corners



Wednesday, February 3, 2010
Drop shadows



Wednesday, February 3, 2010
Gradients



Wednesday, February 3, 2010
But we already covered that.



Wednesday, February 3, 2010
That's the 75 slide introduction



Wednesday, February 3, 2010
14 years of CSS has basically given us




Wednesday, February 3, 2010
more selectors + more properties



Wednesday, February 3, 2010
Until now...



Wednesday, February 3, 2010
Metaframeworks =
                              high fidelity stylesheets



Wednesday, February 3, 2010
Metaframeworks output CSS.



Wednesday, February 3, 2010
Nested rules



Wednesday, February 3, 2010
Nested rules - selectors
        table.users tr td a {color: #111}

        table.users tr.alt td a {color: #333}




Wedn...
Nested rules - selectors
        table.users                Lo  o k , Ma,
          tr                        n o braces
 ...
Nested rules - selectors
        table.users
          tr
             td
                color: #111
                &.al...
Nested rules - properties
        .users
          font:
            size: 1.2em
            style: italics
            we...
Variables



Wednesday, February 3, 2010
Variables
        .user {
          background: #333;
          border-size: 2px;
        }

        .owner {
          ba...
Variables
        !gray = #333
        !default_border = 2px

        .user
          background: = !gray
          border...
Mixins



Wednesday, February 3, 2010
Mixins
        .avatar {
          padding: 2px;
          border: solid 1px #ddd;
          position: absolute;
         ...
Mixins
        =frame(!padding_width = 2px, !border_color = #ddd)
          padding = !padding_width
          border:
   ...
Imports



Wednesday, February 3, 2010
Imports
        @import url(/css/reset.css)
        @import url(/css/typography.css)
        @import url(/css/layout.css)
...
Imports
        @import reset.sass                     #   _reset.sass
        @import typography.sass                #   ...
Imports + Mixins

                                Now it gets fun!




Wednesday, February 3, 2010
Compass CSS3 mixins
        @import compass/css3.sass

        .callout
          +border-radius(5px)
          +linear-gr...
Compass CSS3 mixins
        css3/border_radius.sass
        css3/inline_block.sass
        css3/opacity.sass
        css3/...
Bring your favorite CSS Framework



Wednesday, February 3, 2010
A Blueprint example
        <div id='wrapper' class="container">
            <div id='content' class="span-7 prepend-1">
 ...
A Blueprint example
        @import          blueprint/reset.sass
        @import          partials/base.sass
        @imp...
Functions



Wednesday, February 3, 2010
Very. Powerful. Functions.



Wednesday, February 3, 2010
Sass 2.4 color functions
        hue(#cc3) => 60deg
        saturation(#cc3) => 60%
        lightness(#cc3) => 50%

      ...
Sass 2.4 color functions                 with alpha support!

        mix(rgba(51, 255, 51, 0.75), #f00) => rgba(178, 95, ...
Share your patterns



Wednesday, February 3, 2010
http://brandonmathis.com/projects/fancy-buttons/
Wednesday, February 3, 2010
Image sprites



Wednesday, February 3, 2010
Image sprites
        EXAMPLE 1
        a.twitter
          +sprite-img("icons-32.png", 1)
        a.facebook
          +s...
Who makes this syntactic sugar?



Wednesday, February 3, 2010
Sass and Compass



Wednesday, February 3, 2010
Sass and Compass
        $ sudo gem install haml
        $ sudo gem install compass --pre



        CALL IT FROM THE COMM...
Compass and WordPress                    shameless plug

        $ sudo gem install compass-wordpress

        CRANK OUT A...
LESS



Wednesday, February 3, 2010
Get LESS
        $ sudo gem install less



        CALL IT FROM THE COMMAND LINE
        $ lessc screen.less



        G...
Using LESS - variables
        @the-border: 1px;
        @base-color: #111;

        #header {
          color: @base-colo...
Using LESS - mixins
        .rounded_corners (@radius: 5px) {
          -moz-border-radius: @radius;
          -webkit-bor...
Using LESS - nested rules
        #header {
          color: red;
          a {
            font-weight: bold;
           ...
logo wins
                              best  in show!

                                     }{CSS




Wednesday, February...
Works with PHP



Wednesday, February 3, 2010
So that's another meetup



Wednesday, February 3, 2010
What's the future?



Wednesday, February 3, 2010
First, grow the category



Wednesday, February 3, 2010
Wednesday, February 3, 2010
Hang in there,
     only six more slides!




                              http://www.flickr.com/photos/szacharias/4073373...
Next, recruit some talent



Wednesday, February 3, 2010
Seek designer converts



Wednesday, February 3, 2010
Watch the egos



Wednesday, February 3, 2010
Continue to push the envelope



Wednesday, February 3, 2010
Mind the gap



Wednesday, February 3, 2010
Resources          an d thanks for having me!


                 http://compass-style.org
                 http://sass-lan...
Upcoming SlideShare
Loading in...5
×

CSS Metaframeworks: King of all @media

7,191

Published on

Dallas.rb talk discussing trends in creating CSS stylesheets and the growing lineup of CSS Metaframeworks.

Published in: Design, Technology, Education
2 Comments
45 Likes
Statistics
Notes

  •    Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Video from Vimeo:

    CSS Metaframeworks - King of all @media from Wynn Netherland on Vimeo.<br /><object type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=9348454&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" width="350" height="288"><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=9348454&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1"></param><embed src="http://vimeo.com/moogaloop.swf?clip_id=9348454&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" width="350" height="288" type="application/x-shockwave-flash"></embed></object>
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
7,191
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
263
Comments
2
Likes
45
Embeds 0
No embeds

No notes for slide
  • multikey - automatically index arrays of object values
    ensure index on tags or _keywords
  • CSS Metaframeworks: King of all @media

    1. 1. meta ^ CSS FRAMEWORKS: KING OF ALL @media Dallas.rb February 2, 2010 WYNNNETHERLAND Wednesday, February 3, 2010
    2. 2. before we start Wednesday, February 3, 2010
    3. 3. We need to know about your cool projects! http://thechangelog.com @changelogshow Wednesday, February 3, 2010
    4. 4. Your project could end up here! Wednesday, February 3, 2010
    5. 5. thanks! Wednesday, February 3, 2010
    6. 6. Have you heard? CSS3 is big Wednesday, February 3, 2010
    7. 7. Hot New properties Wednesday, February 3, 2010
    8. 8. border-radius Wednesday, February 3, 2010
    9. 9. border-image Wednesday, February 3, 2010
    10. 10. background-size Wednesday, February 3, 2010
    11. 11. gradients Wednesday, February 3, 2010
    12. 12. RGBA, HSL, HSLA colors rgba (0,0,0,1) is the new black! Wednesday, February 3, 2010
    13. 13. text-shadow Wednesday, February 3, 2010
    14. 14. box-shadow Wednesday, February 3, 2010
    15. 15. word wrap Wednesday, February 3, 2010
    16. 16. outline Wednesday, February 3, 2010
    17. 17. columns Wednesday, February 3, 2010
    18. 18. @font-face means Typographic freedom! Wednesday, February 3, 2010
    19. 19. Cool New selectors Wednesday, February 3, 2010
    20. 20. 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 Wednesday, February 3, 2010
    21. 21. Some smash hits from the design blogs Wednesday, February 3, 2010
    22. 22. 30 tips for SemanticTM markup and classes Wednesday, February 3, 2010
    23. 23. 101 CSS resets Wednesday, February 3, 2010
    24. 24. 40 Grid layouts you must see Wednesday, February 3, 2010
    25. 25. 7 UP-lifting reasons to use CSS Sprites Wednesday, February 3, 2010
    26. 26. Have the <TABLE>'s turned? Wednesday, February 3, 2010
    27. 27. 30 sites for great typography Wednesday, February 3, 2010
    28. 28. RT @linkbait: Effortless drop shadows, gradients, and rounded corners Wednesday, February 3, 2010
    29. 29. But this is not a talk about CSS Follow @smashingmag for your CSS tips & tricks Wednesday, February 3, 2010
    30. 30. I want to talk about REAL stylesheet innovation Wednesday, February 3, 2010
    31. 31. I want to talk about HOW we write stylesheets Wednesday, February 3, 2010
    32. 32. I want to talk about how we MAINTAIN stylesheets Wednesday, February 3, 2010
    33. 33. I want to talk about how we SIMPLIFY stylesheets Wednesday, February 3, 2010
    34. 34. A brief History of radio Wednesday, February 3, 2010
    35. 35. In the beginning... Wednesday, February 3, 2010
    36. 36. AM Wednesday, February 3, 2010
    37. 37. AM = Amplitude Modulation Wednesday, February 3, 2010
    38. 38. Invented in 1906 Wednesday, February 3, 2010
    39. 39. Dominant format until 1978 Wednesday, February 3, 2010
    40. 40. Still rockin' after 100 years! Wednesday, February 3, 2010
    41. 41. Then came Wednesday, February 3, 2010
    42. 42. FM Wednesday, February 3, 2010
    43. 43. FM = Frequency Modulation Wednesday, February 3, 2010
    44. 44. Does not suffer susceptibility to atmospheric and electrical interference. Wednesday, February 3, 2010
    45. 45. Patented in 1933. Approved in 1941. Standardized in 1961. World domination in 1978. Unchallenged for thirty years. Wednesday, February 3, 2010
    46. 46. Until... Wednesday, February 3, 2010
    47. 47. XM Wednesday, February 3, 2010
    48. 48. Hey, it w as t h e 9 0 s, X s w e re in! XM = Beyond FM Wednesday, February 3, 2010
    49. 49. Founded in 1988. Launched in 2001. Merged with Sirius in 2009. Wednesday, February 3, 2010
    50. 50. Superior sound. Wednesday, February 3, 2010
    51. 51. No commercials. Wednesday, February 3, 2010
    52. 52. Listen to Kasem's Top 40 from coast to coast. Wednesday, February 3, 2010
    53. 53. What the heck does this have to do with stylesheets, anyway? Wednesday, February 3, 2010
    54. 54. I see some parallels. Wednesday, February 3, 2010
    55. 55. A brief History of web presentation Wednesday, February 3, 2010
    56. 56. In the beginning... Wednesday, February 3, 2010
    57. 57. HTML Wednesday, February 3, 2010
    58. 58. for layout HTML + <TABLE> Wednesday, February 3, 2010
    59. 59. Invented in 1989 Wednesday, February 3, 2010
    60. 60. <TABLE> added in 1997 Wednesday, February 3, 2010
    61. 61. Still rockin' after 20 years! Wednesday, February 3, 2010
    62. 62. Then came Wednesday, February 3, 2010
    63. 63. HTML + CSS Wednesday, February 3, 2010
    64. 64. HTML + CSS = Content + Presentation Wednesday, February 3, 2010
    65. 65. CSS 1 published in 1996. Wednesday, February 3, 2010
    66. 66. No more <FONT> tags. Wednesday, February 3, 2010
    67. 67. font styling, color, borders & more! Wednesday, February 3, 2010
    68. 68. CSS 2 published in 1998. Wednesday, February 3, 2010
    69. 69. Improved selectors Wednesday, February 3, 2010
    70. 70. 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 Wednesday, February 3, 2010
    71. 71. ... and even more stuff no browsers supported until years later. Wednesday, February 3, 2010
    72. 72. Which brings us back to... Wednesday, February 3, 2010
    73. 73. CSS 3 published in 20?? Wednesday, February 3, 2010
    74. 74. Web 2.0 brought new demands Wednesday, February 3, 2010
    75. 75. Round corners Wednesday, February 3, 2010
    76. 76. Drop shadows Wednesday, February 3, 2010
    77. 77. Gradients Wednesday, February 3, 2010
    78. 78. But we already covered that. Wednesday, February 3, 2010
    79. 79. That's the 75 slide introduction Wednesday, February 3, 2010
    80. 80. 14 years of CSS has basically given us Wednesday, February 3, 2010
    81. 81. more selectors + more properties Wednesday, February 3, 2010
    82. 82. Until now... Wednesday, February 3, 2010
    83. 83. Metaframeworks = high fidelity stylesheets Wednesday, February 3, 2010
    84. 84. Metaframeworks output CSS. Wednesday, February 3, 2010
    85. 85. Nested rules Wednesday, February 3, 2010
    86. 86. Nested rules - selectors table.users tr td a {color: #111} table.users tr.alt td a {color: #333} Wednesday, February 3, 2010
    87. 87. Nested rules - selectors table.users Lo o k , Ma, tr n o braces td a color: #111 or semicolons td.alt a color: #333 But you can use both if you wanna Wednesday, February 3, 2010
    88. 88. Nested rules - selectors table.users tr td color: #111 &.alt color: #333 &:hover color: #666 Wednesday, February 3, 2010
    89. 89. Nested rules - properties .users font: size: 1.2em style: italics weight: bold Wednesday, February 3, 2010
    90. 90. Variables Wednesday, February 3, 2010
    91. 91. Variables .user { background: #333; border-size: 2px; } .owner { background: #333; border-size: 2px; } .admin { background: #666; border-size: 4px; } Wednesday, February 3, 2010
    92. 92. Variables !gray = #333 !default_border = 2px .user background: = !gray border-size: = !default_border .owner r mixing! background: = !gray border-size: = !default_border and colo .admin Ev e n ma t h ! background: = !gray + #333 border-size: = !default_border + 2px Wednesday, February 3, 2010
    93. 93. Mixins Wednesday, February 3, 2010
    94. 94. Mixins .avatar { padding: 2px; border: solid 1px #ddd; position: absolute; top: 5px; left: 5px; } p img { padding: 2px; border: solid 1px #ddd; } Wednesday, February 3, 2010
    95. 95. Mixins =frame(!padding_width = 2px, !border_color = #ddd) padding = !padding_width border: width: 1px defines t he mixin style: solid color = !border_color .avatar +frame position: absolute top: 5px mixes in t h e rule s left: 5px p img +frame(1px, #ccc) Wednesday, February 3, 2010
    96. 96. Imports Wednesday, February 3, 2010
    97. 97. Imports @import url(/css/reset.css) @import url(/css/typography.css) @import url(/css/layout.css) parent + 3 @imports = 4 http requests Wednesday, February 3, 2010
    98. 98. Imports @import reset.sass # _reset.sass @import typography.sass # _typography.sass @import layout.sass # _layout.sass Included at compile time - just one http request Wednesday, February 3, 2010
    99. 99. Imports + Mixins Now it gets fun! Wednesday, February 3, 2010
    100. 100. Compass CSS3 mixins @import compass/css3.sass .callout +border-radius(5px) +linear-gradient("left top", "left bottom", #fff, #ddd) .callout { very different syntax -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)); } Wednesday, February 3, 2010
    101. 101. Compass CSS3 mixins 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 Wednesday, February 3, 2010
    102. 102. Bring your favorite CSS Framework Wednesday, February 3, 2010
    103. 103. 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> Wednesday, February 3, 2010
    104. 104. A Blueprint example @import blueprint/reset.sass @import partials/base.sass @import blueprint @import blueprint/modules/scaffolding.sass #wrapper +container #content +column(7) +append(1) #featured +column(5, true) #sidebar +column(3, true) +prepend(1) Wednesday, February 3, 2010
    105. 105. Functions Wednesday, February 3, 2010
    106. 106. Very. Powerful. Functions. Wednesday, February 3, 2010
    107. 107. 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 Wednesday, February 3, 2010
    108. 108. Sass 2.4 color functions with alpha support! 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 Wednesday, February 3, 2010
    109. 109. Share your patterns Wednesday, February 3, 2010
    110. 110. http://brandonmathis.com/projects/fancy-buttons/ Wednesday, February 3, 2010
    111. 111. Image sprites Wednesday, February 3, 2010
    112. 112. 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) ... Wednesday, February 3, 2010
    113. 113. Who makes this syntactic sugar? Wednesday, February 3, 2010
    114. 114. Sass and Compass Wednesday, February 3, 2010
    115. 115. Sass and Compass $ sudo gem install haml $ sudo gem install compass --pre CALL IT FROM THE COMMAND LINE $ sass screen.sass screen.css OR COMPASS-IZE YOUR PROJECT $ compass --rails -f blueprint OR WATCH A FOLDER $ compass --watch Wednesday, February 3, 2010
    116. 116. Compass and WordPress shameless plug $ 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 Wednesday, February 3, 2010
    117. 117. LESS Wednesday, February 3, 2010
    118. 118. Get LESS $ sudo gem install less CALL IT FROM THE COMMAND LINE $ lessc screen.less GRAB THE RAILS PLUGIN $ script/plugin install git://github.com/cloudhead/more.git Wednesday, February 3, 2010
    119. 119. Using LESS - variables @the-border: 1px; @base-color: #111; #header { color: @base-color * 3; border-left: @the-border; border-right: @the-border * 2; } #footer { color: (@base-color + #111) * 1.5; } Wednesday, February 3, 2010
    120. 120. Using LESS - mixins .rounded_corners (@radius: 5px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } #header { .rounded_corners; } #footer { .rounded_corners(10px); } Wednesday, February 3, 2010
    121. 121. Using LESS - nested rules #header { color: red; a { font-weight: bold; text-decoration: none; } } Wednesday, February 3, 2010
    122. 122. logo wins best in show! }{CSS Wednesday, February 3, 2010
    123. 123. Works with PHP Wednesday, February 3, 2010
    124. 124. So that's another meetup Wednesday, February 3, 2010
    125. 125. What's the future? Wednesday, February 3, 2010
    126. 126. First, grow the category Wednesday, February 3, 2010
    127. 127. Wednesday, February 3, 2010
    128. 128. Hang in there, only six more slides! http://www.flickr.com/photos/szacharias/4073373487/sizes/l/ Wednesday, February 3, 2010
    129. 129. Next, recruit some talent Wednesday, February 3, 2010
    130. 130. Seek designer converts Wednesday, February 3, 2010
    131. 131. Watch the egos Wednesday, February 3, 2010
    132. 132. Continue to push the envelope Wednesday, February 3, 2010
    133. 133. Mind the gap Wednesday, February 3, 2010
    134. 134. Resources an d thanks for having me! http://compass-style.org http://sass-lang.com http://lesscss.org http://xcss.antpaw.org Questions? I'm @pengwynn on Twitter http://wynnnetherland.com the newish blog Wednesday, February 3, 2010
    1. A particular slide catching your eye?

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

    ×