CSS Power Tools
Prochain SlideShare
Loading in...5
×

Vous aimez ? Partagez donc ce contenu avec votre réseau

Partager

CSS Power Tools

  • 18,862 vues
Uploaded 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......

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

Plus dans : Technologies , Éducation
  • Full Name Full Name Comment goes here.
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
  • nice
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
  • for more: http://www.webdirections.org/resources/nicole-sullivan-css-power-tools/
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
  • 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.
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
  • all covered!
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
  • great overview
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
No Downloads

Vues

Total des vues
18,862
Sur Slideshare
13,406
From Embeds
5,456
Nombre d'ajouts
24

Actions

Partages
Téléchargements
341
Commentaires
5
J'aime
102

Ajouts 5,456

http://www.webdirections.org 5,025
http://www.scoop.it 183
http://a0.twimg.com 82
http://us-w1.rockmelt.com 49
http://blog.emilevictorportenart.be 29
https://twitter.com 23
http://webdirections.org 12
http://tweetedtimes.com 10
http://visual3d.tumblr.com 9
http://csschops.com 8
http://echosandbox.com 5
https://si0.twimg.com 4
http://twitter.com 3
http://translate.googleusercontent.com 2
http://nuevospowerpoints.blogspot.com 2
http://www.twylah.com 2
http://www.techgig.com 1
http://www.linkedin.com 1
http://evp-web.tumblr.com 1
http://zootool.com 1
http://www.mefeedia.com 1
https://elearning.sydney.edu.au 1
http://krtconf.com 1
https://www.linkedin.com 1

Signaler un contenu

Signalé comme inapproprié Signaler comme inapproprié
Signaler comme inapproprié

Indiquez la raison pour laquelle vous avez signalé cette présentation comme n'étant pas appropriée.

Annuler
    No notes for slide

Transcript

  • 1. WISH CSSFriday, November 11, 2011 TOOLS
  • 2. @STUBBORNELLA What CSS tool would you love to have?Friday, November 11, 2011
  • 3. Friday, November 11, 2011
  • 4. GITHUB.COM free for open source projectsFriday, November 11, 2011
  • 5. FRAMEWORKS organize code into logical abstractionsFriday, November 11, 2011
  • 6. Friday, November 11, 2011
  • 7. Friday, November 11, 2011
  • 8. Friday, November 11, 2011
  • 9. Friday, November 11, 2011
  • 10. GRIDS Abstract layout, remove duplication, improve performanceFriday, November 11, 2011
  • 11. OOCSS GRIDS http://www.stubbornella.org/content/2011/01/22/grids-improve-site-performance/Friday, November 11, 2011
  • 12. MEDIA BLOCK EXAMPLEFriday, November 11, 2011
  • 13. ALL OF THESE ARE THE SAME OBJECTFriday, November 11, 2011
  • 14. WHAT DO WE KNOW? ❖ Can be nested ❖ Optional right button ❖ Must clearfixFriday, November 11, 2011
  • 15. WHAT DON’T WE KNOW? ❖ Image width and decoration vary ❖ Right content is unknown ❖ Width unknownFriday, November 11, 2011
  • 16. SEPARATE STRUCTURE FROM CHROMEFriday, November 11, 2011
  • 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. 4 LINES OF CSS... _Friday, November 11, 2011
  • 19. Friday, November 11, 2011
  • 20. HTML SIZE reduced by 50% by Stefan ParkerFriday, November 11, 2011
  • 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. GET THE MEDIA BLOCK: https://github.com/stubbornella/oocss/tree/master/core/mediaFriday, November 11, 2011
  • 23. PREPROCESSORS server-side CSS language additionsFriday, November 11, 2011
  • 24. Friday, November 11, 2011
  • 25. Friday, November 11, 2011
  • 26. Friday, November 11, 2011
  • 27. Friday, November 11, 2011
  • 28. Mixins are for classes that are too presentationalFriday, November 11, 2011
  • 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. GRADIENT TOOLS make converting sites to CSS3 so much fasterFriday, November 11, 2011
  • 31. by Lea VerouFriday, November 11, 2011
  • 32. but the syntax is very very ugly, and unstableFriday, November 11, 2011
  • 33. Friday, November 11, 2011
  • 34. Friday, November 11, 2011
  • 35. Friday, November 11, 2011
  • 36. COLORZILLA TOOL http://www.colorzilla.com/gradient-editor/Friday, November 11, 2011
  • 37. CHROME DEV TOOLS are the new firebugFriday, November 11, 2011
  • 38. Friday, November 11, 2011
  • 39. Friday, November 11, 2011
  • 40. Friday, November 11, 2011
  • 41. NORMALIZE.CSS is the new reset A  project  by  Nicolas  Gallagher  and  Jonathan  Neal.Friday, November 11, 2011
  • 42. HOW MANY PEOPLE HAVE TRIED A RESET STYLESHEET? like the one by Eric Meyer or in YUIFriday, November 11, 2011
  • 43. Friday, November 11, 2011
  • 44. Friday, November 11, 2011
  • 45. THE GOAL IS TO HAVE THE SAME STYLES across all browsersFriday, November 11, 2011
  • 46. Friday, November 11, 2011
  • 47. by James Butler - http://www.flickr.com/photos/slimjim/5004687965/Friday, November 11, 2011
  • 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. Friday, November 11, 2011
  • 50. Friday, November 11, 2011
  • 51. Friday, November 11, 2011
  • 52. CSS LINT beyond validationFriday, November 11, 2011
  • 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. Friday, November 11, 2011
  • 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. OUTPUT searchable, sortableFriday, November 11, 2011
  • 57. ERRORS HIGHLIGHTED IN CONTEXT In this case, don’t use !importantFriday, November 11, 2011
  • 58. MAKE UP YOUR OWN RULES!Friday, November 11, 2011
  • 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. 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. 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. TEXT-INDENT EXAMPLE Get the property And the valueFriday, November 11, 2011
  • 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. 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. 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. USE CSS LINT TO TEST FOR DUPLICATION • floats • headings • font-sizes • color values coming soon! • padding & margins coming soon!Friday, November 11, 2011
  • 67. BUILD AND SHARE TOOLS THAT YOU WANT TO EXIST! you’ll learn so much from open source.Friday, November 11, 2011
  • 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