SlideShare a Scribd company logo
1 of 44
Download to read offline
Reaching Stylesheet Nirvana
Web Design World Boston, 2008
                    » Dan Rubin
                Sidebar Creative
Reaching Stylesheet Nirvana Web Design World Boston, 2008




         Hi!
                                      Me, according to nGen works @ http://happywebbies.com/



©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008




      Pro CSS
      Techniques
       by Jeff Croft
          Ian Lloyd
          Dan Rubin




©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008




      What you’ll learn:
             ✓ Organization
             ✓ Management
             ✓ Optimization
             ✓ a TINY bit about CSS3



©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008




                           Organize

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008




      Why?
             Keeping your stylesheet organized
             makes your life easier and creates
             patterns which improve workflow.




©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008




      How?
             Patterns already exist in the markup,
             styles, and in the design, so let’s
             start by looking at a few…




©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008




      Follow the markup
             Mimic the flow of your markup from
             top to bottom, grouping related
             rules as you go.




©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008


                                      Markup
                                      <body>
      Example:                        	 <div id=quot;headerquot;>...</div>
                                      	 <div id=quot;contentquot;>...</div>
                                      	 <div id=quot;footerquot;>...</div>
                                      </body>



                                      Styles
                                      body {...}
                                      #header {...}
                                      #content {...}
                                      #footer {...}




©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008




      Separate by purpose
             Group rules based on what they
             control, e.g. layout, text, colors, etc.




©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008


                                      Styles
                                      /* layout */
      Example:                        #header {...}
                                      #content {...}
                                      #footer {...}

                                      /* navigation */
                                      #nav {...}
                                      #nav li {...}
                                      #nav li a {...}

                                      /*   text headings */
                                      h1   {...}
                                      h2   {...}
                                      h3   {...}



©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008




      Sort your properties
             Use a consistent method to order
             the properties within each rule to
             speed creation and editing.




©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008


                                      Alphabetical
                                      h1 {
      Example:                           background:;
                                         border:;
                                         color:;
                                         font-family:;
                                         left:;
                                         margin:;
                                         opacity:;
                                         padding:;
                                         position:;
                                         text-align:;
                                         top:;
                                         z-index:;
                                      }



©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008


                                      Functional
                                      h1 {
      Example:                           position:;
                                         top:;
                                         left:;
                                         z-index:;
                                         margin:;
                                         padding:;
                                         background:;
                                         border:;
                                         opacity:;
                                         color:;
                                         font-family:;
                                         text-align:;
                                      }



©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008




      Comment, comment, comment.
             Use comments to keep your rules
             grouped, and make it easier for
             multiple people to maintain the
             same stylesheet.




©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008


                                      Structural
                                      /* layout */
      Example:                        #header {...}
                                      #content {...}
                                      #footer {...}

                                      /* navigation */
                                      #nav {...}
                                      #nav li {...}
                                      #nav li a {...}


                                      Maintenance
                                      /* hook for extra background image */
                                      #header li a em span {...}



©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008




                         Do what works
                          best for you.


©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008




                               Manage

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008




      Multiple stylesheets
             Use separate stylesheets to organize
             layout, typography, and colors into
             their own files.




©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008




      Multiple stylesheets

                                                   styles.css




                            layout.css             type.css          color.css




©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008




      Hacks & conditional comments
             If you use hacks to fix Internet
             Explorer bugs, place them in their
             own stylesheet(s), and reference the
             hack in the main stylesheet.




©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008


                                      Targeting all versions of IE
                                      <!--[if IE]>
      Example:                           <link href=quot;/css/ie.cssquot; />
                                      <![endif]-->


                                      Targeting IE6 only
                                      <!--[if IE 6]>
                                         <link href=quot;/css/ie6-only.cssquot; />
                                      <![endif]-->

                                      Targeting IE6 or lower
                                      <!--[if lte IE 6]>
                                         <link href=quot;/css/ie6-older.cssquot; />
                                      <![endif]-->


©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008



                                      Reference your hacks with comments
      Example:                        #header ul#nav li {...}
                                      /* IE6 float bug fixed (see ie6.css) */




©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008




      Hacks & conditional comments

                                                  index.html




                            styles.css               ie.css          scripts.js




©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008




      Don't use !important or inline styles
             !important makes editing and
             testing more difficult, and gets in
             the way of user stylesheets.

             Inline styles defeat the purpose of
             using a common stylesheet.

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008




                           Optimize

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008




      Shorthand properties
             Use shorthand properties to
             streamline your rules and remove
             unnecessary clutter.




©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008




      Available shorthand properties
      ✓ background                        ✓ border-top               ✓ font
      ✓ border                            ✓ border-right             ✓ list-style
      ✓ border-color                      ✓ border-bottom            ✓ margin
      ✓ border-style                      ✓ border-left              ✓ outline
      ✓ border-width                                                 ✓ padding



©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008

                                                                        Start here,
                                                                     moving clockwise
                                                                           Top
   Before
   margin-top:10px;
                                                                           12
   margin-right:25px;
   margin-bottom:20px;
   margin-left:15px;                                      Left       9             3    Right

   After
                                                                            6
   margin:10px 25px 20px 15px;
                                                                         Bottom




©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008


                                      Before
                                      #header {
      Example:                           background-color:#fff;
                                         background-image:url(bg.png);
                                         background-repeat:no-repeat;
                                         margin-top:0;
                                         margin-right:25px;
                                         margin-bottom:20px;
                                         margin-left:25px;
                                      }

                                      After
                                      #header {
                                         background:#fff url(bg.png) no-repeat;
                                         margin:0 25px 20px;
                                      }

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008




      Format rules on a single line
             Using single-line rules can make it
             easier to read your stylesheet and
             see its structure.




©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008


                                      Before
                                      #header {
      Example:                           background:#fff url(bg.png) no-repeat;
                                         margin:0 25px 20px;
                                      }

                                      #content {
                                         float:left
                                         padding:20px;
                                      }

                                      After
                                      #header {...}
                                      #content {...}
                                      #footer {...}


©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008




                             Let’s see that
                              in real life.


©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008




      More on single-line CSS
             → http://orderedlist.com/articles/
               single-line-css
             → http://superfluousbanter.org/
               archives/2008/08/regex-
               patterns-for-single-line-css/


©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008




      Tools for optimization
             → http://cssoptimiser.com
             → http://codebeautifier.com
             → http://iceyboard.no-ip.org/
               projects/css_compressor



©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008




                                       CSS3

©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008




      What CSS3 will give us
             ✓ Multiple background images
             ✓ Multi-column layout
             ✓ Grid positioning
             ✓ Advanced selectors (nth-child,
               nth-last-child, nth-of-type)


©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008




                    But how soon can
                     we use CSS3?


©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008

   Browser support for CSS3 properties:




   [1] Webkit-only, not part of CSS3                          Source: http://westciv.com/iphonetests/
©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008


                                      Before
                                      <div class=quot;rounded-boxquot;>
      Example:                        	 <div>
                                      	 	 <div>
                                      	 	 	 <div>...</div>
                                      	 	 </div>
                                      	 </div>
                                      </div>


                                      After
                                      <div class=quot;rounded-boxquot;>...</div>




©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008


                                      .rounded-box {
                                         background-image:
                                            url(top-left.gif),
      Example:                              url(bottom-left.gif),
                                            url(top-right.gif),
                                            url(bottom-right.gif);

                                        background-repeat:no-repeat;
                                      	 	
                                        background-position:
                                           top left,
                                           bottom left,
                                           top right,
                                           bottom right; }




©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008




©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008




                    http://superfluousbanter.org/
                        presentations/2008/
                          (download the slides here)




©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
Reaching Stylesheet Nirvana Web Design World Boston, 2008




                                 Q&A
©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/

More Related Content

Viewers also liked

Web Typography: A (Brief) Review
Web Typography: A (Brief) ReviewWeb Typography: A (Brief) Review
Web Typography: A (Brief) ReviewDan Rubin
 
villaverde15
villaverde15villaverde15
villaverde151f manda
 
10. cuándo volverá jesús
10. cuándo volverá jesús10. cuándo volverá jesús
10. cuándo volverá jesúsNovo Tempo
 
Mobile Cloud @ Binus
Mobile Cloud @ BinusMobile Cloud @ Binus
Mobile Cloud @ BinusArief Gunawan
 
Connexió Y Desconnexió Del Projector
Connexió Y Desconnexió Del ProjectorConnexió Y Desconnexió Del Projector
Connexió Y Desconnexió Del Projectorq4alobelles
 

Viewers also liked (7)

Web Typography: A (Brief) Review
Web Typography: A (Brief) ReviewWeb Typography: A (Brief) Review
Web Typography: A (Brief) Review
 
villaverde15
villaverde15villaverde15
villaverde15
 
10. cuándo volverá jesús
10. cuándo volverá jesús10. cuándo volverá jesús
10. cuándo volverá jesús
 
Ieeej 2010
Ieeej 2010Ieeej 2010
Ieeej 2010
 
Mobile Cloud @ Binus
Mobile Cloud @ BinusMobile Cloud @ Binus
Mobile Cloud @ Binus
 
Connexió Y Desconnexió Del Projector
Connexió Y Desconnexió Del ProjectorConnexió Y Desconnexió Del Projector
Connexió Y Desconnexió Del Projector
 
B2 b crm and supply chain connection
B2 b crm and supply chain connectionB2 b crm and supply chain connection
B2 b crm and supply chain connection
 

Similar to Reaching Stylesheet Nirvana, Web Design World 2008, Boston

Face/Off: APEX Templates & Themes
Face/Off: APEX Templates & ThemesFace/Off: APEX Templates & Themes
Face/Off: APEX Templates & Themescrokitta
 
The Future Of CSS
The Future Of CSSThe Future Of CSS
The Future Of CSSAndy Budd
 
Modern Front-End Development
Modern Front-End DevelopmentModern Front-End Development
Modern Front-End Developmentmwrather
 
From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeFrom PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeDerek Christensen
 
Front-end style guides - fronteers @ WHITE (30/08/12)
Front-end style guides - fronteers @ WHITE (30/08/12)Front-end style guides - fronteers @ WHITE (30/08/12)
Front-end style guides - fronteers @ WHITE (30/08/12)Stijn Janssen
 
Creating a Facebook Clone - Part II.pdf
Creating a Facebook Clone - Part II.pdfCreating a Facebook Clone - Part II.pdf
Creating a Facebook Clone - Part II.pdfShaiAlmog1
 
Grok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb updateGrok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb updateLaura Scott
 
MS TechDays 2011 - HTML 5 All the Awesome Bits
MS TechDays 2011 - HTML 5 All the Awesome BitsMS TechDays 2011 - HTML 5 All the Awesome Bits
MS TechDays 2011 - HTML 5 All the Awesome BitsSpiffy
 
What web designers could learn from print designers
What web designers could learn from print designersWhat web designers could learn from print designers
What web designers could learn from print designersErlend Debast
 
WordPress Developers Israel Meetup #1
WordPress Developers Israel Meetup #1WordPress Developers Israel Meetup #1
WordPress Developers Israel Meetup #1Yoav Farhi
 
Typography For The Web
Typography For The WebTypography For The Web
Typography For The WebChristy Gurga
 
Build a Bootstrap WordPress theme
Build a Bootstrap WordPress themeBuild a Bootstrap WordPress theme
Build a Bootstrap WordPress themeDimitri Dhuyvetter
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop NotesPamela Fox
 
Separation of Concerns in Web User Interfaces
Separation of Concerns in Web User InterfacesSeparation of Concerns in Web User Interfaces
Separation of Concerns in Web User Interfacesjippeh
 
CSS3: Are you experienced?
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?Denise Jacobs
 

Similar to Reaching Stylesheet Nirvana, Web Design World 2008, Boston (20)

The Future of CSS
The Future of CSSThe Future of CSS
The Future of CSS
 
Face/Off: APEX Templates & Themes
Face/Off: APEX Templates & ThemesFace/Off: APEX Templates & Themes
Face/Off: APEX Templates & Themes
 
The Future Of CSS
The Future Of CSSThe Future Of CSS
The Future Of CSS
 
Modern Front-End Development
Modern Front-End DevelopmentModern Front-End Development
Modern Front-End Development
 
Intro to web dev
Intro to web devIntro to web dev
Intro to web dev
 
From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeFrom PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to life
 
Html5 public
Html5 publicHtml5 public
Html5 public
 
Front-end style guides - fronteers @ WHITE (30/08/12)
Front-end style guides - fronteers @ WHITE (30/08/12)Front-end style guides - fronteers @ WHITE (30/08/12)
Front-end style guides - fronteers @ WHITE (30/08/12)
 
Creating a Facebook Clone - Part II.pdf
Creating a Facebook Clone - Part II.pdfCreating a Facebook Clone - Part II.pdf
Creating a Facebook Clone - Part II.pdf
 
Designer toolkit
Designer toolkitDesigner toolkit
Designer toolkit
 
Grok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb updateGrok Drupal (7) Theming - 2011 Feb update
Grok Drupal (7) Theming - 2011 Feb update
 
Designer toolkit
Designer toolkitDesigner toolkit
Designer toolkit
 
MS TechDays 2011 - HTML 5 All the Awesome Bits
MS TechDays 2011 - HTML 5 All the Awesome BitsMS TechDays 2011 - HTML 5 All the Awesome Bits
MS TechDays 2011 - HTML 5 All the Awesome Bits
 
What web designers could learn from print designers
What web designers could learn from print designersWhat web designers could learn from print designers
What web designers could learn from print designers
 
WordPress Developers Israel Meetup #1
WordPress Developers Israel Meetup #1WordPress Developers Israel Meetup #1
WordPress Developers Israel Meetup #1
 
Typography For The Web
Typography For The WebTypography For The Web
Typography For The Web
 
Build a Bootstrap WordPress theme
Build a Bootstrap WordPress themeBuild a Bootstrap WordPress theme
Build a Bootstrap WordPress theme
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop Notes
 
Separation of Concerns in Web User Interfaces
Separation of Concerns in Web User InterfacesSeparation of Concerns in Web User Interfaces
Separation of Concerns in Web User Interfaces
 
CSS3: Are you experienced?
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?
 

Recently uploaded

Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 

Recently uploaded (20)

Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 

Reaching Stylesheet Nirvana, Web Design World 2008, Boston

  • 1. Reaching Stylesheet Nirvana Web Design World Boston, 2008 » Dan Rubin Sidebar Creative
  • 2. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Hi! Me, according to nGen works @ http://happywebbies.com/ ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 3. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Pro CSS Techniques by Jeff Croft Ian Lloyd Dan Rubin ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 4. Reaching Stylesheet Nirvana Web Design World Boston, 2008 What you’ll learn: ✓ Organization ✓ Management ✓ Optimization ✓ a TINY bit about CSS3 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 5. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Organize ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 6. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Why? Keeping your stylesheet organized makes your life easier and creates patterns which improve workflow. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 7. Reaching Stylesheet Nirvana Web Design World Boston, 2008 How? Patterns already exist in the markup, styles, and in the design, so let’s start by looking at a few… ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 8. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Follow the markup Mimic the flow of your markup from top to bottom, grouping related rules as you go. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 9. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Markup <body> Example: <div id=quot;headerquot;>...</div> <div id=quot;contentquot;>...</div> <div id=quot;footerquot;>...</div> </body> Styles body {...} #header {...} #content {...} #footer {...} ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 10. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Separate by purpose Group rules based on what they control, e.g. layout, text, colors, etc. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 11. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Styles /* layout */ Example: #header {...} #content {...} #footer {...} /* navigation */ #nav {...} #nav li {...} #nav li a {...} /* text headings */ h1 {...} h2 {...} h3 {...} ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 12. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Sort your properties Use a consistent method to order the properties within each rule to speed creation and editing. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 13. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Alphabetical h1 { Example: background:; border:; color:; font-family:; left:; margin:; opacity:; padding:; position:; text-align:; top:; z-index:; } ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 14. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Functional h1 { Example: position:; top:; left:; z-index:; margin:; padding:; background:; border:; opacity:; color:; font-family:; text-align:; } ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 15. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Comment, comment, comment. Use comments to keep your rules grouped, and make it easier for multiple people to maintain the same stylesheet. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 16. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Structural /* layout */ Example: #header {...} #content {...} #footer {...} /* navigation */ #nav {...} #nav li {...} #nav li a {...} Maintenance /* hook for extra background image */ #header li a em span {...} ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 17. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Do what works best for you. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 18. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Manage ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 19. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Multiple stylesheets Use separate stylesheets to organize layout, typography, and colors into their own files. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 20. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Multiple stylesheets styles.css layout.css type.css color.css ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 21. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Hacks & conditional comments If you use hacks to fix Internet Explorer bugs, place them in their own stylesheet(s), and reference the hack in the main stylesheet. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 22. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Targeting all versions of IE <!--[if IE]> Example: <link href=quot;/css/ie.cssquot; /> <![endif]--> Targeting IE6 only <!--[if IE 6]> <link href=quot;/css/ie6-only.cssquot; /> <![endif]--> Targeting IE6 or lower <!--[if lte IE 6]> <link href=quot;/css/ie6-older.cssquot; /> <![endif]--> ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 23. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Reference your hacks with comments Example: #header ul#nav li {...} /* IE6 float bug fixed (see ie6.css) */ ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 24. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Hacks & conditional comments index.html styles.css ie.css scripts.js ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 25. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Don't use !important or inline styles !important makes editing and testing more difficult, and gets in the way of user stylesheets. Inline styles defeat the purpose of using a common stylesheet. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 26. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Optimize ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 27. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Shorthand properties Use shorthand properties to streamline your rules and remove unnecessary clutter. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 28. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Available shorthand properties ✓ background ✓ border-top ✓ font ✓ border ✓ border-right ✓ list-style ✓ border-color ✓ border-bottom ✓ margin ✓ border-style ✓ border-left ✓ outline ✓ border-width ✓ padding ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 29. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Start here, moving clockwise Top Before margin-top:10px; 12 margin-right:25px; margin-bottom:20px; margin-left:15px; Left 9 3 Right After 6 margin:10px 25px 20px 15px; Bottom ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 30. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Before #header { Example: background-color:#fff; background-image:url(bg.png); background-repeat:no-repeat; margin-top:0; margin-right:25px; margin-bottom:20px; margin-left:25px; } After #header { background:#fff url(bg.png) no-repeat; margin:0 25px 20px; } ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 31. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Format rules on a single line Using single-line rules can make it easier to read your stylesheet and see its structure. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 32. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Before #header { Example: background:#fff url(bg.png) no-repeat; margin:0 25px 20px; } #content { float:left padding:20px; } After #header {...} #content {...} #footer {...} ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 33. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Let’s see that in real life. ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 34. Reaching Stylesheet Nirvana Web Design World Boston, 2008 More on single-line CSS → http://orderedlist.com/articles/ single-line-css → http://superfluousbanter.org/ archives/2008/08/regex- patterns-for-single-line-css/ ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 35. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Tools for optimization → http://cssoptimiser.com → http://codebeautifier.com → http://iceyboard.no-ip.org/ projects/css_compressor ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 36. Reaching Stylesheet Nirvana Web Design World Boston, 2008 CSS3 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 37. Reaching Stylesheet Nirvana Web Design World Boston, 2008 What CSS3 will give us ✓ Multiple background images ✓ Multi-column layout ✓ Grid positioning ✓ Advanced selectors (nth-child, nth-last-child, nth-of-type) ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 38. Reaching Stylesheet Nirvana Web Design World Boston, 2008 But how soon can we use CSS3? ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 39. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Browser support for CSS3 properties: [1] Webkit-only, not part of CSS3 Source: http://westciv.com/iphonetests/ ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 40. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Before <div class=quot;rounded-boxquot;> Example: <div> <div> <div>...</div> </div> </div> </div> After <div class=quot;rounded-boxquot;>...</div> ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 41. Reaching Stylesheet Nirvana Web Design World Boston, 2008 .rounded-box { background-image: url(top-left.gif), Example: url(bottom-left.gif), url(top-right.gif), url(bottom-right.gif); background-repeat:no-repeat; background-position: top left, bottom left, top right, bottom right; } ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 42. Reaching Stylesheet Nirvana Web Design World Boston, 2008 ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 43. Reaching Stylesheet Nirvana Web Design World Boston, 2008 http://superfluousbanter.org/ presentations/2008/ (download the slides here) ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/
  • 44. Reaching Stylesheet Nirvana Web Design World Boston, 2008 Q&A ©2008 Dan Rubin » http://superfluousbanter.org/presentations/2008/