CSS Power Tools

WISH
CSS

Friday, November 11, 2011
TOOLS

@STUBBORNELLA
What CSS tool would you love to have?


GITHUB.COM
free for open source projects


FRAMEWORKS
organize code into logical abstractions


GRIDS
Abstract layout, remove
duplication, improve
performance


OOCSS
GRIDS

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 clearﬁx


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>


4 LINES OF CSS...

_


HTML SIZE
reduced 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 Sobel
http://www.facebook.com/note.php?note_id=307069903919

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


PREPROCESSORS
server-side CSS language additions


Mixins are for classes that are too presentational


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; }
}


GRADIENT TOOLS
make converting sites to CSS3 so much faster


by Lea Verou

but the syntax is very
very ugly, and unstable


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


CHROME DEV TOOLS
are the new ﬁrebug


NORMALIZE.CSS
is the new reset

A
project
by
Nicolas
Gallagher
and
Jonathan
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.ﬂickr.com/photos/slimjim/5004687965/

IT’S NOT
THAT YOU
CAN’T
but it might be overkill?

Kevin Walsh - http://www.ﬂickr.com/photos/kev_walsh/2216144544/

CSS LINT
beyond 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

OUTPUT
searchable, 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
Name the
rule, and give
it an id

Add the rule to Describe the rule
CSS Lint
Tell CSS Lint
which browsers
are affected.


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, etc


TEXT-INDENT EXAMPLE

Get the property And the value


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.


TEXT-INDENT EXAMPLE

Make sure to tell CSS Lint the
line, column, and rule so the
user can ﬁnd their error.


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.


USE CSS LINT TO TEST FOR
DUPLICATION

• ﬂoats

• 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.


LET’S KEEP TALKING...
http://stubbornella.org
@stubbornella

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


CSS Power Tools

More Related Content

What's hot (7)

Viewers also liked (20)

Similar to CSS Power Tools (20)

More from Nicole Sullivan (14)

Recently uploaded (20)

CSS Power Tools