SlideShare a Scribd company logo
WISH
                               CSS



Friday, 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 projects




Friday, November 11, 2011
FRAMEWORKS
                            organize code into logical abstractions




Friday, 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
                 performance




Friday, November 11, 2011
OOCSS
     GRIDS



                            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 SIZE
                      reduced 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 Sobel
                            http://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
PREPROCESSORS
                            server-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
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 faster




Friday, November 11, 2011
by Lea Verou
Friday, 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 TOOL
                            http://www.colorzilla.com/gradient-editor/




Friday, November 11, 2011
CHROME DEV TOOLS
                            are the new firebug




Friday, 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 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’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 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
OUTPUT
                            searchable, 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
                                                   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, etc

Friday, November 11, 2011
TEXT-INDENT EXAMPLE




             Get the property   And the value



Friday, 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-css


Friday, November 11, 2011

More Related Content

Viewers also liked

CSS: a rapidly changing world
CSS: a rapidly changing worldCSS: a rapidly changing world
CSS: a rapidly changing world
Russ Weakley
 
제 5회 DGMIT R&D 컨퍼런스: JavsScript Event Bubbling & Capturing
제 5회 DGMIT R&D 컨퍼런스: JavsScript Event Bubbling & Capturing제 5회 DGMIT R&D 컨퍼런스: JavsScript Event Bubbling & Capturing
제 5회 DGMIT R&D 컨퍼런스: JavsScript Event Bubbling & Capturing
dgmit2009
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing Us
Nicole Sullivan
 
How to Make HTML and CSS Files
How to Make HTML and CSS FilesHow to Make HTML and CSS Files
How to Make HTML and CSS Files
LearningNerd
 
HTML CSS | Computer Science
HTML CSS | Computer ScienceHTML CSS | Computer Science
HTML CSS | Computer Science
Transweb Global Inc
 
Efficient, maintainable CSS
Efficient, maintainable CSSEfficient, maintainable CSS
Efficient, maintainable CSS
Russ Weakley
 
Compose Async with RxJS
Compose Async with RxJSCompose Async with RxJS
Compose Async with RxJS
Kyung Yeol Kim
 
Angular2 ecosystem
Angular2 ecosystemAngular2 ecosystem
Angular2 ecosystem
Kamil Lelonek
 
BÀI 19 NHÂN DÂN VIỆT NAM KHÁNG CHIẾN CHỐNG PHÁP XÂM LƯỢC (Từ năm 1858 đến t...
BÀI 19  NHÂN DÂN VIỆT NAM KHÁNG CHIẾN CHỐNG PHÁP XÂM LƯỢC  (Từ năm 1858 đến t...BÀI 19  NHÂN DÂN VIỆT NAM KHÁNG CHIẾN CHỐNG PHÁP XÂM LƯỢC  (Từ năm 1858 đến t...
BÀI 19 NHÂN DÂN VIỆT NAM KHÁNG CHIẾN CHỐNG PHÁP XÂM LƯỢC (Từ năm 1858 đến t...
Võ Tâm Long
 
System webpack-jspm
System webpack-jspmSystem webpack-jspm
System webpack-jspm
Jesse Warden
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
Russ Weakley
 
Cascading Style Sheets - CSS
Cascading Style Sheets - CSSCascading Style Sheets - CSS
Cascading Style Sheets - CSS
Sun Technlogies
 
Ionic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocksIonic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocks
Juarez Filho
 
HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsHTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts Basics
Sun Technlogies
 
Css grid-layout
Css grid-layoutCss grid-layout
Css grid-layout
Wendy Huang
 
Module, AMD, RequireJS
Module, AMD, RequireJSModule, AMD, RequireJS
Module, AMD, RequireJS
偉格 高
 
Angularjs 도입 선택 가이드
Angularjs 도입 선택 가이드Angularjs 도입 선택 가이드
Angularjs 도입 선택 가이드
NAVER D2
 
CSS ppt
CSS pptCSS ppt
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
Koombea
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
Shawn Calvert
 

Viewers also liked (20)

CSS: a rapidly changing world
CSS: a rapidly changing worldCSS: a rapidly changing world
CSS: a rapidly changing world
 
제 5회 DGMIT R&D 컨퍼런스: JavsScript Event Bubbling & Capturing
제 5회 DGMIT R&D 컨퍼런스: JavsScript Event Bubbling & Capturing제 5회 DGMIT R&D 컨퍼런스: JavsScript Event Bubbling & Capturing
제 5회 DGMIT R&D 컨퍼런스: JavsScript Event Bubbling & Capturing
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing Us
 
How to Make HTML and CSS Files
How to Make HTML and CSS FilesHow to Make HTML and CSS Files
How to Make HTML and CSS Files
 
HTML CSS | Computer Science
HTML CSS | Computer ScienceHTML CSS | Computer Science
HTML CSS | Computer Science
 
Efficient, maintainable CSS
Efficient, maintainable CSSEfficient, maintainable CSS
Efficient, maintainable CSS
 
Compose Async with RxJS
Compose Async with RxJSCompose Async with RxJS
Compose Async with RxJS
 
Angular2 ecosystem
Angular2 ecosystemAngular2 ecosystem
Angular2 ecosystem
 
BÀI 19 NHÂN DÂN VIỆT NAM KHÁNG CHIẾN CHỐNG PHÁP XÂM LƯỢC (Từ năm 1858 đến t...
BÀI 19  NHÂN DÂN VIỆT NAM KHÁNG CHIẾN CHỐNG PHÁP XÂM LƯỢC  (Từ năm 1858 đến t...BÀI 19  NHÂN DÂN VIỆT NAM KHÁNG CHIẾN CHỐNG PHÁP XÂM LƯỢC  (Từ năm 1858 đến t...
BÀI 19 NHÂN DÂN VIỆT NAM KHÁNG CHIẾN CHỐNG PHÁP XÂM LƯỢC (Từ năm 1858 đến t...
 
System webpack-jspm
System webpack-jspmSystem webpack-jspm
System webpack-jspm
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
 
Cascading Style Sheets - CSS
Cascading Style Sheets - CSSCascading Style Sheets - CSS
Cascading Style Sheets - CSS
 
Ionic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocksIonic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocks
 
HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsHTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts Basics
 
Css grid-layout
Css grid-layoutCss grid-layout
Css grid-layout
 
Module, AMD, RequireJS
Module, AMD, RequireJSModule, AMD, RequireJS
Module, AMD, RequireJS
 
Angularjs 도입 선택 가이드
Angularjs 도입 선택 가이드Angularjs 도입 선택 가이드
Angularjs 도입 선택 가이드
 
CSS ppt
CSS pptCSS ppt
CSS ppt
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 

Similar to CSS Power Tools

Greach 2011 - Engrandeciendo Grails con MongoDB
Greach 2011 - Engrandeciendo Grails con MongoDBGreach 2011 - Engrandeciendo Grails con MongoDB
Greach 2011 - Engrandeciendo Grails con MongoDB
greach_es
 
Caridy patino - node-js
Caridy patino - node-jsCaridy patino - node-js
Caridy patino - node-js
StarTech Conference
 
Conquistando el Servidor con Node.JS
Conquistando el Servidor con Node.JSConquistando el Servidor con Node.JS
Conquistando el Servidor con Node.JS
Caridy Patino
 
Web Scraping using Diazo!
Web Scraping using Diazo!Web Scraping using Diazo!
Web Scraping using Diazo!
pythonchile
 
The Fast, The Slow and the Lazy
The Fast, The Slow and the LazyThe Fast, The Slow and the Lazy
The Fast, The Slow and the Lazy
Maurício Linhares
 
CSS3 - Novo contexto
CSS3 - Novo contextoCSS3 - Novo contexto
CSS3 - Novo contexto
Diego Eis
 
Social design (Seattle 09-2011)
Social design (Seattle 09-2011)Social design (Seattle 09-2011)
Social design (Seattle 09-2011)
Andrei Zyuzikov
 
Open Source - DevInVale 2011
Open Source - DevInVale 2011Open Source - DevInVale 2011
Open Source - DevInVale 2011
Zigotto Tecnologia
 
Clouds against the Floods (RubyConfBR2011)
Clouds against the Floods (RubyConfBR2011) Clouds against the Floods (RubyConfBR2011)
Clouds against the Floods (RubyConfBR2011)
Leonardo Borges
 
The Easy Way - Plone Conference 2011
The Easy Way - Plone Conference 2011The Easy Way - Plone Conference 2011
The Easy Way - Plone Conference 2011
Mikko Ohtamaa
 
Online journalism: thinking about platforms
Online journalism: thinking about platformsOnline journalism: thinking about platforms
Online journalism: thinking about platforms
Paul Bradshaw
 
How I Learned To Stop Worrying & Love HTML5
How I Learned To Stop Worrying & Love HTML5How I Learned To Stop Worrying & Love HTML5
How I Learned To Stop Worrying & Love HTML5
Dale Cruse
 
Taking SM to Next Level - Governor's Conference 2011
Taking SM to Next Level - Governor's Conference 2011Taking SM to Next Level - Governor's Conference 2011
Taking SM to Next Level - Governor's Conference 2011
Andrew Hoffman
 
Practical Cloud Security
Practical Cloud SecurityPractical Cloud Security
Practical Cloud Security
Jason Chan
 
Mobile? WT... F?
Mobile? WT... F?Mobile? WT... F?
Mobile? WT... F?
Vicker Leung
 
Knowing is Half the Battle
Knowing is Half the BattleKnowing is Half the Battle
Knowing is Half the Battle
Focus Lab, LLC
 
JS Tooling in Rails 3.1
JS Tooling in Rails 3.1JS Tooling in Rails 3.1
JS Tooling in Rails 3.1
Duda Dornelles
 
3D in the Browser via WebGL: It's Go Time
3D in the Browser via WebGL: It's Go Time 3D in the Browser via WebGL: It's Go Time
3D in the Browser via WebGL: It's Go Time
Pascal Rettig
 
Changeyrmarkup
ChangeyrmarkupChangeyrmarkup
Changeyrmarkup
Garann Means
 
Content focused web design
Content focused web designContent focused web design
Content focused web design
Eddie Monge
 

Similar to CSS Power Tools (20)

Greach 2011 - Engrandeciendo Grails con MongoDB
Greach 2011 - Engrandeciendo Grails con MongoDBGreach 2011 - Engrandeciendo Grails con MongoDB
Greach 2011 - Engrandeciendo Grails con MongoDB
 
Caridy patino - node-js
Caridy patino - node-jsCaridy patino - node-js
Caridy patino - node-js
 
Conquistando el Servidor con Node.JS
Conquistando el Servidor con Node.JSConquistando el Servidor con Node.JS
Conquistando el Servidor con Node.JS
 
Web Scraping using Diazo!
Web Scraping using Diazo!Web Scraping using Diazo!
Web Scraping using Diazo!
 
The Fast, The Slow and the Lazy
The Fast, The Slow and the LazyThe Fast, The Slow and the Lazy
The Fast, The Slow and the Lazy
 
CSS3 - Novo contexto
CSS3 - Novo contextoCSS3 - Novo contexto
CSS3 - Novo contexto
 
Social design (Seattle 09-2011)
Social design (Seattle 09-2011)Social design (Seattle 09-2011)
Social design (Seattle 09-2011)
 
Open Source - DevInVale 2011
Open Source - DevInVale 2011Open Source - DevInVale 2011
Open Source - DevInVale 2011
 
Clouds against the Floods (RubyConfBR2011)
Clouds against the Floods (RubyConfBR2011) Clouds against the Floods (RubyConfBR2011)
Clouds against the Floods (RubyConfBR2011)
 
The Easy Way - Plone Conference 2011
The Easy Way - Plone Conference 2011The Easy Way - Plone Conference 2011
The Easy Way - Plone Conference 2011
 
Online journalism: thinking about platforms
Online journalism: thinking about platformsOnline journalism: thinking about platforms
Online journalism: thinking about platforms
 
How I Learned To Stop Worrying & Love HTML5
How I Learned To Stop Worrying & Love HTML5How I Learned To Stop Worrying & Love HTML5
How I Learned To Stop Worrying & Love HTML5
 
Taking SM to Next Level - Governor's Conference 2011
Taking SM to Next Level - Governor's Conference 2011Taking SM to Next Level - Governor's Conference 2011
Taking SM to Next Level - Governor's Conference 2011
 
Practical Cloud Security
Practical Cloud SecurityPractical Cloud Security
Practical Cloud Security
 
Mobile? WT... F?
Mobile? WT... F?Mobile? WT... F?
Mobile? WT... F?
 
Knowing is Half the Battle
Knowing is Half the BattleKnowing is Half the Battle
Knowing is Half the Battle
 
JS Tooling in Rails 3.1
JS Tooling in Rails 3.1JS Tooling in Rails 3.1
JS Tooling in Rails 3.1
 
3D in the Browser via WebGL: It's Go Time
3D in the Browser via WebGL: It's Go Time 3D in the Browser via WebGL: It's Go Time
3D in the Browser via WebGL: It's Go Time
 
Changeyrmarkup
ChangeyrmarkupChangeyrmarkup
Changeyrmarkup
 
Content focused web design
Content focused web designContent focused web design
Content focused web design
 

More from Nicole Sullivan

Building the Media Block in ReactJS
Building the Media Block in ReactJS Building the Media Block in ReactJS
Building the Media Block in ReactJS
Nicole Sullivan
 
Why are you here?
Why are you here?Why are you here?
Why are you here?
Nicole Sullivan
 
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceCreating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve Performance
Nicole Sullivan
 
Don't feed the trolls
Don't feed the trollsDon't feed the trolls
Don't feed the trolls
Nicole Sullivan
 
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS5 Mistakes of Massive CSS
5 Mistakes of Massive CSS
Nicole Sullivan
 
CSS Wish List @JSConf
CSS Wish List @JSConfCSS Wish List @JSConf
CSS Wish List @JSConf
Nicole Sullivan
 
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
Nicole Sullivan
 
Taming CSS Selectors
Taming CSS SelectorsTaming CSS Selectors
Taming CSS Selectors
Nicole Sullivan
 
The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The Fabulous
Nicole Sullivan
 
What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?
Nicole Sullivan
 
Pourquoi la performance?
Pourquoi la performance?Pourquoi la performance?
Pourquoi la performance?
Nicole Sullivan
 
Design Fast Websites
Design Fast WebsitesDesign Fast Websites
Design Fast Websites
Nicole Sullivan
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional Performance
Nicole Sullivan
 
After YSlow "A"
After YSlow "A"After YSlow "A"
After YSlow "A"
Nicole Sullivan
 

More from Nicole Sullivan (14)

Building the Media Block in ReactJS
Building the Media Block in ReactJS Building the Media Block in ReactJS
Building the Media Block in ReactJS
 
Why are you here?
Why are you here?Why are you here?
Why are you here?
 
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceCreating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve Performance
 
Don't feed the trolls
Don't feed the trollsDon't feed the trolls
Don't feed the trolls
 
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS5 Mistakes of Massive CSS
5 Mistakes of Massive CSS
 
CSS Wish List @JSConf
CSS Wish List @JSConfCSS Wish List @JSConf
CSS Wish List @JSConf
 
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
 
Taming CSS Selectors
Taming CSS SelectorsTaming CSS Selectors
Taming CSS Selectors
 
The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The Fabulous
 
What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?
 
Pourquoi la performance?
Pourquoi la performance?Pourquoi la performance?
Pourquoi la performance?
 
Design Fast Websites
Design Fast WebsitesDesign Fast Websites
Design Fast Websites
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional Performance
 
After YSlow "A"
After YSlow "A"After YSlow "A"
After YSlow "A"
 

Recently uploaded

GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Neo4j
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
Fwdays
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
c5vrf27qcz
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
Ivo Velitchkov
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
Safe Software
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
Pablo Gómez Abajo
 
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
Edge AI and Vision Alliance
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
Jason Yip
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving
 

Recently uploaded (20)

GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
 
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
 

CSS Power Tools

  • 1. WISH CSS Friday, November 11, 2011 TOOLS
  • 2. @STUBBORNELLA What CSS tool would you love to have? Friday, November 11, 2011
  • 4. GITHUB.COM free for open source projects Friday, November 11, 2011
  • 5. FRAMEWORKS organize code into logical abstractions Friday, November 11, 2011
  • 10. GRIDS Abstract layout, remove duplication, improve performance Friday, 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 EXAMPLE Friday, November 11, 2011
  • 13. ALL OF THESE ARE THE SAME OBJECT Friday, November 11, 2011
  • 14. WHAT DO WE KNOW? ❖ Can be nested ❖ Optional right button ❖ Must clearfix Friday, November 11, 2011
  • 15. WHAT DON’T WE KNOW? ❖ Image width and decoration vary ❖ Right content is unknown ❖ Width unknown Friday, November 11, 2011
  • 16. SEPARATE STRUCTURE FROM CHROME Friday, 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
  • 20. HTML SIZE reduced by 50% by Stefan Parker Friday, 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=307069903919 Friday, November 11, 2011
  • 22. GET THE MEDIA BLOCK: https://github.com/stubbornella/oocss/tree/master/core/media Friday, November 11, 2011
  • 23. PREPROCESSORS server-side CSS language additions Friday, November 11, 2011
  • 28. Mixins are for classes that are too presentational Friday, 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 faster Friday, November 11, 2011
  • 31. by Lea Verou Friday, November 11, 2011
  • 32. but the syntax is very very ugly, and unstable Friday, November 11, 2011
  • 36. COLORZILLA TOOL http://www.colorzilla.com/gradient-editor/ Friday, November 11, 2011
  • 37. CHROME DEV TOOLS are the new firebug 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 YUI Friday, November 11, 2011
  • 45. THE GOAL IS TO HAVE THE SAME STYLES across all browsers 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
  • 52. CSS LINT beyond validation Friday, 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
  • 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 blog Friday, November 11, 2011
  • 56. OUTPUT searchable, sortable Friday, November 11, 2011
  • 57. ERRORS HIGHLIGHTED IN CONTEXT In this case, don’t use !important Friday, 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, etc Friday, November 11, 2011
  • 62. TEXT-INDENT EXAMPLE Get the property And the value Friday, 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-css Friday, November 11, 2011