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

What's hot (20)

Introduction to XML
Introduction to XMLIntroduction to XML
Introduction to XML
yht4ever
 
Jquery library
Jquery libraryJquery library
Jquery library
baabtra.com - No. 1 supplier of quality freshers
 
CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong? CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong?
Russ Weakley
 
DOUBLE LINKED LIST(DATA STRUCTURE) PPT BY PRASUN KUMAR
DOUBLE LINKED LIST(DATA STRUCTURE) PPT BY PRASUN KUMARDOUBLE LINKED LIST(DATA STRUCTURE) PPT BY PRASUN KUMAR
DOUBLE LINKED LIST(DATA STRUCTURE) PPT BY PRASUN KUMAR
PrasunKumar38
 
Internet explorer イントラネットの判定と挙動
Internet explorer イントラネットの判定と挙動Internet explorer イントラネットの判定と挙動
Internet explorer イントラネットの判定と挙動
Isao Sato
 
Apuntes de XSD
Apuntes de XSDApuntes de XSD
Apuntes de XSD
Abrirllave
 
Jquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript BasicsJquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript Basics
EPAM Systems
 
Standard template library
Standard template libraryStandard template library
Standard template library
Sukriti Singh
 
JavaScript: Events Handling
JavaScript: Events HandlingJavaScript: Events Handling
JavaScript: Events Handling
Yuriy Bezgachnyuk
 
Introduction to JavaScript (1).ppt
Introduction to JavaScript (1).pptIntroduction to JavaScript (1).ppt
Introduction to JavaScript (1).ppt
MuhammadRehan856177
 
Html n CSS
Html n CSSHtml n CSS
Html n CSS
Sukrit Gupta
 
SVG - Scalable Vector Graphics
SVG - Scalable Vector GraphicsSVG - Scalable Vector Graphics
SVG - Scalable Vector Graphics
Shweta Sadawarte
 
Binary Search Tree
Binary Search TreeBinary Search Tree
Binary Search Tree
Shivam Singh
 
[D31] PostgreSQLでスケールアウト構成を構築しよう by Yugo Nagata
[D31] PostgreSQLでスケールアウト構成を構築しよう by Yugo Nagata[D31] PostgreSQLでスケールアウト構成を構築しよう by Yugo Nagata
[D31] PostgreSQLでスケールアウト構成を構築しよう by Yugo Nagata
Insight Technology, Inc.
 
ソーシャルゲーム案件におけるDB分割のPHP実装
ソーシャルゲーム案件におけるDB分割のPHP実装ソーシャルゲーム案件におけるDB分割のPHP実装
ソーシャルゲーム案件におけるDB分割のPHP実装
infinite_loop
 
Html images syntax
Html images syntaxHtml images syntax
Html images syntax
JayjZens
 
Html Intro2
Html Intro2Html Intro2
Html Intro2
mlackner
 
MongoDB for Coder Training (Coding Serbia 2013)
MongoDB for Coder Training (Coding Serbia 2013)MongoDB for Coder Training (Coding Serbia 2013)
MongoDB for Coder Training (Coding Serbia 2013)
Uwe Printz
 
Linked list in Data Structure and Algorithm
Linked list in Data Structure and Algorithm Linked list in Data Structure and Algorithm
Linked list in Data Structure and Algorithm
KristinaBorooah
 
Introdução à JQuery
Introdução à JQueryIntrodução à JQuery
Introdução à JQuery
André Faria Gomes
 
Introduction to XML
Introduction to XMLIntroduction to XML
Introduction to XML
yht4ever
 
CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong? CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong?
Russ Weakley
 
DOUBLE LINKED LIST(DATA STRUCTURE) PPT BY PRASUN KUMAR
DOUBLE LINKED LIST(DATA STRUCTURE) PPT BY PRASUN KUMARDOUBLE LINKED LIST(DATA STRUCTURE) PPT BY PRASUN KUMAR
DOUBLE LINKED LIST(DATA STRUCTURE) PPT BY PRASUN KUMAR
PrasunKumar38
 
Internet explorer イントラネットの判定と挙動
Internet explorer イントラネットの判定と挙動Internet explorer イントラネットの判定と挙動
Internet explorer イントラネットの判定と挙動
Isao Sato
 
Jquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript BasicsJquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript Basics
EPAM Systems
 
Standard template library
Standard template libraryStandard template library
Standard template library
Sukriti Singh
 
Introduction to JavaScript (1).ppt
Introduction to JavaScript (1).pptIntroduction to JavaScript (1).ppt
Introduction to JavaScript (1).ppt
MuhammadRehan856177
 
SVG - Scalable Vector Graphics
SVG - Scalable Vector GraphicsSVG - Scalable Vector Graphics
SVG - Scalable Vector Graphics
Shweta Sadawarte
 
Binary Search Tree
Binary Search TreeBinary Search Tree
Binary Search Tree
Shivam Singh
 
[D31] PostgreSQLでスケールアウト構成を構築しよう by Yugo Nagata
[D31] PostgreSQLでスケールアウト構成を構築しよう by Yugo Nagata[D31] PostgreSQLでスケールアウト構成を構築しよう by Yugo Nagata
[D31] PostgreSQLでスケールアウト構成を構築しよう by Yugo Nagata
Insight Technology, Inc.
 
ソーシャルゲーム案件におけるDB分割のPHP実装
ソーシャルゲーム案件におけるDB分割のPHP実装ソーシャルゲーム案件におけるDB分割のPHP実装
ソーシャルゲーム案件におけるDB分割のPHP実装
infinite_loop
 
Html images syntax
Html images syntaxHtml images syntax
Html images syntax
JayjZens
 
Html Intro2
Html Intro2Html Intro2
Html Intro2
mlackner
 
MongoDB for Coder Training (Coding Serbia 2013)
MongoDB for Coder Training (Coding Serbia 2013)MongoDB for Coder Training (Coding Serbia 2013)
MongoDB for Coder Training (Coding Serbia 2013)
Uwe Printz
 
Linked list in Data Structure and Algorithm
Linked list in Data Structure and Algorithm Linked list in Data Structure and Algorithm
Linked list in Data Structure and Algorithm
KristinaBorooah
 

Viewers also liked (20)

Object Oriented CSS
Object Oriented CSSObject Oriented CSS
Object Oriented CSS
Nicole Sullivan
 
[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS
jeannewoo
 
CSS introduction
CSS introductionCSS introduction
CSS introduction
CloudTech 
 
CSS Bloat!
CSS Bloat!CSS Bloat!
CSS Bloat!
Nicole Sullivan
 
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
偉格 高
 
[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS
jeannewoo
 
CSS introduction
CSS introductionCSS introduction
CSS introduction
CloudTech 
 
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
 
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
 
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
 
Module, AMD, RequireJS
Module, AMD, RequireJSModule, AMD, RequireJS
Module, AMD, RequireJS
偉格 高
 

Similar to CSS Power Tools (20)

Css compass sasssusy
Css   compass sasssusyCss   compass sasssusy
Css compass sasssusy
Zivtech, LLC
 
Building Sencha Themes
Building Sencha ThemesBuilding Sencha Themes
Building Sencha Themes
Sencha
 
Stephanie Rewis - css-startech
Stephanie Rewis -  css-startechStephanie Rewis -  css-startech
Stephanie Rewis - css-startech
StarTech Conference
 
[WebVisions 2010] CSS3 Workshop (Afternoon)
[WebVisions 2010] CSS3 Workshop (Afternoon)[WebVisions 2010] CSS3 Workshop (Afternoon)
[WebVisions 2010] CSS3 Workshop (Afternoon)
Christopher Schmitt
 
Compass, Sass, and the Enlightened CSS Developer
Compass, Sass, and the Enlightened CSS DeveloperCompass, Sass, and the Enlightened CSS Developer
Compass, Sass, and the Enlightened CSS Developer
Wynn Netherland
 
CSS3 3D Workshop
CSS3 3D WorkshopCSS3 3D Workshop
CSS3 3D Workshop
Christopher Schmitt
 
SASS: The Next Wave in Styling and Theming
SASS: The Next Wave in Styling and ThemingSASS: The Next Wave in Styling and Theming
SASS: The Next Wave in Styling and Theming
Sencha
 
Object Oriented Css For High Performance Websites And Applications
Object Oriented Css For High Performance Websites And ApplicationsObject Oriented Css For High Performance Websites And Applications
Object Oriented Css For High Performance Websites And Applications
PerconaPerformance
 
HTML5 Pearson preso
HTML5 Pearson presoHTML5 Pearson preso
HTML5 Pearson preso
Chris Mills
 
Ext GWT 3.0 Theming and Appearances
Ext GWT 3.0 Theming and AppearancesExt GWT 3.0 Theming and Appearances
Ext GWT 3.0 Theming and Appearances
Sencha
 
Microsoft TechDays - CSS3 Presentation
Microsoft TechDays - CSS3 PresentationMicrosoft TechDays - CSS3 Presentation
Microsoft TechDays - CSS3 Presentation
Rachel Andrew
 
Mastering CSS3 Selectors
Mastering CSS3 SelectorsMastering CSS3 Selectors
Mastering CSS3 Selectors
Rachel Andrew
 
Beginning css
Beginning cssBeginning css
Beginning css
Ted Drake
 
Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript
Dr. Strangelove: or How I learned to love HTML, CSS, and JavascriptDr. Strangelove: or How I learned to love HTML, CSS, and Javascript
Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript
RobotDeathSquad
 
[Worskhop Summits] CSS3 Workshop
[Worskhop Summits] CSS3 Workshop[Worskhop Summits] CSS3 Workshop
[Worskhop Summits] CSS3 Workshop
Christopher Schmitt
 
Big Design Conference: CSS3
Big Design Conference: CSS3 Big Design Conference: CSS3
Big Design Conference: CSS3
Wynn Netherland
 
Css3: What is the fuss about
Css3: What is the fuss aboutCss3: What is the fuss about
Css3: What is the fuss about
Davide Di Cillo
 
Dominion Enterprises _H@&lt;k@th0n_
Dominion Enterprises _H@&lt;k@th0n_Dominion Enterprises _H@&lt;k@th0n_
Dominion Enterprises _H@&lt;k@th0n_
Ken Collins
 
[heweb11] CSS3 Makeover
[heweb11] CSS3 Makeover[heweb11] CSS3 Makeover
[heweb11] CSS3 Makeover
Christopher Schmitt
 
Oop design magma rails 2011
Oop design   magma rails 2011Oop design   magma rails 2011
Oop design magma rails 2011
MagmaConf
 
Css compass sasssusy
Css   compass sasssusyCss   compass sasssusy
Css compass sasssusy
Zivtech, LLC
 
Building Sencha Themes
Building Sencha ThemesBuilding Sencha Themes
Building Sencha Themes
Sencha
 
[WebVisions 2010] CSS3 Workshop (Afternoon)
[WebVisions 2010] CSS3 Workshop (Afternoon)[WebVisions 2010] CSS3 Workshop (Afternoon)
[WebVisions 2010] CSS3 Workshop (Afternoon)
Christopher Schmitt
 
Compass, Sass, and the Enlightened CSS Developer
Compass, Sass, and the Enlightened CSS DeveloperCompass, Sass, and the Enlightened CSS Developer
Compass, Sass, and the Enlightened CSS Developer
Wynn Netherland
 
SASS: The Next Wave in Styling and Theming
SASS: The Next Wave in Styling and ThemingSASS: The Next Wave in Styling and Theming
SASS: The Next Wave in Styling and Theming
Sencha
 
Object Oriented Css For High Performance Websites And Applications
Object Oriented Css For High Performance Websites And ApplicationsObject Oriented Css For High Performance Websites And Applications
Object Oriented Css For High Performance Websites And Applications
PerconaPerformance
 
HTML5 Pearson preso
HTML5 Pearson presoHTML5 Pearson preso
HTML5 Pearson preso
Chris Mills
 
Ext GWT 3.0 Theming and Appearances
Ext GWT 3.0 Theming and AppearancesExt GWT 3.0 Theming and Appearances
Ext GWT 3.0 Theming and Appearances
Sencha
 
Microsoft TechDays - CSS3 Presentation
Microsoft TechDays - CSS3 PresentationMicrosoft TechDays - CSS3 Presentation
Microsoft TechDays - CSS3 Presentation
Rachel Andrew
 
Mastering CSS3 Selectors
Mastering CSS3 SelectorsMastering CSS3 Selectors
Mastering CSS3 Selectors
Rachel Andrew
 
Beginning css
Beginning cssBeginning css
Beginning css
Ted Drake
 
Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript
Dr. Strangelove: or How I learned to love HTML, CSS, and JavascriptDr. Strangelove: or How I learned to love HTML, CSS, and Javascript
Dr. Strangelove: or How I learned to love HTML, CSS, and Javascript
RobotDeathSquad
 
[Worskhop Summits] CSS3 Workshop
[Worskhop Summits] CSS3 Workshop[Worskhop Summits] CSS3 Workshop
[Worskhop Summits] CSS3 Workshop
Christopher Schmitt
 
Big Design Conference: CSS3
Big Design Conference: CSS3 Big Design Conference: CSS3
Big Design Conference: CSS3
Wynn Netherland
 
Css3: What is the fuss about
Css3: What is the fuss aboutCss3: What is the fuss about
Css3: What is the fuss about
Davide Di Cillo
 
Dominion Enterprises _H@&lt;k@th0n_
Dominion Enterprises _H@&lt;k@th0n_Dominion Enterprises _H@&lt;k@th0n_
Dominion Enterprises _H@&lt;k@th0n_
Ken Collins
 
Oop design magma rails 2011
Oop design   magma rails 2011Oop design   magma rails 2011
Oop design magma rails 2011
MagmaConf
 

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
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
 
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 Performance
Nicole Sullivan
 
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS5 Mistakes of Massive CSS
5 Mistakes of Massive CSS
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
 
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
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional Performance
Nicole Sullivan
 

Recently uploaded (20)

System Card: Claude Opus 4 & Claude Sonnet 4
System Card: Claude Opus 4 & Claude Sonnet 4System Card: Claude Opus 4 & Claude Sonnet 4
System Card: Claude Opus 4 & Claude Sonnet 4
Razin Mustafiz
 
Offshore IT Support: Balancing In-House and Offshore Help Desk Technicians
Offshore IT Support: Balancing In-House and Offshore Help Desk TechniciansOffshore IT Support: Balancing In-House and Offshore Help Desk Technicians
Offshore IT Support: Balancing In-House and Offshore Help Desk Technicians
john823664
 
Contributing to WordPress With & Without Code.pptx
Contributing to WordPress With & Without Code.pptxContributing to WordPress With & Without Code.pptx
Contributing to WordPress With & Without Code.pptx
Patrick Lumumba
 
Let’s Get Slack Certified! 🚀- Slack Community
Let’s Get Slack Certified! 🚀- Slack CommunityLet’s Get Slack Certified! 🚀- Slack Community
Let’s Get Slack Certified! 🚀- Slack Community
SanjeetMishra29
 
STKI Israel Market Study 2025 final v1 version
STKI Israel Market Study 2025 final v1 versionSTKI Israel Market Study 2025 final v1 version
STKI Israel Market Study 2025 final v1 version
Dr. Jimmy Schwarzkopf
 
New Ways to Reduce Database Costs with ScyllaDB
New Ways to Reduce Database Costs with ScyllaDBNew Ways to Reduce Database Costs with ScyllaDB
New Ways to Reduce Database Costs with ScyllaDB
ScyllaDB
 
Dev Dives: System-to-system integration with UiPath API Workflows
Dev Dives: System-to-system integration with UiPath API WorkflowsDev Dives: System-to-system integration with UiPath API Workflows
Dev Dives: System-to-system integration with UiPath API Workflows
UiPathCommunity
 
Multistream in SIP and NoSIP @ OpenSIPS Summit 2025
Multistream in SIP and NoSIP @ OpenSIPS Summit 2025Multistream in SIP and NoSIP @ OpenSIPS Summit 2025
Multistream in SIP and NoSIP @ OpenSIPS Summit 2025
Lorenzo Miniero
 
Supercharge Your AI Development with Local LLMs
Supercharge Your AI Development with Local LLMsSupercharge Your AI Development with Local LLMs
Supercharge Your AI Development with Local LLMs
Francesco Corti
 
Measuring Microsoft 365 Copilot and Gen AI Success
Measuring Microsoft 365 Copilot and Gen AI SuccessMeasuring Microsoft 365 Copilot and Gen AI Success
Measuring Microsoft 365 Copilot and Gen AI Success
Nikki Chapple
 
AI Emotional Actors: “When Machines Learn to Feel and Perform"
AI Emotional Actors:  “When Machines Learn to Feel and Perform"AI Emotional Actors:  “When Machines Learn to Feel and Perform"
AI Emotional Actors: “When Machines Learn to Feel and Perform"
AkashKumar809858
 
UiPath Community Berlin: Studio Tips & Tricks and UiPath Insights
UiPath Community Berlin: Studio Tips & Tricks and UiPath InsightsUiPath Community Berlin: Studio Tips & Tricks and UiPath Insights
UiPath Community Berlin: Studio Tips & Tricks and UiPath Insights
UiPathCommunity
 
Introducing Ensemble Cloudlet vRouter
Introducing Ensemble  Cloudlet vRouterIntroducing Ensemble  Cloudlet vRouter
Introducing Ensemble Cloudlet vRouter
Adtran
 
cloudgenesis cloud workshop , gdg on campus mita
cloudgenesis cloud workshop , gdg on campus mitacloudgenesis cloud workshop , gdg on campus mita
cloudgenesis cloud workshop , gdg on campus mita
siyaldhande02
 
From Legacy to Cloud-Native: A Guide to AWS Modernization.pptx
From Legacy to Cloud-Native: A Guide to AWS Modernization.pptxFrom Legacy to Cloud-Native: A Guide to AWS Modernization.pptx
From Legacy to Cloud-Native: A Guide to AWS Modernization.pptx
Mohammad Jomaa
 
SDG 9000 Series: Unleashing multigigabit everywhere
SDG 9000 Series: Unleashing multigigabit everywhereSDG 9000 Series: Unleashing multigigabit everywhere
SDG 9000 Series: Unleashing multigigabit everywhere
Adtran
 
Content and eLearning Standards: Finding the Best Fit for Your-Training
Content and eLearning Standards: Finding the Best Fit for Your-TrainingContent and eLearning Standards: Finding the Best Fit for Your-Training
Content and eLearning Standards: Finding the Best Fit for Your-Training
Rustici Software
 
What is DePIN? The Hottest Trend in Web3 Right Now!
What is DePIN? The Hottest Trend in Web3 Right Now!What is DePIN? The Hottest Trend in Web3 Right Now!
What is DePIN? The Hottest Trend in Web3 Right Now!
cryptouniversityoffi
 
Fully Open-Source Private Clouds: Freedom, Security, and Control
Fully Open-Source Private Clouds: Freedom, Security, and ControlFully Open-Source Private Clouds: Freedom, Security, and Control
Fully Open-Source Private Clouds: Freedom, Security, and Control
ShapeBlue
 
Agentic AI - The New Era of Intelligence
Agentic AI - The New Era of IntelligenceAgentic AI - The New Era of Intelligence
Agentic AI - The New Era of Intelligence
Muzammil Shah
 
System Card: Claude Opus 4 & Claude Sonnet 4
System Card: Claude Opus 4 & Claude Sonnet 4System Card: Claude Opus 4 & Claude Sonnet 4
System Card: Claude Opus 4 & Claude Sonnet 4
Razin Mustafiz
 
Offshore IT Support: Balancing In-House and Offshore Help Desk Technicians
Offshore IT Support: Balancing In-House and Offshore Help Desk TechniciansOffshore IT Support: Balancing In-House and Offshore Help Desk Technicians
Offshore IT Support: Balancing In-House and Offshore Help Desk Technicians
john823664
 
Contributing to WordPress With & Without Code.pptx
Contributing to WordPress With & Without Code.pptxContributing to WordPress With & Without Code.pptx
Contributing to WordPress With & Without Code.pptx
Patrick Lumumba
 
Let’s Get Slack Certified! 🚀- Slack Community
Let’s Get Slack Certified! 🚀- Slack CommunityLet’s Get Slack Certified! 🚀- Slack Community
Let’s Get Slack Certified! 🚀- Slack Community
SanjeetMishra29
 
STKI Israel Market Study 2025 final v1 version
STKI Israel Market Study 2025 final v1 versionSTKI Israel Market Study 2025 final v1 version
STKI Israel Market Study 2025 final v1 version
Dr. Jimmy Schwarzkopf
 
New Ways to Reduce Database Costs with ScyllaDB
New Ways to Reduce Database Costs with ScyllaDBNew Ways to Reduce Database Costs with ScyllaDB
New Ways to Reduce Database Costs with ScyllaDB
ScyllaDB
 
Dev Dives: System-to-system integration with UiPath API Workflows
Dev Dives: System-to-system integration with UiPath API WorkflowsDev Dives: System-to-system integration with UiPath API Workflows
Dev Dives: System-to-system integration with UiPath API Workflows
UiPathCommunity
 
Multistream in SIP and NoSIP @ OpenSIPS Summit 2025
Multistream in SIP and NoSIP @ OpenSIPS Summit 2025Multistream in SIP and NoSIP @ OpenSIPS Summit 2025
Multistream in SIP and NoSIP @ OpenSIPS Summit 2025
Lorenzo Miniero
 
Supercharge Your AI Development with Local LLMs
Supercharge Your AI Development with Local LLMsSupercharge Your AI Development with Local LLMs
Supercharge Your AI Development with Local LLMs
Francesco Corti
 
Measuring Microsoft 365 Copilot and Gen AI Success
Measuring Microsoft 365 Copilot and Gen AI SuccessMeasuring Microsoft 365 Copilot and Gen AI Success
Measuring Microsoft 365 Copilot and Gen AI Success
Nikki Chapple
 
AI Emotional Actors: “When Machines Learn to Feel and Perform"
AI Emotional Actors:  “When Machines Learn to Feel and Perform"AI Emotional Actors:  “When Machines Learn to Feel and Perform"
AI Emotional Actors: “When Machines Learn to Feel and Perform"
AkashKumar809858
 
UiPath Community Berlin: Studio Tips & Tricks and UiPath Insights
UiPath Community Berlin: Studio Tips & Tricks and UiPath InsightsUiPath Community Berlin: Studio Tips & Tricks and UiPath Insights
UiPath Community Berlin: Studio Tips & Tricks and UiPath Insights
UiPathCommunity
 
Introducing Ensemble Cloudlet vRouter
Introducing Ensemble  Cloudlet vRouterIntroducing Ensemble  Cloudlet vRouter
Introducing Ensemble Cloudlet vRouter
Adtran
 
cloudgenesis cloud workshop , gdg on campus mita
cloudgenesis cloud workshop , gdg on campus mitacloudgenesis cloud workshop , gdg on campus mita
cloudgenesis cloud workshop , gdg on campus mita
siyaldhande02
 
From Legacy to Cloud-Native: A Guide to AWS Modernization.pptx
From Legacy to Cloud-Native: A Guide to AWS Modernization.pptxFrom Legacy to Cloud-Native: A Guide to AWS Modernization.pptx
From Legacy to Cloud-Native: A Guide to AWS Modernization.pptx
Mohammad Jomaa
 
SDG 9000 Series: Unleashing multigigabit everywhere
SDG 9000 Series: Unleashing multigigabit everywhereSDG 9000 Series: Unleashing multigigabit everywhere
SDG 9000 Series: Unleashing multigigabit everywhere
Adtran
 
Content and eLearning Standards: Finding the Best Fit for Your-Training
Content and eLearning Standards: Finding the Best Fit for Your-TrainingContent and eLearning Standards: Finding the Best Fit for Your-Training
Content and eLearning Standards: Finding the Best Fit for Your-Training
Rustici Software
 
What is DePIN? The Hottest Trend in Web3 Right Now!
What is DePIN? The Hottest Trend in Web3 Right Now!What is DePIN? The Hottest Trend in Web3 Right Now!
What is DePIN? The Hottest Trend in Web3 Right Now!
cryptouniversityoffi
 
Fully Open-Source Private Clouds: Freedom, Security, and Control
Fully Open-Source Private Clouds: Freedom, Security, and ControlFully Open-Source Private Clouds: Freedom, Security, and Control
Fully Open-Source Private Clouds: Freedom, Security, and Control
ShapeBlue
 
Agentic AI - The New Era of Intelligence
Agentic AI - The New Era of IntelligenceAgentic AI - The New Era of Intelligence
Agentic AI - The New Era of Intelligence
Muzammil Shah
 

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