SlideShare una empresa de Scribd logo
1 de 68
Descargar para leer sin conexión
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

Más contenido relacionado

Destacado

CSS: a rapidly changing world
CSS: a rapidly changing worldCSS: a rapidly changing world
CSS: a rapidly changing worldRuss 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 & Capturingdgmit2009
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing UsNicole 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 FilesLearningNerd
 
Efficient, maintainable CSS
Efficient, maintainable CSSEfficient, maintainable CSS
Efficient, maintainable CSSRuss Weakley
 
Compose Async with RxJS
Compose Async with RxJSCompose Async with RxJS
Compose Async with RxJSKyung Yeol Kim
 
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-jspmJesse Warden
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreRuss Weakley
 
Cascading Style Sheets - CSS
Cascading Style Sheets - CSSCascading Style Sheets - CSS
Cascading Style Sheets - CSSSun 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 rocksJuarez Filho
 
HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsHTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsSun Technlogies
 
Module, AMD, RequireJS
Module, AMD, RequireJSModule, AMD, RequireJS
Module, AMD, RequireJS偉格 高
 
Angularjs 도입 선택 가이드
Angularjs 도입 선택 가이드Angularjs 도입 선택 가이드
Angularjs 도입 선택 가이드NAVER D2
 
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 DesignKoombea
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS PresentationShawn Calvert
 

Destacado (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 a 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 MongoDBgreach_es
 
Conquistando el Servidor con Node.JS
Conquistando el Servidor con Node.JSConquistando el Servidor con Node.JS
Conquistando el Servidor con Node.JSCaridy 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 LazyMaurício Linhares
 
CSS3 - Novo contexto
CSS3 - Novo contextoCSS3 - Novo contexto
CSS3 - Novo contextoDiego Eis
 
Social design (Seattle 09-2011)
Social design (Seattle 09-2011)Social design (Seattle 09-2011)
Social design (Seattle 09-2011)Andrei Zyuzikov
 
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 2011Mikko Ohtamaa
 
Online journalism: thinking about platforms
Online journalism: thinking about platformsOnline journalism: thinking about platforms
Online journalism: thinking about platformsPaul 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 HTML5Dale 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 2011Andrew Hoffman
 
Practical Cloud Security
Practical Cloud SecurityPractical Cloud Security
Practical Cloud SecurityJason Chan
 
Knowing is Half the Battle
Knowing is Half the BattleKnowing is Half the Battle
Knowing is Half the BattleFocus Lab, LLC
 
JS Tooling in Rails 3.1
JS Tooling in Rails 3.1JS Tooling in Rails 3.1
JS Tooling in Rails 3.1Duda 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
 
Content focused web design
Content focused web designContent focused web design
Content focused web designEddie Monge
 

Similar a 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
 

Más de 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
 
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 PerformanceNicole Sullivan
 
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS5 Mistakes of Massive CSS
5 Mistakes of Massive CSSNicole 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
 
The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The FabulousNicole 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
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional PerformanceNicole Sullivan
 

Más de 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"
 

Último

Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechProduct School
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarThousandEyes
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud DataEric D. Schabell
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTopCSSGallery
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIVijayananda Mohire
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingFrancesco Corti
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingMAGNIntelligence
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.IPLOOK Networks
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)IES VE
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4DianaGray10
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInThousandEyes
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Libraryshyamraj55
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024Brian Pichman
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsDianaGray10
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch TuesdayIvanti
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Muhammad Tiham Siddiqui
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FESTBillieHyde
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNeo4j
 

Último (20)

Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? Webinar
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is going
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Library
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projects
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch Tuesday
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FEST
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4j
 

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