SlideShare a Scribd company logo
1 of 53
Organizing & Simplifying
  your CSS [with Sass]
    Matt Puchlerz   Refresh Chicago
    @mattpuchlerz   May 26, 2010
Organizing & Simplifying
  your CSS [with Sass]
    Matt Puchlerz   Refresh Chicago
    @mattpuchlerz   May 26, 2010
Organizing & Simplifying
  your CSS [with Sass]
    Matt Puchlerz   Refresh Chicago
    @mattpuchlerz   May 26, 2010
Organizing & Simplifying
  your CSS [with Sass]
    Matt Puchlerz   Refresh Chicago
    @mattpuchlerz
                    GeekFest
                    MayJun 15 12:28:43 -0500
                        26, 2010
                    Tue                        2010
Gross
TIP #1


Use design
principles
1   11
                                 2   12
Balance                          3   .carousel {
                                 4     width:80%;height:50px}
                                 5
                                 6   blockquote
                                 7   {
                                 8      position: relative;
                                 9      padding: 0px;
                                1      color: #555;
Images © Digital Web Magazine   0    }
1   11
                                 2   12
Balance                          3   .carousel {
                                 4     width: 80%;
                                 5     height: 50px;
                                 6   }
                                 7
                                 8   blockquote {
                                 9    position: relative;
                                1     padding: 0;
Images © Digital Web Magazine   0     color: #555;
1 11
                                 2 12
Rhythm                           3 #branding {
                                 4 width:     350px;
                                 5 height:    150px;
                                 6 padding: 0px;
                                 7 position: absolute;
                                 8 top:      15px;
                                 9 left:    20px;
                                1   background: #c00;
Images © Digital Web Magazine   0   color:   #fff;
1 11
                                 2 12
Rhythm                           3 #branding {
                                 4 background: #c00;
                                 5 color:    #fff;
                                 6 height:    150px;
                                 7 left:    20px;
                                 8 padding: 0;
                                 9 position: absolute;
                                1   top:     15px;
Images © Digital Web Magazine   0   width:    350px;
1   11
                                 2   12
Proximity                        3   #header {…}
                                 4   .error {…}
                                 5   .error p {…}
                                 6
                                 7   .info   {…}
                                 8   .error ul {…}
                                 9   .info p {…}
                                1
Images © Digital Web Magazine   0    #header a {…}
1   11
                                 2   12
Proximity                        3   .error {…}
                                 4   .error p {…}
                                 5   .error ul {…}
                                 6
                                 7   .info   {…}
                                 8   .info p {…}
                                 9
                                1    #header {…}
Images © Digital Web Magazine   0    #header a {…}
TIP #2


Order by
Speci city
<span class=“info”>Hi!</

.info { color: green }
span { color: red }
<span class=“info”>Hi!</

.info { color: green }
span { color: red }
<span class=“info”>Hi!</

.info { color: green }
span { color: red }
Point value based on:
Style Attribute      1000 pts
ID                    100 pts
Class or Attribute      10 pts
Element                  1 pt
blockquote


        1
blockquote p


         2
blockquote p.best


        12
blockquote:hover p.best


           22
#tagline


100
div#tagline


  101
div#tagline p:last-child


        102
<span style=“color: red”>


      1000
<span style=“color: red”>


      1000
1   11
 2   12
 3   p {…}
 4   ul {…}
 5
 6   .error {…}
 7   .notice {…}
 8
 9   input[type=“submit”] {…}
1
0    #container {…}
1   11
 2   12
 3   p {…}
 4   ul {…}
 5
 6   .error {…}
 7   .notice {…}
 8
 9   input[type=“submit”] {…}
1
0    #container {…}
1   11
 2   12
 3   p {…}
 4   ul {…}
 5
 6   .error {…}
 7   .notice {…}
 8
 9   input[type=“submit”] {…}
1
0    #container {…}
1   11
 2   12
 3   p {…}
 4   ul {…}
 5
 6   .error {…}
 7   .notice {…}
 8
 9   input[type=“submit”] {…}
1
0    #container {…}
TIP #3


Try CSS meta-
frameworks
version 3.0
1 11
           2 12
Nesting    3 header {
           4 font: {
           5    size: 18px;
           6    weight: bold;
           7 }
           8
           9 h2 {
          1     color: blue;
          0   }
1   11
             2   12
Variables    3   $orange: #c75000;
             4
             5   body {
             6     background: $orange;
             7     font-family: $ff;
             8     line-height: $lh;
             9   }
            1
            0
1   11
        2   12
Math    3   $lh: 20px;
        4
        5   dl, ol, p, ul {
        6     line-height: $lh;
        7     margin-bottom: $lh;
        8   }
        9
       1    #container {
       0     padding: $lh / 2;
1   11
             2   12
Functions    3   $red: #c00;
             4
             5   a{
             6    color: $red;
             7
             8       :hover {
             9         color: darken($red);
            1        }
            0    }
1   11
          2   12
Mixins    3   @mixin rounded($rad) {
          4     -moz-border-radi…
          5     -o-border-radius…
          6     -webkit-border-r…
          7   }
          8
          9   input[type=“submit”],
         1    select,
         0    textarea {
1   11
           2   12
“SCSS”     3   $lh: 18px;
 Syntax    4
           5   #feature {
           6    padding: $lh;
           7    width: $lh * 10;
           8
           9    &:hover {
          1      @include rounded;
          0      padding: $lh * 2;
1   11
           2   12
“SASS”     3   $lh: 18px
 Syntax    4
           5   #feature
           6    padding: $lh
           7    width: $lh * 10
           8
           9    &:hover
          1      @include rounded
          0      padding: $lh * 2
Installing Sass via Haml
$ gem install haml

$ mv styles.css styles.scss

$ sass --watch styles.scss:styles.css
Installing Sass via Haml
$ gem install haml

$ mv styles.css styles.scss

$ sass --watch styles.scss:styles.css
Installing Sass via Haml
$ gem install haml

$ mv styles.css styles.scss

$ sass --watch styles.scss:styles.css
Installing Sass via Haml
$ gem install haml

$ mv styles.css styles.scss

$ sass --watch styles.scss:styles.css
TIP #1
Use design principles
TIP #1
Use design principles
TIP #2
Order by speci city
TIP #1
Use design principles
TIP #2
Order by speci city
TIP #3
Try CSS meta-frameworks
anks!
Any questions?
 Matt Puchlerz   Refresh Chicago
 @mattpuchlerz
                 GeekFest
                 MayJun 15 12:48:09 -0500
                     26, 2010
                 Tue                        2010

More Related Content

What's hot

Sassive Aggressive: Using Sass to Make Your Life Easier (NSWG Version)
Sassive Aggressive: Using Sass to Make Your Life Easier (NSWG Version)Sassive Aggressive: Using Sass to Make Your Life Easier (NSWG Version)
Sassive Aggressive: Using Sass to Make Your Life Easier (NSWG Version)Adam Darowski
 
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)emrox
 
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassCSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassLucien Lee
 
The Near Future of CSS
The Near Future of CSSThe Near Future of CSS
The Near Future of CSSRachel Andrew
 
Stylesheets of the future with Sass and Compass
Stylesheets of the future with Sass and CompassStylesheets of the future with Sass and Compass
Stylesheets of the future with Sass and CompassDave Ross
 
Pacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASSPacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASSSteve Krueger
 
Sass - Making CSS fun again.
Sass - Making CSS fun again.Sass - Making CSS fun again.
Sass - Making CSS fun again.Gabriel Neutzling
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008tutorialsruby
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockMarco Pinheiro
 
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehrBeyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehrJens-Christian Fischer
 
Elegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassElegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassMediacurrent
 
Oocss & progressive css3 selectors
Oocss & progressive css3 selectorsOocss & progressive css3 selectors
Oocss & progressive css3 selectorsdaniel_sternlicht
 
[WebVisions 2010] CSS3 Workshop (Afternoon)
[WebVisions 2010] CSS3 Workshop (Afternoon)[WebVisions 2010] CSS3 Workshop (Afternoon)
[WebVisions 2010] CSS3 Workshop (Afternoon)Christopher Schmitt
 
Colors In CSS3
Colors In CSS3Colors In CSS3
Colors In CSS3Lea Verou
 
LESS is More
LESS is MoreLESS is More
LESS is Morejsmith92
 

What's hot (19)

Sassive Aggressive: Using Sass to Make Your Life Easier (NSWG Version)
Sassive Aggressive: Using Sass to Make Your Life Easier (NSWG Version)Sassive Aggressive: Using Sass to Make Your Life Easier (NSWG Version)
Sassive Aggressive: Using Sass to Make Your Life Easier (NSWG Version)
 
Sass
SassSass
Sass
 
Css frameworks
Css frameworksCss frameworks
Css frameworks
 
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)
 
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassCSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & Compass
 
The Near Future of CSS
The Near Future of CSSThe Near Future of CSS
The Near Future of CSS
 
Stylesheets of the future with Sass and Compass
Stylesheets of the future with Sass and CompassStylesheets of the future with Sass and Compass
Stylesheets of the future with Sass and Compass
 
Pacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASSPacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASS
 
Sass - Making CSS fun again.
Sass - Making CSS fun again.Sass - Making CSS fun again.
Sass - Making CSS fun again.
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
 
Theme 23
Theme 23Theme 23
Theme 23
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, Greensock
 
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehrBeyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
 
Elegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassElegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs Sass
 
Oocss & progressive css3 selectors
Oocss & progressive css3 selectorsOocss & progressive css3 selectors
Oocss & progressive css3 selectors
 
CSS and Layout
CSS and LayoutCSS and Layout
CSS and Layout
 
[WebVisions 2010] CSS3 Workshop (Afternoon)
[WebVisions 2010] CSS3 Workshop (Afternoon)[WebVisions 2010] CSS3 Workshop (Afternoon)
[WebVisions 2010] CSS3 Workshop (Afternoon)
 
Colors In CSS3
Colors In CSS3Colors In CSS3
Colors In CSS3
 
LESS is More
LESS is MoreLESS is More
LESS is More
 

Similar to Organizing & Simplifying CSS [with Sass]

Dojo: Sass - Syntactically Awesome Stylesheets
Dojo: Sass - Syntactically Awesome StylesheetsDojo: Sass - Syntactically Awesome Stylesheets
Dojo: Sass - Syntactically Awesome StylesheetsGuilherme
 
Wrangling the CSS Beast with Sass
Wrangling the CSS Beast  with SassWrangling the CSS Beast  with Sass
Wrangling the CSS Beast with SassRob Friesel
 
Finding a Better Way to CSS: Navigating Sass with Compass
Finding a Better Way to CSS: Navigating Sass with CompassFinding a Better Way to CSS: Navigating Sass with Compass
Finding a Better Way to CSS: Navigating Sass with CompassClaudina Sarahe
 
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day DeutschlandLearn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day DeutschlandThemePartner
 
Learn to Love CSS3 [English]
Learn to Love CSS3 [English]Learn to Love CSS3 [English]
Learn to Love CSS3 [English]ThemePartner
 
Developing the Seaside ecosystem to increase its productivity
Developing the Seaside ecosystem to increase its productivityDeveloping the Seaside ecosystem to increase its productivity
Developing the Seaside ecosystem to increase its productivityESUG
 
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)Adam Darowski
 
Ruby on Rails 3.1: Let's bring the fun back into web programing
Ruby on Rails 3.1: Let's bring the fun back into web programingRuby on Rails 3.1: Let's bring the fun back into web programing
Ruby on Rails 3.1: Let's bring the fun back into web programingBozhidar Batsov
 
User Interface Development with Mulberry
User Interface Development with MulberryUser Interface Development with Mulberry
User Interface Development with Mulberrymrdanimal
 
How to Think Inside the Box: Programming Fixed Layout for E-Books
How to Think Inside the Box: Programming Fixed Layout for E-BooksHow to Think Inside the Box: Programming Fixed Layout for E-Books
How to Think Inside the Box: Programming Fixed Layout for E-Booksbisg
 
Creating Art with Codes - CSS3
Creating Art with Codes - CSS3Creating Art with Codes - CSS3
Creating Art with Codes - CSS3Sayanee Basu
 
Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"
Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"
Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"bentleyhoke
 
{LESS} Overview
{LESS} Overview{LESS} Overview
{LESS} OverviewJeff Stagg
 

Similar to Organizing & Simplifying CSS [with Sass] (20)

Cloudstack UI Customization
Cloudstack UI CustomizationCloudstack UI Customization
Cloudstack UI Customization
 
FCIP SASS Talk
FCIP SASS TalkFCIP SASS Talk
FCIP SASS Talk
 
Dojo: Sass - Syntactically Awesome Stylesheets
Dojo: Sass - Syntactically Awesome StylesheetsDojo: Sass - Syntactically Awesome Stylesheets
Dojo: Sass - Syntactically Awesome Stylesheets
 
Sass
SassSass
Sass
 
Wrangling the CSS Beast with Sass
Wrangling the CSS Beast  with SassWrangling the CSS Beast  with Sass
Wrangling the CSS Beast with Sass
 
Finding a Better Way to CSS: Navigating Sass with Compass
Finding a Better Way to CSS: Navigating Sass with CompassFinding a Better Way to CSS: Navigating Sass with Compass
Finding a Better Way to CSS: Navigating Sass with Compass
 
Sass compass
Sass compassSass compass
Sass compass
 
Sass&compass
Sass&compassSass&compass
Sass&compass
 
This is a test
This is a testThis is a test
This is a test
 
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day DeutschlandLearn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
 
Learn to Love CSS3 [English]
Learn to Love CSS3 [English]Learn to Love CSS3 [English]
Learn to Love CSS3 [English]
 
Developing the Seaside ecosystem to increase its productivity
Developing the Seaside ecosystem to increase its productivityDeveloping the Seaside ecosystem to increase its productivity
Developing the Seaside ecosystem to increase its productivity
 
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
 
Ruby on Rails 3.1: Let's bring the fun back into web programing
Ruby on Rails 3.1: Let's bring the fun back into web programingRuby on Rails 3.1: Let's bring the fun back into web programing
Ruby on Rails 3.1: Let's bring the fun back into web programing
 
User Interface Development with Mulberry
User Interface Development with MulberryUser Interface Development with Mulberry
User Interface Development with Mulberry
 
How to Think Inside the Box: Programming Fixed Layout for E-Books
How to Think Inside the Box: Programming Fixed Layout for E-BooksHow to Think Inside the Box: Programming Fixed Layout for E-Books
How to Think Inside the Box: Programming Fixed Layout for E-Books
 
Creating Art with Codes - CSS3
Creating Art with Codes - CSS3Creating Art with Codes - CSS3
Creating Art with Codes - CSS3
 
Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"
Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"
Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"
 
popular posts widget
popular posts widgetpopular posts widget
popular posts widget
 
{LESS} Overview
{LESS} Overview{LESS} Overview
{LESS} Overview
 

Recently uploaded

The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Paola De la Torre
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Alan Dix
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 

Recently uploaded (20)

The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 

Organizing & Simplifying CSS [with Sass]

  • 1. Organizing & Simplifying your CSS [with Sass] Matt Puchlerz Refresh Chicago @mattpuchlerz May 26, 2010
  • 2. Organizing & Simplifying your CSS [with Sass] Matt Puchlerz Refresh Chicago @mattpuchlerz May 26, 2010
  • 3. Organizing & Simplifying your CSS [with Sass] Matt Puchlerz Refresh Chicago @mattpuchlerz May 26, 2010
  • 4. Organizing & Simplifying your CSS [with Sass] Matt Puchlerz Refresh Chicago @mattpuchlerz GeekFest MayJun 15 12:28:43 -0500 26, 2010 Tue 2010
  • 5.
  • 8. 1 11 2 12 Balance 3 .carousel { 4 width:80%;height:50px} 5 6 blockquote 7 { 8 position: relative; 9 padding: 0px; 1 color: #555; Images © Digital Web Magazine 0 }
  • 9. 1 11 2 12 Balance 3 .carousel { 4 width: 80%; 5 height: 50px; 6 } 7 8 blockquote { 9 position: relative; 1 padding: 0; Images © Digital Web Magazine 0 color: #555;
  • 10. 1 11 2 12 Rhythm 3 #branding { 4 width: 350px; 5 height: 150px; 6 padding: 0px; 7 position: absolute; 8 top: 15px; 9 left: 20px; 1 background: #c00; Images © Digital Web Magazine 0 color: #fff;
  • 11. 1 11 2 12 Rhythm 3 #branding { 4 background: #c00; 5 color: #fff; 6 height: 150px; 7 left: 20px; 8 padding: 0; 9 position: absolute; 1 top: 15px; Images © Digital Web Magazine 0 width: 350px;
  • 12. 1 11 2 12 Proximity 3 #header {…} 4 .error {…} 5 .error p {…} 6 7 .info {…} 8 .error ul {…} 9 .info p {…} 1 Images © Digital Web Magazine 0 #header a {…}
  • 13. 1 11 2 12 Proximity 3 .error {…} 4 .error p {…} 5 .error ul {…} 6 7 .info {…} 8 .info p {…} 9 1 #header {…} Images © Digital Web Magazine 0 #header a {…}
  • 15. <span class=“info”>Hi!</ .info { color: green } span { color: red }
  • 16. <span class=“info”>Hi!</ .info { color: green } span { color: red }
  • 17. <span class=“info”>Hi!</ .info { color: green } span { color: red }
  • 18. Point value based on: Style Attribute 1000 pts ID 100 pts Class or Attribute 10 pts Element 1 pt
  • 28. 1 11 2 12 3 p {…} 4 ul {…} 5 6 .error {…} 7 .notice {…} 8 9 input[type=“submit”] {…} 1 0 #container {…}
  • 29. 1 11 2 12 3 p {…} 4 ul {…} 5 6 .error {…} 7 .notice {…} 8 9 input[type=“submit”] {…} 1 0 #container {…}
  • 30. 1 11 2 12 3 p {…} 4 ul {…} 5 6 .error {…} 7 .notice {…} 8 9 input[type=“submit”] {…} 1 0 #container {…}
  • 31. 1 11 2 12 3 p {…} 4 ul {…} 5 6 .error {…} 7 .notice {…} 8 9 input[type=“submit”] {…} 1 0 #container {…}
  • 32. TIP #3 Try CSS meta- frameworks
  • 33.
  • 35. 1 11 2 12 Nesting 3 header { 4 font: { 5 size: 18px; 6 weight: bold; 7 } 8 9 h2 { 1 color: blue; 0 }
  • 36. 1 11 2 12 Variables 3 $orange: #c75000; 4 5 body { 6 background: $orange; 7 font-family: $ff; 8 line-height: $lh; 9 } 1 0
  • 37. 1 11 2 12 Math 3 $lh: 20px; 4 5 dl, ol, p, ul { 6 line-height: $lh; 7 margin-bottom: $lh; 8 } 9 1 #container { 0 padding: $lh / 2;
  • 38. 1 11 2 12 Functions 3 $red: #c00; 4 5 a{ 6 color: $red; 7 8 :hover { 9 color: darken($red); 1 } 0 }
  • 39. 1 11 2 12 Mixins 3 @mixin rounded($rad) { 4 -moz-border-radi… 5 -o-border-radius… 6 -webkit-border-r… 7 } 8 9 input[type=“submit”], 1 select, 0 textarea {
  • 40. 1 11 2 12 “SCSS” 3 $lh: 18px; Syntax 4 5 #feature { 6 padding: $lh; 7 width: $lh * 10; 8 9 &:hover { 1 @include rounded; 0 padding: $lh * 2;
  • 41. 1 11 2 12 “SASS” 3 $lh: 18px Syntax 4 5 #feature 6 padding: $lh 7 width: $lh * 10 8 9 &:hover 1 @include rounded 0 padding: $lh * 2
  • 42.
  • 43.
  • 44.
  • 45.
  • 46. Installing Sass via Haml $ gem install haml $ mv styles.css styles.scss $ sass --watch styles.scss:styles.css
  • 47. Installing Sass via Haml $ gem install haml $ mv styles.css styles.scss $ sass --watch styles.scss:styles.css
  • 48. Installing Sass via Haml $ gem install haml $ mv styles.css styles.scss $ sass --watch styles.scss:styles.css
  • 49. Installing Sass via Haml $ gem install haml $ mv styles.css styles.scss $ sass --watch styles.scss:styles.css
  • 50. TIP #1 Use design principles
  • 51. TIP #1 Use design principles TIP #2 Order by speci city
  • 52. TIP #1 Use design principles TIP #2 Order by speci city TIP #3 Try CSS meta-frameworks
  • 53. anks! Any questions? Matt Puchlerz Refresh Chicago @mattpuchlerz GeekFest MayJun 15 12:48:09 -0500 26, 2010 Tue 2010

Editor's Notes

  1. Web craftsman One of many software craftspeople at Obtiva
  2. Web craftsman One of many software craftspeople at Obtiva
  3. Web craftsman One of many software craftspeople at Obtiva
  4. Web craftsman One of many software craftspeople at Obtiva
  5. Web craftsman One of many software craftspeople at Obtiva
  6. Show of hands Gross! Point out nauseating parts; offer tips
  7. Show of hands Gross! Point out nauseating parts; offer tips
  8. Steve Smith (Ordered List) gave a talk on &amp;#x201C;Designing Code&amp;#x201D; Don&amp;#x2019;t just write CSS, sculpt it.
  9. Uneven brackets, indentation, spacing No alignment
  10. Could be whitespace between rules Within properties is &amp;#x201C;progressive rhythm&amp;#x201D;&amp;#x2026; How to improve?
  11. Alphabetize!
  12. Items in close proximity to, or aligned with one another, ought to be grouped by similarity. .error class in several spots #header in several spots
  13. Now that we are grouping well, be mindful of order
  14. CSS properties are applied based on the specificity of their selector and their order.
  15. Popular &amp;#x201C;frameworks&amp;#x201D; like Blueprint and 960.gs just give us defaults &amp;#x201C;Metaframeworks&amp;#x201D; alter the way we write CSS
  16. Nesting selectors and properties