Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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...
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...
public/stylesheets/app.cssbody {  font-family: Helvetica, Arial, sans-serif;}h1 {  font-size: 28px;}h1 a {  text-decoratio...
Variables
$blue: #3bbfce;$margin: 16px;.content-navigation {  border-color: $blue;  color: darken($blue, 9%);}.border {  padding: $m...
.content-navigation {  border-color: #3bbfce;  color: #2b9eab;}.border {  padding: 8px;  margin: 8px;  border-color: #3bbf...
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;}...
public/stylesheets/app.cssbody {  font-family: Helvetica, Arial, sans-serif;}h1, h2, h3, h4, h5 {  color: #444;  margin: 1...
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;  fon...
How do I organize my stylesheets?
app/stylesheets/app.scss// Compass@import "compass/reset";@import "compass/utilities";@import "compass/css3";// Libraries@...
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
Compass
Compass
Compass
Compass
Compass
Compass
Compass
Compass
Upcoming SlideShare
Loading in …5
×

Compass

1,857 views

Published on

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

Published in: Technology
  • Be the first to comment

Compass

  1. 1. Patrick Crowleyhttp://github.com/mokolabs
  2. 2. Getting oriented with Compass
  3. 3. What is Compass?
  4. 4. • Framework for stylesheets
  5. 5. • Framework for stylesheets• Uses Haml & Sass
  6. 6. • Framework for stylesheets• Uses Haml & Sass• Well, really just Sass
  7. 7. • Framework for stylesheets• Uses Haml & Sass• Well, really just Sass• Lightweight
  8. 8. Why do we needto use Compass?
  9. 9. • Stylesheets are too long
  10. 10. • Stylesheets are too long• Stylesheets are too complex
  11. 11. • Stylesheets are too long• Stylesheets are too complex• Stylesheets are a fucking mess!
  12. 12. • Stylesheets are too long• Stylesheets are too complex• Stylesheets are a fucking mess!• Yeah, I’m talking to you.
  13. 13. But what if...
  14. 14. • I wanna use ERB
  15. 15. • I wanna use ERB• I think Sass has a weird syntax
  16. 16. • I wanna use ERB• I think Sass has a weird syntax• My styles are hand-crafted
  17. 17. • I wanna use ERB• I think Sass has a weird syntax• My styles are hand-crafted• I don’t have many styles yet
  18. 18. How do I get started?
  19. 19. • gem ‘compass’
  20. 20. • gem ‘compass’• bundle install compass
  21. 21. • gem ‘compass’• bundle install compass• compass version
  22. 22. • gem ‘compass’• bundle install compass• compass version• compass init rails /path/to/app
  23. 23. • gem ‘compass’• bundle install compass• compass version• compass init rails /path/to/app• tweak config/compass.rb
  24. 24. • gem ‘compass’• bundle install compass• compass version• compass init rails /path/to/app• tweak config/compass.rb• add app/stylesheets
  25. 25. What are the basics?
  26. 26. .SCSS files
  27. 27. SCSS = Sassy CSS
  28. 28. .scss .css
  29. 29. app/stylesheets/app.scssbody { font-family: Helvetica, Arial, sans-serif;}h1 { font-size: 28px; a { text-decoration: none; }}a { color: #FF1E00; &:hover { color: #336699; }}
  30. 30. 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;}
  31. 31. Variables
  32. 32. $blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
  33. 33. .content-navigation { border-color: #3bbfce; color: #2b9eab;}.border { padding: 8px; margin: 8px; border-color: #3bbfce;}
  34. 34. Partials
  35. 35. app/stylesheets/app.scssbody { font-family: Helvetica, Arial, sans-serif;}@import "core/type";
  36. 36. 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;}
  37. 37. 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;}
  38. 38. Mixins
  39. 39. @mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000;}
  40. 40. .page-title { @include large-text; padding: 4px; margin-top: 10px;}
  41. 41. .page-title { font-family: Arial; font-size: 20px; font-weight: bold; color: #ff0000; padding: 4px; margin-top: 10px;}
  42. 42. Compass =Mixins on Charlie Sheen
  43. 43. WINNING!
  44. 44. • New CSS 3 hotness
  45. 45. • New CSS 3 hotness• Blueprint
  46. 46. • New CSS 3 hotness• Blueprint• Yahoo UI layouts
  47. 47. • New CSS 3 hotness• Blueprint• Yahoo UI layouts• Grid systems
  48. 48. • New CSS 3 hotness• Blueprint• Yahoo UI layouts• Grid systems• Fancy buttons
  49. 49. input[type=text],input[type=password],textarea { @include border-radius(6px); border: 1px solid #ccc; color: #333; font-size: 16px; padding: 3px; outline: none;}
  50. 50. How do I organize my stylesheets?
  51. 51. 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";
  52. 52. Resources
  53. 53. • http://compass-style.org
  54. 54. • http://compass-style.org• http://compass-style.org /docs/reference/compass/
  55. 55. • http://compass-style.org• http://compass-style.org /docs/reference/compass/• http://github.com /chriseppstein/compass
  56. 56. The End

×