Upload
elliando-dias
View
118
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
Compass
Tim Rileyopenmonkey.com
My perspective: non-designer wanting a predictable world and to be able to knock together some decent looking things.
#main :width 90% p :border-style solid :border-width 1px :border-color #00f a :text-decoration none :font-weight bold a:hover :text-decoration underline
#main { width: 90%;}#main p { border-style: solid; border-width: 1px; border-color: #00f;}#main p a { text-decoration: none; font-weight: bold;}#main p a:hover { text-decoration: underline;}
Intro to Sass
Cleaner SyntaxWhitespace awareNested 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
=blue-border :border :color blue :width 2px :style dotted
.comment +blue-border :padding 2px :margin 10px 0
.reply +blue-border
Sass Mixins
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 PortsBlueprint
960.gsYUI
Compass includes ports of several frameworks to Sass: Blueprint, 960.gs & YUI.
+container+column(n, last)+last+append(n)+prepend(n)+push(n)+pull(n)
!blueprint_grid_columns!blueprint_grid_width!blueprint_grid_margin
+blueprint-typography+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 %h2 Tests for common HTML elements %hr #sales %p Lorem ipsum dolor sit %p Lorem ipsum dolor sit #engineering %p.small Lorem ipsum dolor sit %p Lorem ipsum dolor sit %p.large Lorem ipsum dolor sit #support .testimonial %p Aliquip ex ea commodo consequat %blockquote %p Lorem ipsum dolor sit
#page +container +showgrid
#sales +column(8)
#engineering +column(8)
#support +column(8, true) .testimonial +box %p +last
With Compass it is easy to write unobtrusive stylesheets.
Compass Core Lib• CSS Reset
• Sticky Footer
• Clearfix
• Tag Cloud
• Cross-browser inline-block
• Text replacement
• Link styling
• List styling (bullets, orientation)
• Table styling (background colours, borders)
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/
$ compass -f blueprint project_dir
$ cd project_dir
$ compass -u # update the current project
$ compass -w # watch
Standalone Usage
Rails Integration
$ rails project_dir
$ cd project_dir
$ haml --rails .
$ compass --rails -f blueprint .
Sinatra Integrationgem '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') endend
get "/stylesheets/screen.css" do content_type 'text/css' sass :"stylesheets/screen", :sass => Compass.sass_engine_optionsend
http://github.com/chriseppstein/compass/
http://github.com/timriley/unfuddle-helpdesk