View
18.469
Download
4
Category
Preview:
DESCRIPTION
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
Citation preview
WISH CSS
TOOLSFriday, November 11, 2011
@STUBBORNELLAWhat CSS tool would you love to have?
Friday, November 11, 2011
Friday, November 11, 2011
GITHUB.COMfree for open source projects
Friday, November 11, 2011
FRAMEWORKSorganize code into logical abstractions
Friday, November 11, 2011
Friday, November 11, 2011
Friday, November 11, 2011
Friday, November 11, 2011
Friday, November 11, 2011
GRIDSAbstract layout, remove
duplication, improve performance
Friday, November 11, 2011
GRIDS OOCSS
http://www.stubbornella.org/content/2011/01/22/grids-improve-site-performance/Friday, November 11, 2011
MEDIA BLOCK EXAMPLE
Friday, November 11, 2011
ALL OF THESE ARE THE SAME OBJECT
Friday, November 11, 2011
WHAT DO WE KNOW?
❖ Can be nested❖ Optional right button❖ Must clearfix
Friday, November 11, 2011
WHAT DON’T WE KNOW?
❖ Image width and decoration vary❖ Right content is unknown❖ Width unknown
Friday, November 11, 2011
SEPARATE STRUCTURE FROM CHROME
Friday, 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 SIZEreduced by 50%
by Stefan Parker
Friday, 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 Sobelhttp://www.facebook.com/note.php?note_id=307069903919
Friday, November 11, 2011
GET THE MEDIA BLOCK:https://github.com/stubbornella/oocss/tree/master/core/media
Friday, November 11, 2011
PREPROCESSORSserver-side CSS language additions
Friday, 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 presentational
Friday, November 11, 2011
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
Friday, November 11, 2011
GRADIENT TOOLSmake converting sites to CSS3 so much faster
Friday, November 11, 2011
by Lea VerouFriday, November 11, 2011
but the syntax is very very ugly, and unstable
Friday, November 11, 2011
Friday, November 11, 2011
Friday, November 11, 2011
Friday, November 11, 2011
COLORZILLA TOOLhttp://www.colorzilla.com/gradient-editor/
Friday, November 11, 2011
CHROME DEV TOOLSare the new firebug
Friday, November 11, 2011
Friday, November 11, 2011
Friday, November 11, 2011
Friday, November 11, 2011
NORMALIZE.CSSis 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 YUI
Friday, November 11, 2011
Friday, November 11, 2011
Friday, November 11, 2011
THE GOAL IS TO HAVE THE SAME STYLES
across all browsers
Friday, 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’Tbut it might be overkill?
By 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 LINTbeyond validation
Friday, 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 blog
Friday, November 11, 2011
OUTPUTsearchable, sortable
Friday, November 11, 2011
ERRORS HIGHLIGHTED IN CONTEXT
In this case, don’t use !important
Friday, 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
Add the rule to CSS Lint
Name the rule, and give
it an id
Describe the rule
Tell CSS Lint which browsers
are affected.
Friday, November 11, 2011
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
Friday, November 11, 2011
TEXT-INDENT EXAMPLE
Get the property And the value
Friday, November 11, 2011
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.
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 ;)
This helps everyone work together.
Give CSS Lint some CSS to test
Tell us how many errors are in that
CSS.
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
http://stubbornella.org@stubbornella
http://github.com/stubbornella/oocss/http://groups.google.com/group/object-oriented-css
LET’S KEEP TALKING...
Friday, November 11, 2011
Recommended