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

CSS Power Tools

on

  • 18,509 vues

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

Statistiques

Vues

Total des vues
18,509
Vues sur SlideShare
13,074
Vues externes
5,435

Actions

J'aime
103
Téléchargements
331
Commentaires
5

23 Ajouts 5,435

http://www.webdirections.org 5005
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://www.twylah.com 2
http://nuevospowerpoints.blogspot.com 2
http://translate.googleusercontent.com 2
http://evp-web.tumblr.com 1
http://zootool.com 1
http://krtconf.com 1
http://www.mefeedia.com 1
https://elearning.sydney.edu.au 1
http://www.techgig.com 1
http://www.linkedin.com 1
Plus...

Accessibilité

Catégories

Détails de l'import

Uploaded via as Adobe PDF

Droits d'utilisation

© Tous droits réservés

Report content

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Votre message apparaîtra ici
    Processing...
  • nice
    Are you sure you want to
    Votre message apparaîtra ici
    Processing...
  • for more: http://www.webdirections.org/resources/nicole-sullivan-css-power-tools/
    Are you sure you want to
    Votre message apparaîtra ici
    Processing...
  • 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.
    Are you sure you want to
    Votre message apparaîtra ici
    Processing...
  • all covered!
    Are you sure you want to
    Votre message apparaîtra ici
    Processing...
  • great overview
    Are you sure you want to
    Votre message apparaîtra ici
    Processing...
Poster un commentaire
Modifier votre commentaire

CSS Power Tools CSS Power Tools Presentation Transcript

  • 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, 2011
  • OOCSS GRIDS http://www.stubbornella.org/content/2011/01/22/grids-improve-site-performance/Friday, November 11, 2011
  • 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 ❖ Must clearfixFriday, November 11, 2011
  • WHAT DON’T WE KNOW? ❖ Image width and decoration vary ❖ Right content is unknown ❖ Width unknownFriday, November 11, 2011
  • SEPARATE STRUCTURE FROM CHROMEFriday, November 11, 2011
  • 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
  • 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 page by 44% (before gzip).” Jason Sobel http://www.facebook.com/note.php?note_id=307069903919Friday, November 11, 2011
  • 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 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
  • 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  Nicolas  Gallagher  and  Jonathan  Neal.Friday, November 11, 2011
  • HOW MANY PEOPLE HAVE TRIED A RESET STYLESHEET? like the one by Eric Meyer or in YUIFriday, November 11, 2011
  • 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 CAN’T but it might be overkill?Kevin Walsh - http://www.flickr.com/photos/kev_walsh/2216144544/Friday, November 11, 2011
  • 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. http://www.flickr.com/photos/the_justified_sinner/4694158195/sizes/l/in/photostream/Friday, November 11, 2011
  • Friday, November 11, 2011
  • 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
  • OUTPUT searchable, sortableFriday, November 11, 2011
  • ERRORS HIGHLIGHTED IN CONTEXT In this case, don’t use !importantFriday, November 11, 2011
  • 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 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
  • 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
  • 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
  • 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 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
  • 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
  • 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
  • USE CSS LINT TO TEST FOR DUPLICATION • floats • headings • font-sizes • color values coming soon! • padding & margins coming soon!Friday, November 11, 2011
  • BUILD AND SHARE TOOLS THAT YOU WANT TO EXIST! you’ll learn so much from open source.Friday, November 11, 2011
  • LET’S KEEP TALKING... http://stubbornella.org @stubbornella http://github.com/stubbornella/oocss/ http://groups.google.com/group/object-oriented-cssFriday, November 11, 2011