Compass

1,706 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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,706
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×