Team Styles
How to develop Cascading Style Sheets for
             use in a team
Nathan Sampimon
   @nathan_scott
Challenges

• Be progressive, without leaving anyone
  behind
• Tackle multiple levels of experience
• Keep it simple
• Al...
Why a team?

• Big apps = multiple developers
• You should be building ready for a
  handover
• Create a solid foundation ...
What do we want to
     deliver?
As little as possible
• Less files
• Minimum amount of http requests
• Styles to target less sophisticated browsers
• Styles to target different ...
What do we want to
   work with?
• More files
• Loads of stylesheets
• Broken up into sections
• Easy to navigate, isolate, extrapolate
• Sheets to target d...
Front-end Developers
•   Like working their own way
•   Often opinionated
•   Not necessarily technical
•   May require guidance
How to we address
      this?
Most important: Talk to them
• Write docs
• Outline rules
• Use comments
• Provide structure
Docs
• Overview of technologies used
• Approach to issues like
  •   Browser targeting
  •   CSS3
  •   @media supported

• Out...
Rules
Outline any general coding rules
• Don’t change base styles
(try rewriting the style with more specific
selectors)
// John

.button {
  background: black;
  color: white;
}

// Peter

html body .button {
  background: grey;
  color: crem...
• Alphabetise properties
(Although I prefer to have styles structured
                       as follows)


                  h1#logo {

     Layout...
Comment anything
ambiguous or unclear
Structure <<
• Rails is easy to navigate, because of
  structure
• Create a solid structure in your app
• Why reinvent the wheel?
Controllers
announcement
s
application
documents
events
parts
user_sessions
Controllers     Views
announcement    announcement
s               s
application     documents
documents       events
even...
Controllers     Views           Stylesheets
announcement    announcement    application
s               s               an...
Controllers     Views           Stylesheets
announcement    announcement    application
s               s               an...
All partials feed into 1 stylesheet

Only 1 stylesheet gets sent to browser
stylesheets/
               styles.css
               partials/
                        _application.css
                 ...
Target media
@media
<LINK REL="stylesheet" TYPE="text/css"
         MEDIA="print, handheld" HREF="foo.css">


@media screen {
  body {
...
@media

• all        • handheld     • screen
• braille    • print        • speech
• embossed   • projection   • tty
@media
     @media (max-width: 600px)
     {
    ...
}

@media (max-width: 400px) {
  ...
}

@media (min-width: 1300px) {
Naming Conventions
   application.css
   application.print.css
   announcements.css
   documents.css
   events.css
   layo...
Extrapolate to suit
   application/reset.css
   application/fonts.css
   application.css
   application.print.css
   annou...
Target browsers
1 sheet for each IE version
1 sheet for every other browser
= stylesheet_link_tag 'screen', :media => 'screen'
= stylesheet_link_tag 'print', :media => 'print'

/[if lte IE9]
  = sty...
IE Sheets are generally quite small, no
           need for partials
Use less hacks
and more tact
Use this:    # application.css
             li {
                margin: 5px;
             }
             # ie.css
       ...
Quick side note
CSS Resets
To take browser subjectivity out of the equation
Front end developers tend to be
           particular

     Stick to the big ones
• Yahoo! YUI Reset
• Eric Meyer
• Use as a base
• Customise to suit project (cascaded)
screen.css   application/reset.css
             application/fonts.css
print.css    application.css
             applicatio...
@import
screen.css       application/reset.css
                 application/fonts.css
print.css        application.css
   ...
/* screen.css */

@import   "partials/application.css";
@import   "partials/announcements.css";
@import   "partials/docume...
Too many http requests
# app/views/layouts/application.html.erb

<%= stylesheet_link_tag "application/reset",

 "application",

 "announcements",...
Development
# when ActionController::Base.perform_caching is false =>

<link href="/stylesheets/application/reset.css" med...
Production

# when ActionController::Base.perform_caching is true =>

<link href="/stylesheets/application/screen.css" med...
Problems with CSS
CSS History

CSS1            CSS2
1996            2005   2010
W3C move slowly
“14 years of CSS has
 basically given us...”
“more selectors
       +
more properties”

           - Wynn Netherland
Enter meta-frameworks
• Increase productivity
• Limit damage (they compile!)
• Progressive
CSS
table.events {
  margin: 14px 0 7px;
}
table.events td {
  background: #ccc;
}
table.events td h4 {
  margin-top: 6px;...
LESS CSS
@silver: #ccc;
@red: #f00;

table.events {
 margin: 14px 0 7px;
 td {
   background: @silver;
   h4 {
     margin...
SCSS
$silver: #ccc;
$red: #f00;

table.events {
 margin: 14px 0 7px;
 td {
   background: $silver;
   h4 {
     margin-top...
SASS
$silver: #ccc
$red: #f00

table.events
 margin: 14px 0 7px
 td
   background: $silver
   h4
     margin-top: 6px
    ...
SASS vs SCSS/LESS
•   SASS is a language        •   SCSS/LESS act like
                                  extensions of CSS...
SCSS
$silver: #ccc;
$red: #f00;

table.events {
 margin: 14px 0 7px;
 td {
   background: $silver;
   h4 {
     margin-top...
Compiles to CSS
Benefits of SCSS for
      teams
Variables
$silver: #ccc;
$red: #f00;

a { color: $red; }
small { color: $silver; }
• Front-end developers can set colours to be
  used throughout all styles

• Let guess-work when introducing colours
• DRY...
Define all colour, size and
    grid variables in
    application.scss
# application.scss

$max_width: 1080px;
$column: 80px;
$gutter: 18px;

$orange: #FE4110;
$purple: #56017A;
$red: #BA0000;
...
Don’t use any colour
  codes or grid sizes
anywhere except here
body {
  max-width: $max_width;
}

article {
  margin: $gutter;
  width: $column * 6;
}

em.crazy_bargain {
  color:$orang...
Nesting
table.events   { margin: 14px 0 7px;}
table.events   td { background: #ccc;}
table.events   td h4 { margin-top: 6px; font-...
• Less code
• DRYer
• Easier to make bigger changes
Good Practice: Nesting
Educate your developers
      a{
        color: $pink;
        &:hover {
          color: $green;
        }
      }
Mixins
@mixin rounded($radius: 10px) {
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
  border-radius: $radius;...
• Define once, use lots
• Facilitates transitioning CSS technology
• DRY
Define core mixins in application.scss
// application.scss

...

@mixin rounded($radius: 10px) {
 -moz-border-radius: $radius;
 -webkit-border-radius: $radius;
 ...
Make every file a whole lot of mixins
// partials/application.scss
$preset: #000;

// partials/bulletins.scss
@mixin bulletins { ... }

// partials/events.scss
...
Then include them in the order they’re
               required
// screen.scss
@import "partials/application"
@import "partials/bulletins"
@import "partials/events"

@include bulletins;
...
Use @mixins to nurture and transition to
                CSS3
@mixin rounded($radius: 10px) {
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
  border-radius: $radius;...
Sprites
1 File
 1 http request
Loads of images
@mixin sprites($x_offset: 0, $y_offset: 0) {
  background-image: url(/images/sprites.png);
  background-repeat: no-repeat;...
Selector Inheritance
.button {
  background: black;
  color: white;
  &:hover {
    background: white;
  }
}

.funky_button {
  @extend .button...
Create a solid base
Educate of it’s use
// a list of buttons
// ul

.buttons {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  li {
    display...
Functions
$purple: #56017A;

table.striped {
  tr:nth-child(odd) {
    background: lighten($purple, 80%);
    background: transparen...
lighten() and darken() means there
      is no colour guesswork
Can easily simplify the colour palette of your
                   interface
$visible_light: #ccc;

#lights_are {
  &.on {
    background: lighten( $visible_light, 35% );
    color: $visible_light;
 ...
@import
// screen.scss
@import "partials/application"
@import "partials/bulletins"
@import "partials/events"
Importing happens server-side
1 http request
Using Frameworks
Blueprint example
#container {
    @include container;
     
    .form_row {
        @include column(24);
         
        .label {
       ...
Problems
Problems
Challenges
semantic variable names can work
$bright: orange;


a:hover { color: $bright; }
But they’re hard to remember
Which can create problems
$purple: purple; // purple

      gets changed to

$purple: green; // green
Multiple mixin
 definitions
@mixin rounded($radius: 10px) {
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
  border-radius: $radius;...
Forms
Create a base form stylesheet

    Include all variations

Special use-cases can go into
         section file
Sounds tough
Compass brings the structure
Compass makes it easy to tack on
         frameworks

     Blueprint   960   YUI
@include ‘blueprint’

@include ‘css3’
app/stylesheets/ # all scss files



public/stylesheets/ # compiled css

 
 
 
 
 
 
 
 
 
 
 
 goes here
%end/
Upcoming SlideShare
Loading in...5
×

Team styles

1,393

Published on

Structuring CSS styles for teams

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,393
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide







































































































































  • Team styles

    1. 1. Team Styles How to develop Cascading Style Sheets for use in a team
    2. 2. Nathan Sampimon @nathan_scott
    3. 3. Challenges • Be progressive, without leaving anyone behind • Tackle multiple levels of experience • Keep it simple • Allow for isolation
    4. 4. Why a team? • Big apps = multiple developers • You should be building ready for a handover • Create a solid foundation and build off it
    5. 5. What do we want to deliver?
    6. 6. As little as possible
    7. 7. • Less files • Minimum amount of http requests • Styles to target less sophisticated browsers • Styles to target different media types’ • Simplicity
    8. 8. What do we want to work with?
    9. 9. • More files • Loads of stylesheets • Broken up into sections • Easy to navigate, isolate, extrapolate • Sheets to target different browsers • Sheets to target different media
    10. 10. Front-end Developers
    11. 11. • Like working their own way • Often opinionated • Not necessarily technical • May require guidance
    12. 12. How to we address this?
    13. 13. Most important: Talk to them
    14. 14. • Write docs • Outline rules • Use comments • Provide structure
    15. 15. Docs
    16. 16. • Overview of technologies used • Approach to issues like • Browser targeting • CSS3 • @media supported • Outline creative brief • Include original designs
    17. 17. Rules
    18. 18. Outline any general coding rules
    19. 19. • Don’t change base styles
    20. 20. (try rewriting the style with more specific selectors)
    21. 21. // John .button { background: black; color: white; } // Peter html body .button { background: grey; color: creme; }
    22. 22. • Alphabetise properties
    23. 23. (Although I prefer to have styles structured as follows) h1#logo { Layout display: block; (by importance) position: absolute; margin: 15px 0 10px; padding: 7px 4px; Aesthetics background: black; (by impact) font: bold 16px/21px Helvetica, Arial, color: pink; }
    24. 24. Comment anything ambiguous or unclear
    25. 25. Structure <<
    26. 26. • Rails is easy to navigate, because of structure • Create a solid structure in your app • Why reinvent the wheel?
    27. 27. Controllers announcement s application documents events parts user_sessions
    28. 28. Controllers Views announcement announcement s s application documents documents events events layouts parts parts user_sessions user_sessions
    29. 29. Controllers Views Stylesheets announcement announcement application s s announcement application documents s documents events documents events layouts events parts parts layouts user_sessions user_sessions parts user_sessions
    30. 30. Controllers Views Stylesheets announcement announcement application s s announcement application documents s documents events documents events layouts events parts parts layouts user_sessions user_sessions parts user_sessions
    31. 31. All partials feed into 1 stylesheet Only 1 stylesheet gets sent to browser
    32. 32. stylesheets/ styles.css partials/ _application.css _announcements.css _documents.css ...
    33. 33. Target media
    34. 34. @media <LINK REL="stylesheet" TYPE="text/css"          MEDIA="print, handheld" HREF="foo.css"> @media screen { body { background: white; } }
    35. 35. @media • all • handheld • screen • braille • print • speech • embossed • projection • tty
    36. 36. @media @media (max-width: 600px) { ... } @media (max-width: 400px) { ... } @media (min-width: 1300px) {
    37. 37. Naming Conventions application.css application.print.css announcements.css documents.css events.css layouts.css layout.print.css parts.css user_sessions
    38. 38. Extrapolate to suit application/reset.css application/fonts.css application.css application.print.css announcements.css documents.css events.css layouts.css layout.print.css parts.css user_sessions
    39. 39. Target browsers
    40. 40. 1 sheet for each IE version 1 sheet for every other browser
    41. 41. = stylesheet_link_tag 'screen', :media => 'screen' = stylesheet_link_tag 'print', :media => 'print' /[if lte IE9] = stylesheet_link_tag 'ie9', :media => 'screen' /[if lte IE8] = stylesheet_link_tag 'ie8', :media => 'screen' /[if lte IE7] = stylesheet_link_tag 'ie7', :media => 'screen' /[if lte IE6] = stylesheet_link_tag 'ie6', :media => 'screen'
    42. 42. IE Sheets are generally quite small, no need for partials
    43. 43. Use less hacks and more tact
    44. 44. Use this: # application.css li { margin: 5px; } # ie.css li { margin: 0; } Over this: # application.css li { margin: 5px; !important margin: 0; }
    45. 45. Quick side note
    46. 46. CSS Resets To take browser subjectivity out of the equation
    47. 47. Front end developers tend to be particular Stick to the big ones
    48. 48. • Yahoo! YUI Reset • Eric Meyer
    49. 49. • Use as a base • Customise to suit project (cascaded)
    50. 50. screen.css application/reset.css application/fonts.css print.css application.css application.print.css ie9.css announcements.css documents.css ie8.css events.css layouts.css ie7.css layout.print.css parts.css ie6.css user_sessions
    51. 51. @import screen.css application/reset.css application/fonts.css print.css application.css application.print.css ie9.css announcements.css documents.css ie8.css events.css layouts.css ie7.css layout.print.css parts.css ie6.css user_sessions
    52. 52. /* screen.css */ @import "partials/application.css"; @import "partials/announcements.css"; @import "partials/documents.css"; @import "partials/events.css"; ...
    53. 53. Too many http requests
    54. 54. # app/views/layouts/application.html.erb <%= stylesheet_link_tag "application/reset", "application", "announcements", "documents", “events”, ... :cache => "screen", :media => “screen” %>
    55. 55. Development # when ActionController::Base.perform_caching is false => <link href="/stylesheets/application/reset.css" media="screen" rel="stylesheet" type="text/ css" /> <link href="/stylesheets/application.css" media="screen" rel="stylesheet" type="text/css" /> <link href="/stylesheets/announcements.css" media="screen" rel="stylesheet" type="text/css" / > <link href="/stylesheets/documents.css" media="screen" rel="stylesheet" type="text/css" /> <link href="/stylesheets/events.css" media="screen" rel="stylesheet" type="text/css" /> ...
    56. 56. Production # when ActionController::Base.perform_caching is true => <link href="/stylesheets/application/screen.css" media="screen" rel="stylesheet" type="text/ css" />
    57. 57. Problems with CSS
    58. 58. CSS History CSS1 CSS2 1996 2005 2010
    59. 59. W3C move slowly
    60. 60. “14 years of CSS has basically given us...”
    61. 61. “more selectors + more properties” - Wynn Netherland
    62. 62. Enter meta-frameworks
    63. 63. • Increase productivity • Limit damage (they compile!) • Progressive
    64. 64. CSS table.events { margin: 14px 0 7px; } table.events td { background: #ccc; } table.events td h4 { margin-top: 6px; font-size: 1.2em; } table.events td a { color: #f00; }
    65. 65. LESS CSS @silver: #ccc; @red: #f00; table.events { margin: 14px 0 7px; td { background: @silver; h4 { margin-top: 6px; font-size: 1.2em; } a{ color: @red; } }
    66. 66. SCSS $silver: #ccc; $red: #f00; table.events { margin: 14px 0 7px; td { background: $silver; h4 { margin-top: 6px; font-size: 1.2em; } a{ color: $red; } }
    67. 67. SASS $silver: #ccc $red: #f00 table.events margin: 14px 0 7px td background: $silver h4 margin-top: 6px font-size: 1.2em a color: $red
    68. 68. SASS vs SCSS/LESS • SASS is a language • SCSS/LESS act like extensions of CSS • You can’t use CSS in • You can use CSS in SCSS/ SASS LESS • SASS looks different to • SCSS/LESS looks like CSS CSS extended
    69. 69. SCSS $silver: #ccc; $red: #f00; table.events { margin: 14px 0 7px; td { background: $silver; h4 { margin-top: 6px; font-size: 1.2em; } a{ color: $red; } }
    70. 70. Compiles to CSS
    71. 71. Benefits of SCSS for teams
    72. 72. Variables
    73. 73. $silver: #ccc; $red: #f00; a { color: $red; } small { color: $silver; }
    74. 74. • Front-end developers can set colours to be used throughout all styles • Let guess-work when introducing colours • DRYer
    75. 75. Define all colour, size and grid variables in application.scss
    76. 76. # application.scss $max_width: 1080px; $column: 80px; $gutter: 18px; $orange: #FE4110; $purple: #56017A; $red: #BA0000; $grey: #505050; $light_grey: #AEAEAE; ...
    77. 77. Don’t use any colour codes or grid sizes anywhere except here
    78. 78. body { max-width: $max_width; } article { margin: $gutter; width: $column * 6; } em.crazy_bargain { color:$orange; }
    79. 79. Nesting
    80. 80. table.events { margin: 14px 0 7px;} table.events td { background: #ccc;} table.events td h4 { margin-top: 6px; font-size: 1.2em;} table.events td a { color: #f00;} becomes table.events { margin: 14px 0 7px; td { background: #ccc; h4 { margin-top: 6px; font-size: 1.2em;} a { color: #f00;} } }
    81. 81. • Less code • DRYer • Easier to make bigger changes
    82. 82. Good Practice: Nesting
    83. 83. Educate your developers a{ color: $pink; &:hover { color: $green; } }
    84. 84. Mixins
    85. 85. @mixin rounded($radius: 10px) { -moz-border-radius: $radius; -webkit-border-radius: $radius; border-radius: $radius; } ul li a { @include rounded(6px); }
    86. 86. • Define once, use lots • Facilitates transitioning CSS technology • DRY
    87. 87. Define core mixins in application.scss
    88. 88. // application.scss ... @mixin rounded($radius: 10px) { -moz-border-radius: $radius; -webkit-border-radius: $radius; border-radius: $radius; } @mixin rounded-top($radius: 10px) { -moz-border-radius-topleft: $radius; -moz-border-radius-topright: $radius; -webkit-border-top-left-radius: $radius; -webkit-border-top-right-radius: $radius; } @mixin gradient($from, $to) { background: -moz-linear-gradient(50% 0, $from, $to); background: -webkit-gradient(linear, 50% 0, 50% 100%, from($from), to($to)); }
    89. 89. Make every file a whole lot of mixins
    90. 90. // partials/application.scss $preset: #000; // partials/bulletins.scss @mixin bulletins { ... } // partials/events.scss @mixin events { ... }
    91. 91. Then include them in the order they’re required
    92. 92. // screen.scss @import "partials/application" @import "partials/bulletins" @import "partials/events" @include bulletins; @include events;
    93. 93. Use @mixins to nurture and transition to CSS3
    94. 94. @mixin rounded($radius: 10px) { -moz-border-radius: $radius; -webkit-border-radius: $radius; border-radius: $radius; } ul li a { @include rounded(6px); }
    95. 95. Sprites
    96. 96. 1 File 1 http request Loads of images
    97. 97. @mixin sprites($x_offset: 0, $y_offset: 0) { background-image: url(/images/sprites.png); background-repeat: no-repeat; background-position: -$x_offset -$y_offset; } @mixin icon_sprite($sequence) { // icons start 350px down @include sprites(($sequence * 30px) + 350px); } a.new { display: inline-block; padding-left: 25px; @include icon_sprite(1);
    98. 98. Selector Inheritance
    99. 99. .button { background: black; color: white; &:hover { background: white; } } .funky_button { @extend .button; color: pink; }
    100. 100. Create a solid base Educate of it’s use
    101. 101. // a list of buttons // ul .buttons { display: block; margin: 0; padding: 0; list-style: none; li { display: block; margin: 0; padding: 0; a{ display: block; padding: 8px 15px; }
    102. 102. Functions
    103. 103. $purple: #56017A; table.striped { tr:nth-child(odd) { background: lighten($purple, 80%); background: transparentize($purple, 0.2); } }
    104. 104. lighten() and darken() means there is no colour guesswork
    105. 105. Can easily simplify the colour palette of your interface
    106. 106. $visible_light: #ccc; #lights_are { &.on { background: lighten( $visible_light, 35% ); color: $visible_light; } &.off { background: darken( $visible_light, 35% ); color: $visible_light; } }
    107. 107. @import
    108. 108. // screen.scss @import "partials/application" @import "partials/bulletins" @import "partials/events"
    109. 109. Importing happens server-side
    110. 110. 1 http request
    111. 111. Using Frameworks
    112. 112. Blueprint example
    113. 113. #container {     @include container;           .form_row {         @include column(24);                   .label {             @include column(3);             font-weight: bold;          }         .child_block {             @include column(12);                           .label {                 @include clearfix; }
    114. 114. Problems
    115. 115. Problems
    116. 116. Challenges
    117. 117. semantic variable names can work
    118. 118. $bright: orange; a:hover { color: $bright; }
    119. 119. But they’re hard to remember
    120. 120. Which can create problems
    121. 121. $purple: purple; // purple gets changed to $purple: green; // green
    122. 122. Multiple mixin definitions
    123. 123. @mixin rounded($radius: 10px) { -moz-border-radius: $radius; -webkit-border-radius: $radius; border-radius: $radius; } // Already defined so just a rename @mixin round($radius: 10px) { @include rounded($radius); }
    124. 124. Forms
    125. 125. Create a base form stylesheet Include all variations Special use-cases can go into section file
    126. 126. Sounds tough
    127. 127. Compass brings the structure
    128. 128. Compass makes it easy to tack on frameworks Blueprint 960 YUI
    129. 129. @include ‘blueprint’ @include ‘css3’
    130. 130. app/stylesheets/ # all scss files public/stylesheets/ # compiled css goes here
    131. 131. %end/
    1. Gostou de algum slide específico?

      Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

    ×