Your SlideShare is downloading. ×
0
WISH                               CSSFriday, November 11, 2011                            TOOLS
@STUBBORNELLA                            What CSS tool would you love to have?Friday, November 11, 2011
Friday, November 11, 2011
GITHUB.COM                            free for open source projectsFriday, November 11, 2011
FRAMEWORKS                            organize code into logical abstractionsFriday, November 11, 2011
Friday, November 11, 2011
Friday, November 11, 2011
Friday, November 11, 2011
Friday, November 11, 2011
GRIDS            Abstract layout, remove             duplication, improve                 performanceFriday, November 11, ...
OOCSS     GRIDS                            http://www.stubbornella.org/content/2011/01/22/grids-improve-site-performance/F...
MEDIA BLOCK EXAMPLEFriday, November 11, 2011
ALL OF THESE ARE THE                       SAME OBJECTFriday, November 11, 2011
WHAT DO WE KNOW?                            ❖ Can be nested                            ❖ Optional right button            ...
WHAT DON’T WE KNOW?                            ❖ Image width and decoration vary                            ❖ Right conten...
SEPARATE STRUCTURE                        FROM CHROMEFriday, November 11, 2011
A FEW LINES OF HTML...            <div class="media attribution">              <a href="http://twitter.com/stubbornella" c...
4 LINES OF CSS...                                  _Friday, November 11, 2011
Friday, November 11, 2011
HTML SIZE                      reduced by 50%                                   by Stefan ParkerFriday, November 11, 2011
“Due to these efforts, we cut our average            CSS bytes per page by 19% (after gzip) and            HTML bytes per ...
GET THE MEDIA BLOCK:       https://github.com/stubbornella/oocss/tree/master/core/mediaFriday, November 11, 2011
PREPROCESSORS                            server-side CSS language additionsFriday, November 11, 2011
Friday, November 11, 2011
Friday, November 11, 2011
Friday, November 11, 2011
Friday, November 11, 2011
Mixins are for classes that are too presentationalFriday, November 11, 2011
Extends adds structure to your CSS           Extends           Tell one selector to inherit all the styles of another with...
GRADIENT TOOLS                            make converting sites to CSS3 so much fasterFriday, November 11, 2011
by Lea VerouFriday, November 11, 2011
but the syntax is very                            very ugly, and unstableFriday, November 11, 2011
Friday, November 11, 2011
Friday, November 11, 2011
Friday, November 11, 2011
COLORZILLA TOOL                            http://www.colorzilla.com/gradient-editor/Friday, November 11, 2011
CHROME DEV TOOLS                            are the new firebugFriday, November 11, 2011
Friday, November 11, 2011
Friday, November 11, 2011
Friday, November 11, 2011
NORMALIZE.CSS                               is the new reset                                       A	  project	  by	  Nico...
HOW MANY PEOPLE HAVE    TRIED A RESET STYLESHEET?                            like the one by Eric Meyer or in YUIFriday, N...
Friday, November 11, 2011
Friday, November 11, 2011
THE GOAL IS TO HAVE THE            SAME STYLES                            across all browsersFriday, November 11, 2011
Friday, November 11, 2011
by James Butler - http://www.flickr.com/photos/slimjim/5004687965/Friday, November 11, 2011
IT’S NOT                                                                  THAT YOU                                        ...
Friday, November 11, 2011
Friday, November 11, 2011
Friday, November 11, 2011
CSS LINT                            beyond validationFriday, November 11, 2011
THE FLAVOR OF                              DUPLICATION                            Find yours and you’ll find your solution....
Friday, November 11, 2011
CHOOSE THE RULES                            RELEVANT TO YOU              Our goal is to allow custom rulesets, for example...
OUTPUT                            searchable, sortableFriday, November 11, 2011
ERRORS HIGHLIGHTED                       IN CONTEXT                            In this case, don’t use !importantFriday, N...
MAKE UP YOUR OWN                          RULES!Friday, November 11, 2011
EASIER THAN YOU THINK!    1. Download source from:       github.com/stubbornella/csslint    2. Find a rule that does      ...
TEXT-INDENT EXAMPLE                                                   Name the                                            ...
TEXT-INDENT EXAMPLE      Make the rule listen to                                Try:         the parts of the             ...
TEXT-INDENT EXAMPLE             Get the property   And the valueFriday, November 11, 2011
TEXT-INDENT EXAMPLE       Test if the property is                    And the value is             text-indent             ...
TEXT-INDENT EXAMPLE      Make sure to tell CSS Lint the       line, column, and rule so the          user can find their er...
WRITE TESTS FOR YOUR                       TEST ;) Give CSS Lint some CSS         to test                                 ...
USE CSS LINT TO TEST FOR            DUPLICATION                            • floats                            • headings  ...
BUILD AND SHARE TOOLS     THAT YOU WANT TO EXIST!                            you’ll learn so much from open source.Friday,...
LET’S KEEP TALKING...                                  http://stubbornella.org                                      @stubb...
Upcoming SlideShare
Loading in...5
×

CSS Power Tools

18,828

Published on

Let’s admit it, the tools for writing CSS aren’t very advanced. For the most part, the people who write tools don’t know about CSS and the people who know about CSS don’t write tools. Quite a conundrum!

In this session, you’ll learn about good tools that can make development faster and maintenance easier. We’ll also talk a bit about where we can go from here.

What tools do we need as sites are becoming more and more complex? We need to get beyond tools whose primary goal is to avoid hand-coding and realize that, as our techniques for writing CSS become more powerful, our tools can too! Session will include:

* Validators
* Preprocessors
* Finding dead rules
* Linting
* CSS3 gradient tools
* Performance measurement tools
* Unit testing

Published in: Technology, Education
5 Comments
106 Likes
Statistics
Notes
  • nice
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • for more: http://www.webdirections.org/resources/nicole-sullivan-css-power-tools/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • that's really nice. Maybe changing html+css for javascript that generates html+css is faster to develop, more flex, have to know only js, very modular(a javascript object might be a or it can contain another js object and create a really really modular big object with properties and SMART) and a lot of other advantages. However has some cons: initialization time for big pages is slower.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • all covered!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • great overview
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
18,828
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
364
Comments
5
Likes
106
Embeds 0
No embeds

No notes for slide

Transcript of "CSS Power Tools"

  1. 1. WISH CSSFriday, November 11, 2011 TOOLS
  2. 2. @STUBBORNELLA What CSS tool would you love to have?Friday, November 11, 2011
  3. 3. Friday, November 11, 2011
  4. 4. GITHUB.COM free for open source projectsFriday, November 11, 2011
  5. 5. FRAMEWORKS organize code into logical abstractionsFriday, November 11, 2011
  6. 6. Friday, November 11, 2011
  7. 7. Friday, November 11, 2011
  8. 8. Friday, November 11, 2011
  9. 9. Friday, November 11, 2011
  10. 10. GRIDS Abstract layout, remove duplication, improve performanceFriday, November 11, 2011
  11. 11. OOCSS GRIDS http://www.stubbornella.org/content/2011/01/22/grids-improve-site-performance/Friday, November 11, 2011
  12. 12. MEDIA BLOCK EXAMPLEFriday, November 11, 2011
  13. 13. ALL OF THESE ARE THE SAME OBJECTFriday, November 11, 2011
  14. 14. WHAT DO WE KNOW? ❖ Can be nested ❖ Optional right button ❖ Must clearfixFriday, November 11, 2011
  15. 15. WHAT DON’T WE KNOW? ❖ Image width and decoration vary ❖ Right content is unknown ❖ Width unknownFriday, November 11, 2011
  16. 16. SEPARATE STRUCTURE FROM CHROMEFriday, November 11, 2011
  17. 17. A FEW LINES OF HTML... <div class="media attribution"> <a href="http://twitter.com/stubbornella" class="img"> <img src="mini.jpg" alt="Stubbornella" /> </a> <div class="bd">@Stubbornella 14 minutes ago</div> </div>Friday, November 11, 2011
  18. 18. 4 LINES OF CSS... _Friday, November 11, 2011
  19. 19. Friday, November 11, 2011
  20. 20. HTML SIZE reduced by 50% by Stefan ParkerFriday, November 11, 2011
  21. 21. “Due to these efforts, we cut our average CSS bytes per page by 19% (after gzip) and HTML bytes per page by 44% (before gzip).” Jason Sobel http://www.facebook.com/note.php?note_id=307069903919Friday, November 11, 2011
  22. 22. GET THE MEDIA BLOCK: https://github.com/stubbornella/oocss/tree/master/core/mediaFriday, November 11, 2011
  23. 23. PREPROCESSORS server-side CSS language additionsFriday, November 11, 2011
  24. 24. Friday, November 11, 2011
  25. 25. Friday, November 11, 2011
  26. 26. Friday, November 11, 2011
  27. 27. Friday, November 11, 2011
  28. 28. Mixins are for classes that are too presentationalFriday, November 11, 2011
  29. 29. Extends adds structure to your CSS Extends Tell one selector to inherit all the styles of another without duplicating the CSS properties. // SASS // compiled CSS .message { border: 1px solid #f00; .message, .error, .warn { background: #fdd; border: 1px solid #f00; } background: #fdd; .error { } @extend .message; .error { border-color: red; border-color: red; background-color: red; background-color: red; } } .warn { .warn { @extend .message; border-color: yellow; border-color: yellow; } }Friday, November 11, 2011
  30. 30. GRADIENT TOOLS make converting sites to CSS3 so much fasterFriday, November 11, 2011
  31. 31. by Lea VerouFriday, November 11, 2011
  32. 32. but the syntax is very very ugly, and unstableFriday, November 11, 2011
  33. 33. Friday, November 11, 2011
  34. 34. Friday, November 11, 2011
  35. 35. Friday, November 11, 2011
  36. 36. COLORZILLA TOOL http://www.colorzilla.com/gradient-editor/Friday, November 11, 2011
  37. 37. CHROME DEV TOOLS are the new firebugFriday, November 11, 2011
  38. 38. Friday, November 11, 2011
  39. 39. Friday, November 11, 2011
  40. 40. Friday, November 11, 2011
  41. 41. NORMALIZE.CSS is the new reset A  project  by  Nicolas  Gallagher  and  Jonathan  Neal.Friday, November 11, 2011
  42. 42. HOW MANY PEOPLE HAVE TRIED A RESET STYLESHEET? like the one by Eric Meyer or in YUIFriday, November 11, 2011
  43. 43. Friday, November 11, 2011
  44. 44. Friday, November 11, 2011
  45. 45. THE GOAL IS TO HAVE THE SAME STYLES across all browsersFriday, November 11, 2011
  46. 46. Friday, November 11, 2011
  47. 47. by James Butler - http://www.flickr.com/photos/slimjim/5004687965/Friday, November 11, 2011
  48. 48. IT’S NOT THAT YOU CAN’T but it might be overkill?Kevin Walsh - http://www.flickr.com/photos/kev_walsh/2216144544/Friday, November 11, 2011
  49. 49. Friday, November 11, 2011
  50. 50. Friday, November 11, 2011
  51. 51. Friday, November 11, 2011
  52. 52. CSS LINT beyond validationFriday, November 11, 2011
  53. 53. THE FLAVOR OF DUPLICATION Find yours and you’ll find your solution. http://www.flickr.com/photos/the_justified_sinner/4694158195/sizes/l/in/photostream/Friday, November 11, 2011
  54. 54. Friday, November 11, 2011
  55. 55. CHOOSE THE RULES RELEVANT TO YOU Our goal is to allow custom rulesets, for example, the Salesforce.com custom rules, or special rules for your blogFriday, November 11, 2011
  56. 56. OUTPUT searchable, sortableFriday, November 11, 2011
  57. 57. ERRORS HIGHLIGHTED IN CONTEXT In this case, don’t use !importantFriday, November 11, 2011
  58. 58. MAKE UP YOUR OWN RULES!Friday, November 11, 2011
  59. 59. EASIER THAN YOU THINK! 1. Download source from: github.com/stubbornella/csslint 2. Find a rule that does something similar to what you want to do. e.g. the rule tests for a property value pair and you want to test for a different property and value 3. Copy! Seriously.Friday, November 11, 2011
  60. 60. TEXT-INDENT EXAMPLE Name the rule, and give it an id Add the rule to Describe the rule CSS Lint Tell CSS Lint which browsers are affected.Friday, November 11, 2011
  61. 61. TEXT-INDENT EXAMPLE Make the rule listen to Try: the parts of the • startstylesheet, stylesheet you care • endstylesheet, about. In this case, • startrule, properties. • endrule, etcFriday, November 11, 2011
  62. 62. TEXT-INDENT EXAMPLE Get the property And the valueFriday, November 11, 2011
  63. 63. TEXT-INDENT EXAMPLE Test if the property is And the value is text-indent less than -99 If text indent is being used to hide text, send the reporter a message that it may fail in RTL languages.Friday, November 11, 2011
  64. 64. TEXT-INDENT EXAMPLE Make sure to tell CSS Lint the line, column, and rule so the user can find their error.Friday, November 11, 2011
  65. 65. WRITE TESTS FOR YOUR TEST ;) Give CSS Lint some CSS to test Tell us how many errors are in that This helps everyone work CSS. together.Friday, November 11, 2011
  66. 66. USE CSS LINT TO TEST FOR DUPLICATION • floats • headings • font-sizes • color values coming soon! • padding & margins coming soon!Friday, November 11, 2011
  67. 67. BUILD AND SHARE TOOLS THAT YOU WANT TO EXIST! you’ll learn so much from open source.Friday, November 11, 2011
  68. 68. LET’S KEEP TALKING... http://stubbornella.org @stubbornella http://github.com/stubbornella/oocss/ http://groups.google.com/group/object-oriented-cssFriday, November 11, 2011
  1. A particular slide catching your eye?

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

×