Compass
Upcoming SlideShare
Loading in...5
×
 

Compass

on

  • 1,606 views

Patrick Crowley shows how to turbo-charge your layouts with Compass, a lightweight stylesheet framework built on top of Haml and Sass.

Patrick Crowley shows how to turbo-charge your layouts with Compass, a lightweight stylesheet framework built on top of Haml and Sass.

Statistics

Views

Total Views
1,606
Views on SlideShare
1,606
Embed Views
0

Actions

Likes
1
Downloads
18
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Compass Compass Presentation Transcript

  • Patrick Crowleyhttp://github.com/mokolabs
  • Getting oriented with Compass
  • What is Compass?
  • • Framework for stylesheets
  • • Framework for stylesheets• Uses Haml & Sass
  • • Framework for stylesheets• Uses Haml & Sass• Well, really just Sass
  • • Framework for stylesheets• Uses Haml & Sass• Well, really just Sass• Lightweight
  • Why do we needto use Compass?
  • • Stylesheets are too long
  • • Stylesheets are too long• Stylesheets are too complex
  • • Stylesheets are too long• Stylesheets are too complex• Stylesheets are a fucking mess!
  • • Stylesheets are too long• Stylesheets are too complex• Stylesheets are a fucking mess!• Yeah, I’m talking to you.
  • But what if...
  • • I wanna use ERB
  • • I wanna use ERB• I think Sass has a weird syntax
  • • I wanna use ERB• I think Sass has a weird syntax• My styles are hand-crafted
  • • I wanna use ERB• I think Sass has a weird syntax• My styles are hand-crafted• I don’t have many styles yet
  • How do I get started?
  • • gem ‘compass’
  • • gem ‘compass’• bundle install compass
  • • gem ‘compass’• bundle install compass• compass version
  • • gem ‘compass’• bundle install compass• compass version• compass init rails /path/to/app
  • • gem ‘compass’• bundle install compass• compass version• compass init rails /path/to/app• tweak config/compass.rb
  • • gem ‘compass’• bundle install compass• compass version• compass init rails /path/to/app• tweak config/compass.rb• add app/stylesheets
  • What are the basics?
  • .SCSS files
  • SCSS = Sassy CSS
  • .scss .css
  • app/stylesheets/app.scssbody { font-family: Helvetica, Arial, sans-serif;}h1 { font-size: 28px; a { text-decoration: none; }}a { color: #FF1E00; &:hover { color: #336699; }}
  • public/stylesheets/app.cssbody { font-family: Helvetica, Arial, sans-serif;}h1 { font-size: 28px;}h1 a { text-decoration: none;}a { color: #FF1E00;}a:hover { color: #336699;}
  • Variables
  • $blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
  • .content-navigation { border-color: #3bbfce; color: #2b9eab;}.border { padding: 8px; margin: 8px; border-color: #3bbfce;}
  • Partials
  • app/stylesheets/app.scssbody { font-family: Helvetica, Arial, sans-serif;}@import "core/type";
  • app/stylesheets/core/type.scssh1, h2, h3, h4, h5 { color: #444; margin: 12px 0;}h1 { font-size: 28px; margin: 24px 0;}h2 { clear: left; font-size: 24px; margin: 18px 0;}
  • public/stylesheets/app.cssbody { font-family: Helvetica, Arial, sans-serif;}h1, h2, h3, h4, h5 { color: #444; margin: 12px 0;}h1 { font-size: 28px; margin: 24px 0;}h2 { clear: left; font-size: 24px; margin: 18px 0;}
  • Mixins
  • @mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000;}
  • .page-title { @include large-text; padding: 4px; margin-top: 10px;}
  • .page-title { font-family: Arial; font-size: 20px; font-weight: bold; color: #ff0000; padding: 4px; margin-top: 10px;}
  • Compass =Mixins on Charlie Sheen
  • WINNING!
  • • New CSS 3 hotness
  • • New CSS 3 hotness• Blueprint
  • • New CSS 3 hotness• Blueprint• Yahoo UI layouts
  • • New CSS 3 hotness• Blueprint• Yahoo UI layouts• Grid systems
  • • New CSS 3 hotness• Blueprint• Yahoo UI layouts• Grid systems• Fancy buttons
  • input[type=text],input[type=password],textarea { @include border-radius(6px); border: 1px solid #ccc; color: #333; font-size: 16px; padding: 3px; outline: none;}
  • How do I organize my stylesheets?
  • app/stylesheets/app.scss// Compass@import "compass/reset";@import "compass/utilities";@import "compass/css3";// Libraries@import "lib/jquery-ui";// Core@import "core/mixin";@import "core/colors";@import "core/tag";@import "core/layout";@import "core/message";@import "core/form";@import "core/widget";// Features@import "features/product";@import "features/user";
  • Resources
  • • http://compass-style.org
  • • http://compass-style.org• http://compass-style.org /docs/reference/compass/
  • • http://compass-style.org• http://compass-style.org /docs/reference/compass/• http://github.com /chriseppstein/compass
  • The End