SlideShare ist ein Scribd-Unternehmen logo
1 von 147
Downloaden Sie, um offline zu lesen
ACCELERATED STYLESHEETS
        ...or more style with less typing




                          NATHAN SMITH
                           WYNN NETHERLAND
CSS3 is   BIG
Hot
      New properties
border-radius
border-image
www.zurb.com/playground/awesome-overlays
background-size
gradients
RGBA, HSL, HSLA colors

rgba (0,0,0,1) is the new black!
text-shadow
box-shadow
word
wrap
outline
columns
@font-face
       means

Typographic freedom!
Cool
       New selectors
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
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 just
web pages or web sites.”
         — Todd Nienkerk aka @toddross
           co-founder, FourKitchens.com
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.0
http://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 = {
          // 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>
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>
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 layout

HTML + <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=value]
E[attribute|=value]
   :first-child
       :link
     :visited
      :lang()
      :before
     ::before
      :after
      ::after
   :first-letter
    :first-line
... 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.
That's 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 - selectors
table.users tr td {background: #111}

table.users tr td a {color: #333}
Nested rules - selectors
table.users {
  tr {
    td {
       background: #d1d1d;
       a {
         color: #111;
       }
    }
  }
}
Nested rules - selectors
table.users {
  tr {
    td {
       color: #111;
       &.alt {
         color: #333;
       }
       &:hover {
         color: #666;
       }
    }
  }
}
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   whitespace


table.users
  tr
     td
        background: #d1d1d
        a
          color: #111
Variables
Variables
.user {
  background: #333;
  border-size: 2px;
}

.owner {
  background: #333;
  border-size: 2px;
}

.admin {
  background: #666;
  border-size: 4px;
}
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;
}
Mixins
Mixins
.avatar {
  padding: 2px;
  border: solid 1px #ddd;
  position: absolute;
  top: 5px;
  left: 5px;
}

p img {
  padding: 2px;
  border: solid 1px #ddd;
}
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);}
Extend
Mixins
.flash {
  padding: 5px;
  border-width: 1px;
  font-weight: bold;
}

.error {
  color: #8a1f11;
  background: #fbe3e4;
}

.notice {
  color: #514721;
  background: #fff6bf;
}
Mixins
.flash {
  padding: 5px;
  border-width: 1px;
  font-weight: bold;
}

.error {
  @extend .flash;
  color: #8a1f11;
  background: #fbe3e4;
}

.notice {
  @extend .flash;
  color: #514721;
  background: #fff6bf;
}
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
Imports
Imports
@import url(/css/reset.css)
@import url(/css/typography.css)
@import url(/css/layout.css)


   parent + 3 @imports = 4 HTTP requests
Imports
@import "reset.scss"          #   _reset.scss
@import "typography"          #   _typography.scss
@import "layout.css"          #   url(layout.css)


          Included at compile time -
             just one http request
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 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
Ummm. Not so fast.
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));
}
“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
Solutions?
isn't that just like not having it?

beta-new-css8-property-dilly

       ...and we're back.
Vendor specific stylesheets

        Maybe. But I'd like to retain
Internet Explorer's 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">

                                                           / Yay?
       ...
    </div>                                            boo?
    <div id="featured" class="span-5 last">
       ...
    </div>
    </div>
    <div id="sidebar" class="span-3 append-1 last">
       ...
    </div>
  </div>
</div>
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);
  }
}
Look, Ma! No math!
Functions
Very. Powerful. Functions.
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
with alpha support!
Sass 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
Blueprint
Blueprint
 ★ Buttons             ★ Link Icons
 ★ Colors              ★ Liquid
 ★ Debug               ★ Print
 ★ Fancy Type          ★ Reset
 ★ Form                ★ Rtl
 ★ Grid                ★ Scaffolding
 ★ Interaction         ★ Typography
 ★ Internet Explorer   ★ Utilities
CSS3
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
Image sprites
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;       }
URL helpers
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;
                                                         v elopment,
                                                 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;
}
URL helpers
stylesheet-url($path)

font-url($path)

image-url($path)
Stats
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   |
|   ---------------------------------   |   -----   |   ----------   |   --------------   |   -----------   |   ---------   |   --------------   |
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-prefix(1)
     +grid(10)
     +omega




https://github.com/chriseppstein/compass-960-plugin
Sass & Compass
$ 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
compass-wordpress
shameless plug
Compass and WordPress
$ 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-formalize
shameless plug #2
Compass and Formalize
$ gem install compass_formalize

$ compass create my-project -r compass_formalize



compass install formalize/dojo

compass install formalize/extjs

compass install formalize/jquery
                                         And one of these
compass install formalize/mootools

compass install formalize/prototype

compass install formalize/yui
Isn’t she Sassy, folks?




GET
THE
BOOK.
Save 40% and get early access!


           sass40

Sadly, sass100 is not a valid code.
DEMO
and code spelunking
Accelerated Stylesheets

Weitere ähnliche Inhalte

Was ist angesagt?

Raleigh Web Design Meetup Group - Sass Presentation
Raleigh Web Design Meetup Group - Sass PresentationRaleigh Web Design Meetup Group - Sass Presentation
Raleigh Web Design Meetup Group - Sass PresentationDaniel Yuschick
 
Shortcodes In-Depth
Shortcodes In-DepthShortcodes In-Depth
Shortcodes In-DepthMicah Wood
 
Date difference[1]
Date difference[1]Date difference[1]
Date difference[1]shafiullas
 
Your own (little) gem: building an online business with Ruby
Your own (little) gem: building an online business with RubyYour own (little) gem: building an online business with Ruby
Your own (little) gem: building an online business with RubyLindsay Holmwood
 
Ruby on Rails 3.1: Let's bring the fun back into web programing
Ruby on Rails 3.1: Let's bring the fun back into web programingRuby on Rails 3.1: Let's bring the fun back into web programing
Ruby on Rails 3.1: Let's bring the fun back into web programingBozhidar Batsov
 
SASS is more than LESS
SASS is more than LESSSASS is more than LESS
SASS is more than LESSItai Koren
 
LessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG MeetingLessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG MeetingMyles Braithwaite
 
Advanced Technology for Web Application Design
Advanced Technology for Web Application DesignAdvanced Technology for Web Application Design
Advanced Technology for Web Application DesignBryce Kerley
 
Theme Kickstart
Theme KickstartTheme Kickstart
Theme KickstartPeter
 
Get Soaked - An In Depth Look At PHP Streams
Get Soaked - An In Depth Look At PHP StreamsGet Soaked - An In Depth Look At PHP Streams
Get Soaked - An In Depth Look At PHP StreamsDavey Shafik
 
DBIx::Skinnyと仲間たち
DBIx::Skinnyと仲間たちDBIx::Skinnyと仲間たち
DBIx::Skinnyと仲間たちRyo Miyake
 
Good Evils In Perl
Good Evils In PerlGood Evils In Perl
Good Evils In PerlKang-min Liu
 
LESS(CSS preprocessor)
LESS(CSS preprocessor)LESS(CSS preprocessor)
LESS(CSS preprocessor)VIPIN KUMAR
 
Refactor like a boss
Refactor like a bossRefactor like a boss
Refactor like a bossgsterndale
 
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassCSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassLucien Lee
 
Work and play with SASS & Compass
Work and play with SASS & CompassWork and play with SASS & Compass
Work and play with SASS & CompassAndreas Dantz
 
Ruby - Uma Introdução
Ruby - Uma IntroduçãoRuby - Uma Introdução
Ruby - Uma IntroduçãoÍgor Bonadio
 
Perl.Hacks.On.Vim
Perl.Hacks.On.VimPerl.Hacks.On.Vim
Perl.Hacks.On.VimLin Yo-An
 

Was ist angesagt? (20)

Raleigh Web Design Meetup Group - Sass Presentation
Raleigh Web Design Meetup Group - Sass PresentationRaleigh Web Design Meetup Group - Sass Presentation
Raleigh Web Design Meetup Group - Sass Presentation
 
Shortcodes In-Depth
Shortcodes In-DepthShortcodes In-Depth
Shortcodes In-Depth
 
Date difference[1]
Date difference[1]Date difference[1]
Date difference[1]
 
Your own (little) gem: building an online business with Ruby
Your own (little) gem: building an online business with RubyYour own (little) gem: building an online business with Ruby
Your own (little) gem: building an online business with Ruby
 
Ruby on Rails 3.1: Let's bring the fun back into web programing
Ruby on Rails 3.1: Let's bring the fun back into web programingRuby on Rails 3.1: Let's bring the fun back into web programing
Ruby on Rails 3.1: Let's bring the fun back into web programing
 
SASS is more than LESS
SASS is more than LESSSASS is more than LESS
SASS is more than LESS
 
LessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG MeetingLessCSS Presentation @ April 2015 GTALUG Meeting
LessCSS Presentation @ April 2015 GTALUG Meeting
 
CSS Grid Layout
CSS Grid LayoutCSS Grid Layout
CSS Grid Layout
 
Advanced Technology for Web Application Design
Advanced Technology for Web Application DesignAdvanced Technology for Web Application Design
Advanced Technology for Web Application Design
 
Theme Kickstart
Theme KickstartTheme Kickstart
Theme Kickstart
 
Get Soaked - An In Depth Look At PHP Streams
Get Soaked - An In Depth Look At PHP StreamsGet Soaked - An In Depth Look At PHP Streams
Get Soaked - An In Depth Look At PHP Streams
 
DBIx::Skinnyと仲間たち
DBIx::Skinnyと仲間たちDBIx::Skinnyと仲間たち
DBIx::Skinnyと仲間たち
 
Good Evils In Perl
Good Evils In PerlGood Evils In Perl
Good Evils In Perl
 
LESS(CSS preprocessor)
LESS(CSS preprocessor)LESS(CSS preprocessor)
LESS(CSS preprocessor)
 
Refactor like a boss
Refactor like a bossRefactor like a boss
Refactor like a boss
 
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassCSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & Compass
 
Work and play with SASS & Compass
Work and play with SASS & CompassWork and play with SASS & Compass
Work and play with SASS & Compass
 
LESS
LESSLESS
LESS
 
Ruby - Uma Introdução
Ruby - Uma IntroduçãoRuby - Uma Introdução
Ruby - Uma Introdução
 
Perl.Hacks.On.Vim
Perl.Hacks.On.VimPerl.Hacks.On.Vim
Perl.Hacks.On.Vim
 

Ähnlich wie Accelerated Stylesheets

Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive NewsMobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive NewsKaelig Deloumeau-Prigent
 
Preprocessor presentation
Preprocessor presentationPreprocessor presentation
Preprocessor presentationMario Noble
 
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)emrox
 
CSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and ConsCSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and ConsSanjoy Kr. Paul
 
Doing More With Less
Doing More With LessDoing More With Less
Doing More With LessDavid Engel
 
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)Adam Darowski
 
Write LESS. DO more.
Write LESS. DO more.Write LESS. DO more.
Write LESS. DO more.Eugene Nor
 
Sass and Compass - Getting Started
Sass and Compass - Getting StartedSass and Compass - Getting Started
Sass and Compass - Getting Startededgincvg
 
Keep calm and let's play CSS3
Keep calm and let's play CSS3Keep calm and let's play CSS3
Keep calm and let's play CSS3A2 Comunicação
 
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and CompassBringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and CompassClaudina Sarahe
 
Refresh Tallahassee: The RE/MAX Front End Story
Refresh Tallahassee: The RE/MAX Front End StoryRefresh Tallahassee: The RE/MAX Front End Story
Refresh Tallahassee: The RE/MAX Front End StoryRachael L Moore
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid PrototypingEven Wu
 
Fasten RWD Development with Sass
Fasten RWD Development with SassFasten RWD Development with Sass
Fasten RWD Development with SassSven Wolfermann
 
Wrangling the CSS Beast with Sass
Wrangling the CSS Beast  with SassWrangling the CSS Beast  with Sass
Wrangling the CSS Beast with SassRob Friesel
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockMarco Pinheiro
 
Agile CSS development with Compass and Sass
Agile CSS development with Compass and SassAgile CSS development with Compass and Sass
Agile CSS development with Compass and SassAndrea Verlicchi
 

Ähnlich wie Accelerated Stylesheets (20)

Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive NewsMobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
 
Preprocessor presentation
Preprocessor presentationPreprocessor presentation
Preprocessor presentation
 
CSS Extenders
CSS ExtendersCSS Extenders
CSS Extenders
 
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)
 
CSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and ConsCSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and Cons
 
Doing More With Less
Doing More With LessDoing More With Less
Doing More With Less
 
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
 
Write LESS. DO more.
Write LESS. DO more.Write LESS. DO more.
Write LESS. DO more.
 
Theming and Sass
Theming and SassTheming and Sass
Theming and Sass
 
Sass and Compass - Getting Started
Sass and Compass - Getting StartedSass and Compass - Getting Started
Sass and Compass - Getting Started
 
Keep calm and let's play CSS3
Keep calm and let's play CSS3Keep calm and let's play CSS3
Keep calm and let's play CSS3
 
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and CompassBringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
 
Refresh Tallahassee: The RE/MAX Front End Story
Refresh Tallahassee: The RE/MAX Front End StoryRefresh Tallahassee: The RE/MAX Front End Story
Refresh Tallahassee: The RE/MAX Front End Story
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid Prototyping
 
Fasten RWD Development with Sass
Fasten RWD Development with SassFasten RWD Development with Sass
Fasten RWD Development with Sass
 
Sass compass
Sass compassSass compass
Sass compass
 
Wrangling the CSS Beast with Sass
Wrangling the CSS Beast  with SassWrangling the CSS Beast  with Sass
Wrangling the CSS Beast with Sass
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, Greensock
 
Agile CSS development with Compass and Sass
Agile CSS development with Compass and SassAgile CSS development with Compass and Sass
Agile CSS development with Compass and Sass
 
Less css
Less cssLess css
Less css
 

Mehr von Wynn Netherland

Your government is Mashed UP!
Your government is Mashed UP!Your government is Mashed UP!
Your government is Mashed UP!Wynn Netherland
 
America, your congress is Mashed UP!
America, your congress is Mashed UP!America, your congress is Mashed UP!
America, your congress is Mashed UP!Wynn Netherland
 
CSS Metaframeworks: King of all @media
CSS Metaframeworks: King of all @mediaCSS Metaframeworks: King of all @media
CSS Metaframeworks: King of all @mediaWynn Netherland
 
Hands on with Ruby & MongoDB
Hands on with Ruby & MongoDBHands on with Ruby & MongoDB
Hands on with Ruby & MongoDBWynn Netherland
 
MongoDB - Ruby document store that doesn't rhyme with ouch
MongoDB - Ruby document store that doesn't rhyme with ouchMongoDB - Ruby document store that doesn't rhyme with ouch
MongoDB - Ruby document store that doesn't rhyme with ouchWynn Netherland
 
Build An App Start A Movement
Build An App Start A MovementBuild An App Start A Movement
Build An App Start A MovementWynn Netherland
 
Javascript And Ruby Frameworks
Javascript And Ruby FrameworksJavascript And Ruby Frameworks
Javascript And Ruby FrameworksWynn Netherland
 
Free(ish) Tools For Virtual Teams
Free(ish) Tools For Virtual TeamsFree(ish) Tools For Virtual Teams
Free(ish) Tools For Virtual TeamsWynn Netherland
 

Mehr von Wynn Netherland (9)

Your government is Mashed UP!
Your government is Mashed UP!Your government is Mashed UP!
Your government is Mashed UP!
 
MongoDB is the MashupDB
MongoDB is the MashupDBMongoDB is the MashupDB
MongoDB is the MashupDB
 
America, your congress is Mashed UP!
America, your congress is Mashed UP!America, your congress is Mashed UP!
America, your congress is Mashed UP!
 
CSS Metaframeworks: King of all @media
CSS Metaframeworks: King of all @mediaCSS Metaframeworks: King of all @media
CSS Metaframeworks: King of all @media
 
Hands on with Ruby & MongoDB
Hands on with Ruby & MongoDBHands on with Ruby & MongoDB
Hands on with Ruby & MongoDB
 
MongoDB - Ruby document store that doesn't rhyme with ouch
MongoDB - Ruby document store that doesn't rhyme with ouchMongoDB - Ruby document store that doesn't rhyme with ouch
MongoDB - Ruby document store that doesn't rhyme with ouch
 
Build An App Start A Movement
Build An App Start A MovementBuild An App Start A Movement
Build An App Start A Movement
 
Javascript And Ruby Frameworks
Javascript And Ruby FrameworksJavascript And Ruby Frameworks
Javascript And Ruby Frameworks
 
Free(ish) Tools For Virtual Teams
Free(ish) Tools For Virtual TeamsFree(ish) Tools For Virtual Teams
Free(ish) Tools For Virtual Teams
 

Kürzlich hochgeladen

Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demoHarshalMandlekar2
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 

Kürzlich hochgeladen (20)

Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 

Accelerated Stylesheets

  • 1. ACCELERATED STYLESHEETS ...or more style with less typing NATHAN SMITH WYNN NETHERLAND
  • 2. CSS3 is BIG
  • 3. Hot New properties
  • 9. RGBA, HSL, HSLA colors rgba (0,0,0,1) is the new black!
  • 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
  • 19. This is not a talk about CSS.
  • 20. We think you write too much CSS.
  • 21. You have an ADDICTION.
  • 22.
  • 23.
  • 24. ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘
  • 26. “Design web systems, not just web 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
  • 35.
  • 36.
  • 37. Percentage-based grid, screenshot in Firefox 4.0 http://host.sonspring.com/yui3_grid
  • 38. Understand the underlying CSS Tools. Not crutches.
  • 39. Tool #2 JavaScript
  • 40. JavaScript? You mean like jQuery?
  • 41. What’s JavaScript got to do with CSS?
  • 43. Responsive Design & Media Queries
  • 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
  • 50.
  • 51. Tool #3 Sass & Compass
  • 52. “GET OFF MY LAWN.” Nathan Smith Creator, 960.gs Big Design Speaker (and Reformed Curmudgeon)
  • 53. A brief History of web presentation
  • 55. HTML
  • 56. for layout HTML + <TABLE>
  • 57. HTML was invented in 1989
  • 59. Still rockin' after 20 years!
  • 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.
  • 68. 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
  • 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
  • 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
  • 84. Nested rules - selectors table.users tr td {background: #111} table.users tr td a {color: #333}
  • 85. Nested rules - selectors table.users { tr { td { background: #d1d1d; a { color: #111; } } } }
  • 86. Nested rules - selectors table.users { tr { td { color: #111; &.alt { color: #333; } &:hover { color: #666; } } } }
  • 87. Nested rules - properties .users { font: { size: 1.2em; style: italics; weight: bold; } }
  • 89. Syntax options - SCSS Sassy CSS! table.users { tr { td { background: #d1d1d; a { color: #111; } } } }
  • 90. Syntax options - Indented I whitespace table.users tr td background: #d1d1d a color: #111
  • 92. Variables .user { background: #333; border-size: 2px; } .owner { background: #333; border-size: 2px; } .admin { background: #666; border-size: 4px; }
  • 93. 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; }
  • 95. Mixins .avatar { padding: 2px; border: solid 1px #ddd; position: absolute; top: 5px; left: 5px; } p img { padding: 2px; border: solid 1px #ddd; }
  • 96. 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);}
  • 98. Mixins .flash { padding: 5px; border-width: 1px; font-weight: bold; } .error { color: #8a1f11; background: #fbe3e4; } .notice { color: #514721; background: #fff6bf; }
  • 99. Mixins .flash { padding: 5px; border-width: 1px; font-weight: bold; } .error { @extend .flash; color: #8a1f11; background: #fbe3e4; } .notice { @extend .flash; color: #514721; background: #fff6bf; }
  • 100. 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
  • 102. Imports @import url(/css/reset.css) @import url(/css/typography.css) @import url(/css/layout.css) parent + 3 @imports = 4 HTTP requests
  • 103. Imports @import "reset.scss" # _reset.scss @import "typography" # _typography.scss @import "layout.css" # url(layout.css) Included at compile time - just one http request
  • 104. Imports + Mixins Now it gets fun!
  • 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
  • 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
  • 114. Bring your favorite CSS Framework
  • 115. 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>
  • 116. 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); } }
  • 117. Look, Ma! No math!
  • 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 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.
  • 124. Blueprint ★ Buttons ★ Link Icons ★ Colors ★ Liquid ★ Debug ★ Print ★ Fancy Type ★ Reset ★ Form ★ Rtl ★ Grid ★ Scaffolding ★ Interaction ★ Typography ★ Internet Explorer ★ Utilities
  • 125. CSS3
  • 126. 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
  • 128. 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; }
  • 130. 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; v elopment, 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; }
  • 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 | | --------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- |
  • 136. @import "fancy-buttons" button, a.button +fancy-button(#2966a8)
  • 138. Compass 960 $ninesixty-columns: 16 #wrap +grid-container #left-nav +alpha +grid(5) #main-content +grid-prefix(1) +grid(10) +omega https://github.com/chriseppstein/compass-960-plugin
  • 139. Sass & Compass $ 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
  • 141. shameless plug Compass and WordPress $ 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
  • 143. shameless plug #2 Compass and Formalize $ gem install compass_formalize $ compass create my-project -r compass_formalize compass install formalize/dojo compass install formalize/extjs compass install formalize/jquery And one of these compass install formalize/mootools compass install formalize/prototype compass install formalize/yui
  • 144. Isn’t she Sassy, folks? GET THE BOOK.
  • 145. Save 40% and get early access! sass40 Sadly, sass100 is not a valid code.