SlideShare a Scribd company logo
Compass

                                                                       Tim Riley
                                                                    openmonkey.com




My perspective: non-designer wanting a predictable world and to be able to knock together some decent looking things.
#main {
                                        width: 90%;
   #main                              }
     :width 90%                       #main p {
     p                                  border-style: solid;
       :border-style solid              border-width: 1px;
       :border-width 1px                border-color: #00f;
       :border-color #00f             }
       a                              #main p a {
         :text-decoration none          text-decoration: none;
         :font-weight bold              font-weight: bold;
       a:hover                        }
         :text-decoration underline   #main p a:hover {
                                        text-decoration: underline;
                                      }




Intro to Sass

Cleaner Syntax
Whitespace aware
Nested selectors
!main_bg= #46ar12
            !main_width= 40em

            #main
              :background-color= !main_bg
              :width= !main_width
              .sidebar
                :background-color= !main_bg + #333333
                :width= !main_width - 25em




Variables
Sass Mixins
                                                      =blue-border
                                                        :border
                                                          :color blue
                                                          :width 2px
                                                          :style dotted

                                                      .comment
                                                        +blue-border
                                                        :padding 2px
                                                        :margin 10px 0

                                                      .reply
                                                        +blue-border




Define groups of CSS attributes and include them inline in any selectors throughout your stylesheet.

Mixins are like CSS macros, or ruby modules or abstract classes.
=outer-table-borders(!width = 2px, !color = black)
                     :border= !width "solid" !color
                     thead
                        th
                           :border-bottom= !width "solid" !color
                     tfoot
                        th, td
                           :border-top= !width "solid" !color
                     th
                       &:first-child
                           :border-right= !width "solid" !color




In the 2.1 (development) version of Sass, mixins can take arguments, which makes them much more flexible.
CSS Frameworks



To reiterate from before: Iʼm a non-designer looking to extend my predictable world of backend code to the frontend.
I want to avoid the browser compatibility nightmares.

The frameworks come from the people who know better than me.
So for me, CSS frameworks are a godsend. At the foundation, they are collections of CSS utility classes for you to include in your makrup. They can
help you avert the unpleasant surprises of browser compatibility. Found some traction especially for creating grid-based layouts.
.container.showgrid
                           %h2 Tests for common HTML elements
                           %hr

                             .span-8
                               %p Lorem ipsum dolor sit
                               %p Lorem ipsum dolor sit

                             .span-8
                               %p.small Lorem ipsum dolor sit
                               %p Lorem ipsum dolor sit
                               %p.large Lorem ipsum dolor sit

                             .span-8.last
                               .box
                                 %p.last Aliquip ex ea commodo consequat
                               %blockquote
                                 %p Lorem ipsum dolor sit




But! They pollute your markup with “display classes” - non-semantic class names.

Also, they are little more than just a collection of CSS classes, not a true framework (EXPLAIN)
Compass is a framework that combines Sass with these CSS frameworks - and much more - to make it easier to develop stylesheets for semantic
markup.
Framework Ports
                                                            Blueprint
                                                             960.gs
                                                               YUI



Compass includes ports of several frameworks to Sass: Blueprint, 960.gs & YUI.
+container                                              !blueprint_grid_columns
             +column(n, last)                                        !blueprint_grid_width
             +last                                                   !blueprint_grid_margin
             +append(n)
             +prepend(n)
             +push(n)                                                +blueprint-typography
             +pull(n)                                                +blueprint-form




These are not just Sass conversions - the frameworks enhanced these using mixins to provide a DSL that allows you to hook into the frameworks
and provide smenatic markup
.container.showgrid
  %h2 Tests for common HTML elements
  %hr

  .span-8
    %p Lorem ipsum dolor sit
    %p Lorem ipsum dolor sit

  .span-8
    %p.small Lorem ipsum dolor sit
    %p Lorem ipsum dolor sit
    %p.large Lorem ipsum dolor sit

  .span-8.last
    .box
      %p.last Aliquip ex ea commodo consequat
    %blockquote
      %p Lorem ipsum dolor sit
#page                                                       #page
  %h2 Tests for common HTML elements                          +container
  %hr                                                         +showgrid

    #sales
      %p Lorem ipsum dolor sit                              #sales
      %p Lorem ipsum dolor sit                                +column(8)

    #engineering
      %p.small Lorem ipsum dolor sit                        #engineering
      %p Lorem ipsum dolor sit                                +column(8)
      %p.large Lorem ipsum dolor sit

    #support                                                #support
      .testimonial                                            +column(8, true)
        %p Aliquip ex ea commodo consequat                    .testimonial
      %blockquote                                               +box
        %p Lorem ipsum dolor sit                                %p
                                                                  +last


With Compass it is easy to write unobtrusive stylesheets.
Compass Core Lib
                  •      CSS Reset                                              •      Text replacement

                  •      Sticky Footer                                          •      Link styling

                  •      Clearfix                                                •      List styling (bullets,
                                                                                       orientation)
                  •      Tag Cloud
                                                                                •      Table styling
                  •      Cross-browser inline-                                         (background colours,
                                                                                       borders)
                         block




Besides the big frameworks, Compass provides its own useful core library, which includes support for:

CSS Resets, Sticky Footers, Clear Fixes, Tag Clouds, Text Replacement, Link Styling, Table Styling
#app-suite-links
  :float left
  +horizontal-list



.tickets
  +alternating-rows-and-columns(#ddffc8,#bbff91,#000)
Mix & Match

                                    @import         compass/reset.sass
                                    @import         compass/utilities.sass
                                    @import         blueprint/modules/colors.sass
                                    @import         blueprint/modules/grid.sass




Compass allows you to build your stylesheets efficiently insofar as you are never required to pull in all the libs or frameworks wholesale. You can
just pull in the parts that you want. Youʼre not confined to working with just one framework. It is easy to mix and match elements from each of these
framework ports and the core lib.
Installation

$ git clone git://github.com/nex3/haml.git

$ cd haml && sudo rake install

$ sudo gem install chriseppstein-compass 
  --source=http://gems.github.com/
Standalone Usage
$ compass -f blueprint project_dir

$ cd project_dir

$ compass -u # update the current project

$ compass -w # watch
Rails Integration
 $ rails project_dir

 $ cd project_dir

 $ haml --rails .

 $ compass --rails -f blueprint .
Sinatra Integration
gem 'haml', '~> 2.1'
require 'haml'

gem 'chriseppstein-compass'
require 'compass'

configure do
  Compass.configuration do |config|
    config.project_path = File.dirname(__FILE__)
    config.sass_dir     = File.join('views', 'stylesheets')
  end
end

get "/stylesheets/screen.css" do
  content_type 'text/css'
  sass :"stylesheets/screen", :sass => Compass.sass_engine_options
end
http://github.com/chriseppstein/compass/

http://github.com/timriley/unfuddle-helpdesk

More Related Content

Viewers also liked

Infrastructure In The Cloud Era
Infrastructure In The Cloud EraInfrastructure In The Cloud Era
Infrastructure In The Cloud Era
elliando dias
 
getting agile Final
getting agile Finalgetting agile Final
getting agile Final
elliando dias
 
Speak asia
Speak asiaSpeak asia
Speak asia
Anil Gahlot
 
12 L A E L A S T I C I D A D P R E C I O D E L A O F E R T A
12  L A  E L A S T I C I D A D   P R E C I O  D E  L A  O F E R T A12  L A  E L A S T I C I D A D   P R E C I O  D E  L A  O F E R T A
12 L A E L A S T I C I D A D P R E C I O D E L A O F E R T A
CARLOS MASSUH
 
WordPress SEO on Drugs!
WordPress SEO on Drugs!WordPress SEO on Drugs!
WordPress SEO on Drugs!
Simon Sundén
 
Clojure - A new Lisp
Clojure - A new LispClojure - A new Lisp
Clojure - A new Lisp
elliando dias
 
4 gwes2012
4 gwes20124 gwes2012
4 gwes2012
Carl Ford
 
How to go from Double Stuffed to International Fame
How to go from Double Stuffed to International FameHow to go from Double Stuffed to International Fame
How to go from Double Stuffed to International Fame
Adam Evers
 
How to ChoosHow to Choose A Web Application Framework
How to ChoosHow to Choose A Web Application FrameworkHow to ChoosHow to Choose A Web Application Framework
How to ChoosHow to Choose A Web Application Framework
elliando dias
 
Restructuring Technical Debt - A Software and System Quality Approach
Restructuring Technical Debt - A Software and System Quality ApproachRestructuring Technical Debt - A Software and System Quality Approach
Restructuring Technical Debt - A Software and System Quality Approach
Adnan Masood
 

Viewers also liked (10)

Infrastructure In The Cloud Era
Infrastructure In The Cloud EraInfrastructure In The Cloud Era
Infrastructure In The Cloud Era
 
getting agile Final
getting agile Finalgetting agile Final
getting agile Final
 
Speak asia
Speak asiaSpeak asia
Speak asia
 
12 L A E L A S T I C I D A D P R E C I O D E L A O F E R T A
12  L A  E L A S T I C I D A D   P R E C I O  D E  L A  O F E R T A12  L A  E L A S T I C I D A D   P R E C I O  D E  L A  O F E R T A
12 L A E L A S T I C I D A D P R E C I O D E L A O F E R T A
 
WordPress SEO on Drugs!
WordPress SEO on Drugs!WordPress SEO on Drugs!
WordPress SEO on Drugs!
 
Clojure - A new Lisp
Clojure - A new LispClojure - A new Lisp
Clojure - A new Lisp
 
4 gwes2012
4 gwes20124 gwes2012
4 gwes2012
 
How to go from Double Stuffed to International Fame
How to go from Double Stuffed to International FameHow to go from Double Stuffed to International Fame
How to go from Double Stuffed to International Fame
 
How to ChoosHow to Choose A Web Application Framework
How to ChoosHow to Choose A Web Application FrameworkHow to ChoosHow to Choose A Web Application Framework
How to ChoosHow to Choose A Web Application Framework
 
Restructuring Technical Debt - A Software and System Quality Approach
Restructuring Technical Debt - A Software and System Quality ApproachRestructuring Technical Debt - A Software and System Quality Approach
Restructuring Technical Debt - A Software and System Quality Approach
 

Similar to Compass And Sass(Tim Riley)

Sass compass
Sass compassSass compass
Sass compass
Nick Cooley
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid Prototyping
Even Wu
 
Accelerated Stylesheets
Accelerated StylesheetsAccelerated Stylesheets
Accelerated Stylesheets
Wynn Netherland
 
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)
emrox
 
Big Design Conference: CSS3
Big Design Conference: CSS3 Big Design Conference: CSS3
Big Design Conference: CSS3
Wynn Netherland
 
Finding your way with Sass+Compass
Finding your way with Sass+CompassFinding your way with Sass+Compass
Finding your way with Sass+Compass
drywallbmb
 
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassCSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & Compass
Lucien Lee
 
Intro to SASS CSS
Intro to SASS CSSIntro to SASS CSS
Intro to SASS CSS
Kianosh Pourian
 
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
 
Preprocessor presentation
Preprocessor presentationPreprocessor presentation
Preprocessor presentation
Mario Noble
 
Haml and Sass Introduction
Haml and Sass IntroductionHaml and Sass Introduction
Haml and Sass Introduction
Ethan Gunderson
 
Palestra pré processadores CSS
Palestra pré processadores CSSPalestra pré processadores CSS
Palestra pré processadores CSS
Just Digital
 
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and CompassBringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Claudina Sarahe
 
Sass Essentials
Sass EssentialsSass Essentials
Sass Essentials
romiguelangel
 
Advanced Technology for Web Application Design
Advanced Technology for Web Application DesignAdvanced Technology for Web Application Design
Advanced Technology for Web Application Design
Bryce Kerley
 
Cheat sheet blueprint
Cheat sheet blueprintCheat sheet blueprint
Cheat sheet blueprint
kjello
 
Blueprint V0.8by Gjms
Blueprint V0.8by GjmsBlueprint V0.8by Gjms
Blueprint V0.8by Gjms
guest8d5e9d
 
Bridging the gap between designers and developers at theguardian.com
Bridging the gap between designers and developers at theguardian.comBridging the gap between designers and developers at theguardian.com
Bridging the gap between designers and developers at theguardian.com
Kaelig Deloumeau-Prigent
 
Getting Started with Sass & Compass
Getting Started with Sass & CompassGetting Started with Sass & Compass
Getting Started with Sass & Compass
Rob Davarnia
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, Greensock
Marco Pinheiro
 

Similar to Compass And Sass(Tim Riley) (20)

Sass compass
Sass compassSass compass
Sass compass
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid Prototyping
 
Accelerated Stylesheets
Accelerated StylesheetsAccelerated Stylesheets
Accelerated Stylesheets
 
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)
 
Big Design Conference: CSS3
Big Design Conference: CSS3 Big Design Conference: CSS3
Big Design Conference: CSS3
 
Finding your way with Sass+Compass
Finding your way with Sass+CompassFinding your way with Sass+Compass
Finding your way with Sass+Compass
 
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassCSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & Compass
 
Intro to SASS CSS
Intro to SASS CSSIntro to SASS CSS
Intro to SASS CSS
 
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
 
Preprocessor presentation
Preprocessor presentationPreprocessor presentation
Preprocessor presentation
 
Haml and Sass Introduction
Haml and Sass IntroductionHaml and Sass Introduction
Haml and Sass Introduction
 
Palestra pré processadores CSS
Palestra pré processadores CSSPalestra pré processadores CSS
Palestra pré processadores CSS
 
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and CompassBringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
 
Sass Essentials
Sass EssentialsSass Essentials
Sass Essentials
 
Advanced Technology for Web Application Design
Advanced Technology for Web Application DesignAdvanced Technology for Web Application Design
Advanced Technology for Web Application Design
 
Cheat sheet blueprint
Cheat sheet blueprintCheat sheet blueprint
Cheat sheet blueprint
 
Blueprint V0.8by Gjms
Blueprint V0.8by GjmsBlueprint V0.8by Gjms
Blueprint V0.8by Gjms
 
Bridging the gap between designers and developers at theguardian.com
Bridging the gap between designers and developers at theguardian.comBridging the gap between designers and developers at theguardian.com
Bridging the gap between designers and developers at theguardian.com
 
Getting Started with Sass & Compass
Getting Started with Sass & CompassGetting Started with Sass & Compass
Getting Started with Sass & Compass
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, Greensock
 

More from elliando dias

Clojurescript slides
Clojurescript slidesClojurescript slides
Clojurescript slides
elliando dias
 
Why you should be excited about ClojureScript
Why you should be excited about ClojureScriptWhy you should be excited about ClojureScript
Why you should be excited about ClojureScript
elliando dias
 
Functional Programming with Immutable Data Structures
Functional Programming with Immutable Data StructuresFunctional Programming with Immutable Data Structures
Functional Programming with Immutable Data Structures
elliando dias
 
Nomenclatura e peças de container
Nomenclatura  e peças de containerNomenclatura  e peças de container
Nomenclatura e peças de container
elliando dias
 
Geometria Projetiva
Geometria ProjetivaGeometria Projetiva
Geometria Projetiva
elliando dias
 
Polyglot and Poly-paradigm Programming for Better Agility
Polyglot and Poly-paradigm Programming for Better AgilityPolyglot and Poly-paradigm Programming for Better Agility
Polyglot and Poly-paradigm Programming for Better Agility
elliando dias
 
Javascript Libraries
Javascript LibrariesJavascript Libraries
Javascript Libraries
elliando dias
 
How to Make an Eight Bit Computer and Save the World!
How to Make an Eight Bit Computer and Save the World!How to Make an Eight Bit Computer and Save the World!
How to Make an Eight Bit Computer and Save the World!
elliando dias
 
Ragel talk
Ragel talkRagel talk
Ragel talk
elliando dias
 
A Practical Guide to Connecting Hardware to the Web
A Practical Guide to Connecting Hardware to the WebA Practical Guide to Connecting Hardware to the Web
A Practical Guide to Connecting Hardware to the Web
elliando dias
 
Introdução ao Arduino
Introdução ao ArduinoIntrodução ao Arduino
Introdução ao Arduino
elliando dias
 
Minicurso arduino
Minicurso arduinoMinicurso arduino
Minicurso arduino
elliando dias
 
Incanter Data Sorcery
Incanter Data SorceryIncanter Data Sorcery
Incanter Data Sorcery
elliando dias
 
Rango
RangoRango
Fab.in.a.box - Fab Academy: Machine Design
Fab.in.a.box - Fab Academy: Machine DesignFab.in.a.box - Fab Academy: Machine Design
Fab.in.a.box - Fab Academy: Machine Design
elliando dias
 
The Digital Revolution: Machines that makes
The Digital Revolution: Machines that makesThe Digital Revolution: Machines that makes
The Digital Revolution: Machines that makes
elliando dias
 
Hadoop + Clojure
Hadoop + ClojureHadoop + Clojure
Hadoop + Clojure
elliando dias
 
Hadoop - Simple. Scalable.
Hadoop - Simple. Scalable.Hadoop - Simple. Scalable.
Hadoop - Simple. Scalable.
elliando dias
 
Hadoop and Hive Development at Facebook
Hadoop and Hive Development at FacebookHadoop and Hive Development at Facebook
Hadoop and Hive Development at Facebook
elliando dias
 
Multi-core Parallelization in Clojure - a Case Study
Multi-core Parallelization in Clojure - a Case StudyMulti-core Parallelization in Clojure - a Case Study
Multi-core Parallelization in Clojure - a Case Study
elliando dias
 

More from elliando dias (20)

Clojurescript slides
Clojurescript slidesClojurescript slides
Clojurescript slides
 
Why you should be excited about ClojureScript
Why you should be excited about ClojureScriptWhy you should be excited about ClojureScript
Why you should be excited about ClojureScript
 
Functional Programming with Immutable Data Structures
Functional Programming with Immutable Data StructuresFunctional Programming with Immutable Data Structures
Functional Programming with Immutable Data Structures
 
Nomenclatura e peças de container
Nomenclatura  e peças de containerNomenclatura  e peças de container
Nomenclatura e peças de container
 
Geometria Projetiva
Geometria ProjetivaGeometria Projetiva
Geometria Projetiva
 
Polyglot and Poly-paradigm Programming for Better Agility
Polyglot and Poly-paradigm Programming for Better AgilityPolyglot and Poly-paradigm Programming for Better Agility
Polyglot and Poly-paradigm Programming for Better Agility
 
Javascript Libraries
Javascript LibrariesJavascript Libraries
Javascript Libraries
 
How to Make an Eight Bit Computer and Save the World!
How to Make an Eight Bit Computer and Save the World!How to Make an Eight Bit Computer and Save the World!
How to Make an Eight Bit Computer and Save the World!
 
Ragel talk
Ragel talkRagel talk
Ragel talk
 
A Practical Guide to Connecting Hardware to the Web
A Practical Guide to Connecting Hardware to the WebA Practical Guide to Connecting Hardware to the Web
A Practical Guide to Connecting Hardware to the Web
 
Introdução ao Arduino
Introdução ao ArduinoIntrodução ao Arduino
Introdução ao Arduino
 
Minicurso arduino
Minicurso arduinoMinicurso arduino
Minicurso arduino
 
Incanter Data Sorcery
Incanter Data SorceryIncanter Data Sorcery
Incanter Data Sorcery
 
Rango
RangoRango
Rango
 
Fab.in.a.box - Fab Academy: Machine Design
Fab.in.a.box - Fab Academy: Machine DesignFab.in.a.box - Fab Academy: Machine Design
Fab.in.a.box - Fab Academy: Machine Design
 
The Digital Revolution: Machines that makes
The Digital Revolution: Machines that makesThe Digital Revolution: Machines that makes
The Digital Revolution: Machines that makes
 
Hadoop + Clojure
Hadoop + ClojureHadoop + Clojure
Hadoop + Clojure
 
Hadoop - Simple. Scalable.
Hadoop - Simple. Scalable.Hadoop - Simple. Scalable.
Hadoop - Simple. Scalable.
 
Hadoop and Hive Development at Facebook
Hadoop and Hive Development at FacebookHadoop and Hive Development at Facebook
Hadoop and Hive Development at Facebook
 
Multi-core Parallelization in Clojure - a Case Study
Multi-core Parallelization in Clojure - a Case StudyMulti-core Parallelization in Clojure - a Case Study
Multi-core Parallelization in Clojure - a Case Study
 

Recently uploaded

PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptxPRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
christinelarrosa
 
AWS Certified Solutions Architect Associate (SAA-C03)
AWS Certified Solutions Architect Associate (SAA-C03)AWS Certified Solutions Architect Associate (SAA-C03)
AWS Certified Solutions Architect Associate (SAA-C03)
HarpalGohil4
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
Ajin Abraham
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
Ivo Velitchkov
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Ukraine
 
Containers & AI - Beauty and the Beast!?!
Containers & AI - Beauty and the Beast!?!Containers & AI - Beauty and the Beast!?!
Containers & AI - Beauty and the Beast!?!
Tobias Schneck
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
Fwdays
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Neo4j
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 
"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
Fwdays
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
BibashShahi
 
AI in the Workplace Reskilling, Upskilling, and Future Work.pptx
AI in the Workplace Reskilling, Upskilling, and Future Work.pptxAI in the Workplace Reskilling, Upskilling, and Future Work.pptx
AI in the Workplace Reskilling, Upskilling, and Future Work.pptx
Sunil Jagani
 
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
Fwdays
 
Demystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through StorytellingDemystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through Storytelling
Enterprise Knowledge
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving
 
Day 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio FundamentalsDay 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio Fundamentals
UiPathCommunity
 
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
AlexanderRichford
 

Recently uploaded (20)

PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptxPRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
 
AWS Certified Solutions Architect Associate (SAA-C03)
AWS Certified Solutions Architect Associate (SAA-C03)AWS Certified Solutions Architect Associate (SAA-C03)
AWS Certified Solutions Architect Associate (SAA-C03)
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
 
Apps Break Data
Apps Break DataApps Break Data
Apps Break Data
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
 
Containers & AI - Beauty and the Beast!?!
Containers & AI - Beauty and the Beast!?!Containers & AI - Beauty and the Beast!?!
Containers & AI - Beauty and the Beast!?!
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 
"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
 
AI in the Workplace Reskilling, Upskilling, and Future Work.pptx
AI in the Workplace Reskilling, Upskilling, and Future Work.pptxAI in the Workplace Reskilling, Upskilling, and Future Work.pptx
AI in the Workplace Reskilling, Upskilling, and Future Work.pptx
 
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin..."$10 thousand per minute of downtime: architecture, queues, streaming and fin...
"$10 thousand per minute of downtime: architecture, queues, streaming and fin...
 
Demystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through StorytellingDemystifying Knowledge Management through Storytelling
Demystifying Knowledge Management through Storytelling
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
 
Day 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio FundamentalsDay 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio Fundamentals
 
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
 

Compass And Sass(Tim Riley)

  • 1. Compass Tim Riley openmonkey.com My perspective: non-designer wanting a predictable world and to be able to knock together some decent looking things.
  • 2. #main { width: 90%; #main } :width 90% #main p { p border-style: solid; :border-style solid border-width: 1px; :border-width 1px border-color: #00f; :border-color #00f } a #main p a { :text-decoration none text-decoration: none; :font-weight bold font-weight: bold; a:hover } :text-decoration underline #main p a:hover { text-decoration: underline; } Intro to Sass Cleaner Syntax Whitespace aware Nested selectors
  • 3. !main_bg= #46ar12 !main_width= 40em #main :background-color= !main_bg :width= !main_width .sidebar :background-color= !main_bg + #333333 :width= !main_width - 25em Variables
  • 4. Sass Mixins =blue-border :border :color blue :width 2px :style dotted .comment +blue-border :padding 2px :margin 10px 0 .reply +blue-border Define groups of CSS attributes and include them inline in any selectors throughout your stylesheet. Mixins are like CSS macros, or ruby modules or abstract classes.
  • 5. =outer-table-borders(!width = 2px, !color = black) :border= !width "solid" !color thead th :border-bottom= !width "solid" !color tfoot th, td :border-top= !width "solid" !color th &:first-child :border-right= !width "solid" !color In the 2.1 (development) version of Sass, mixins can take arguments, which makes them much more flexible.
  • 6. CSS Frameworks To reiterate from before: Iʼm a non-designer looking to extend my predictable world of backend code to the frontend.
  • 7. I want to avoid the browser compatibility nightmares. The frameworks come from the people who know better than me.
  • 8. So for me, CSS frameworks are a godsend. At the foundation, they are collections of CSS utility classes for you to include in your makrup. They can help you avert the unpleasant surprises of browser compatibility. Found some traction especially for creating grid-based layouts.
  • 9. .container.showgrid %h2 Tests for common HTML elements %hr .span-8 %p Lorem ipsum dolor sit %p Lorem ipsum dolor sit .span-8 %p.small Lorem ipsum dolor sit %p Lorem ipsum dolor sit %p.large Lorem ipsum dolor sit .span-8.last .box %p.last Aliquip ex ea commodo consequat %blockquote %p Lorem ipsum dolor sit But! They pollute your markup with “display classes” - non-semantic class names. Also, they are little more than just a collection of CSS classes, not a true framework (EXPLAIN)
  • 10. Compass is a framework that combines Sass with these CSS frameworks - and much more - to make it easier to develop stylesheets for semantic markup.
  • 11. Framework Ports Blueprint 960.gs YUI Compass includes ports of several frameworks to Sass: Blueprint, 960.gs & YUI.
  • 12. +container !blueprint_grid_columns +column(n, last) !blueprint_grid_width +last !blueprint_grid_margin +append(n) +prepend(n) +push(n) +blueprint-typography +pull(n) +blueprint-form These are not just Sass conversions - the frameworks enhanced these using mixins to provide a DSL that allows you to hook into the frameworks and provide smenatic markup
  • 13. .container.showgrid %h2 Tests for common HTML elements %hr .span-8 %p Lorem ipsum dolor sit %p Lorem ipsum dolor sit .span-8 %p.small Lorem ipsum dolor sit %p Lorem ipsum dolor sit %p.large Lorem ipsum dolor sit .span-8.last .box %p.last Aliquip ex ea commodo consequat %blockquote %p Lorem ipsum dolor sit
  • 14. #page #page %h2 Tests for common HTML elements +container %hr +showgrid #sales %p Lorem ipsum dolor sit #sales %p Lorem ipsum dolor sit +column(8) #engineering %p.small Lorem ipsum dolor sit #engineering %p Lorem ipsum dolor sit +column(8) %p.large Lorem ipsum dolor sit #support #support .testimonial +column(8, true) %p Aliquip ex ea commodo consequat .testimonial %blockquote +box %p Lorem ipsum dolor sit %p +last With Compass it is easy to write unobtrusive stylesheets.
  • 15. Compass Core Lib • CSS Reset • Text replacement • Sticky Footer • Link styling • Clearfix • List styling (bullets, orientation) • Tag Cloud • Table styling • Cross-browser inline- (background colours, borders) block Besides the big frameworks, Compass provides its own useful core library, which includes support for: CSS Resets, Sticky Footers, Clear Fixes, Tag Clouds, Text Replacement, Link Styling, Table Styling
  • 16. #app-suite-links :float left +horizontal-list .tickets +alternating-rows-and-columns(#ddffc8,#bbff91,#000)
  • 17. Mix & Match @import compass/reset.sass @import compass/utilities.sass @import blueprint/modules/colors.sass @import blueprint/modules/grid.sass Compass allows you to build your stylesheets efficiently insofar as you are never required to pull in all the libs or frameworks wholesale. You can just pull in the parts that you want. Youʼre not confined to working with just one framework. It is easy to mix and match elements from each of these framework ports and the core lib.
  • 18. Installation $ git clone git://github.com/nex3/haml.git $ cd haml && sudo rake install $ sudo gem install chriseppstein-compass --source=http://gems.github.com/
  • 19. Standalone Usage $ compass -f blueprint project_dir $ cd project_dir $ compass -u # update the current project $ compass -w # watch
  • 20. Rails Integration $ rails project_dir $ cd project_dir $ haml --rails . $ compass --rails -f blueprint .
  • 21. Sinatra Integration gem 'haml', '~> 2.1' require 'haml' gem 'chriseppstein-compass' require 'compass' configure do Compass.configuration do |config| config.project_path = File.dirname(__FILE__) config.sass_dir = File.join('views', 'stylesheets') end end get "/stylesheets/screen.css" do content_type 'text/css' sass :"stylesheets/screen", :sass => Compass.sass_engine_options end