css power tools

WISH CSS

TOOLSFriday, November 11, 2011

@STUBBORNELLAWhat CSS tool would you love to have?

Friday, November 11, 2011

GITHUB.COMfree for open source projects


FRAMEWORKSorganize code into logical abstractions


GRIDSAbstract layout, remove

duplication, improve performance


GRIDS OOCSS

http://www.stubbornella.org/content/2011/01/22/grids-improve-site-performance/Friday, November 11, 2011

http://www.stubbornella.org/content/2011/01/22/grids-improve-site-performance/

http://www.stubbornella.org/content/2011/01/22/grids-improve-site-performance/

MEDIA BLOCK EXAMPLE


ALL OF THESE ARE THE SAME OBJECT


WHAT DO WE KNOW?

❖ Can be nested❖ Optional right button❖ Must clearfix


WHAT DON’T WE KNOW?

❖ Image width and decoration vary❖ Right content is unknown❖ Width unknown


SEPARATE STRUCTURE FROM CHROME


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>


http://twitter.com/stubbornella

http://twitter.com/stubbornella

http://a3.twimg.com/profile_images/72157651/tattoo_pink_bkg_square_mini.jpg

http://a3.twimg.com/profile_images/72157651/tattoo_pink_bkg_square_mini.jpg

4 LINES OF CSS...

_


HTML SIZEreduced by 50%

by Stefan Parker


“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 Sobelhttp://www.facebook.com/note.php?note_id=307069903919


http://www.facebook.com/note.php?note_id=307069903919

http://www.facebook.com/note.php?note_id=307069903919

GET THE MEDIA BLOCK:https://github.com/stubbornella/oocss/tree/master/core/media


https://github.com/stubbornella/oocss/tree/master/core/media

https://github.com/stubbornella/oocss/tree/master/core/media

PREPROCESSORSserver-side CSS language additions


Mixins are for classes that are too presentational


ExtendsTell one selector to inherit all the styles of another without duplicating the CSS properties.

.message { border: 1px solid #f00; background: #fdd;}.error { @extend .message; border-color: red; background-color: red;}

.warn { @extend .message; border-color: yellow;}

.message, .error, .warn { border: 1px solid #f00; background: #fdd;}.error { border-color: red; background-color: red;}

.warn { border-color: yellow;}

// SASS // compiled CSS

Extends adds structure to your CSS


GRADIENT TOOLSmake converting sites to CSS3 so much faster


by Lea VerouFriday, November 11, 2011

http://leaverou.me/css3patterns/
























but the syntax is very very ugly, and unstable



http://www.colorzilla.com/gradient-editor/


COLORZILLA TOOLhttp://www.colorzilla.com/gradient-editor/




CHROME DEV TOOLSare the new firebug


NORMALIZE.CSSis the new reset

A project by Nicolas Gallagher and Jonathan Neal.


http://nicolasgallagher.com/

http://nicolasgallagher.com/

http://twitter.com/jon_neal

http://twitter.com/jon_neal

HOW MANY PEOPLE HAVE TRIED A RESET STYLESHEET?

like the one by Eric Meyer or in YUI


THE GOAL IS TO HAVE THE SAME STYLES

across all browsers


by James Butler - http://www.flickr.com/photos/slimjim/5004687965/


http://www.flickr.com/photos/slimjim/5004687965/

http://www.flickr.com/photos/slimjim/5004687965/

IT’S NOT THAT YOU

CAN’Tbut it might be overkill?

By Kevin Walsh - http://www.flickr.com/photos/kev_walsh/2216144544/Friday, November 11, 2011

http://www.flickr.com/photos/kev_walsh/2216144544/

http://www.flickr.com/photos/kev_walsh/2216144544/


http://necolas.github.com/normalize.css/demo.html

http://necolas.github.com/normalize.css/demo.html

CSS LINTbeyond validation


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/




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 blog


OUTPUTsearchable, sortable


ERRORS HIGHLIGHTED IN CONTEXT

In this case, don’t use !important


MAKE UP YOUR OWN RULES!


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.


TEXT-INDENT EXAMPLE

Add the rule to CSS Lint

Name the rule, and give

it an id

Describe the rule

Tell CSS Lint which browsers

are affected.


TEXT-INDENT EXAMPLE

Make the rule listen to the parts of the

stylesheet you care about. In this case,

properties.

Try:• startstylesheet, • endstylesheet, • startrule, • endrule, etc


TEXT-INDENT EXAMPLE

Get the property And the value


TEXT-INDENT EXAMPLETest if the property is

text-indentAnd the value is less than -99

If text indent is being used to hide text, send the reporter a message that it may

fail in RTL languages.


TEXT-INDENT EXAMPLE

Make sure to tell CSS Lint the line, column, and rule so the

user can find their error.


WRITE TESTS FOR YOUR TEST ;)

This helps everyone work together.

Give CSS Lint some CSS to test

Tell us how many errors are in that

CSS.


USE CSS LINT TO TEST FOR DUPLICATION

• floats

• headings

• font-sizes

• color values coming soon!

• padding & margins coming soon!


BUILD AND SHARE TOOLS THAT YOU WANT TO EXIST!

you’ll learn so much from open source.


http://stubbornella.org@stubbornella

http://github.com/stubbornella/oocss/http://groups.google.com/group/object-oriented-css

LET’S KEEP TALKING...


http://stubbornella.org/content/

http://stubbornella.org/content/

http://github.com/stubbornella/oocss/

http://github.com/stubbornella/oocss/

http://groups.google.com/group/object-oriented-css




css power tools

Technology

1px solid

css lint

css

http

rule

border

error

2011 text