Your SlideShare is downloading. ×
Compass
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Compass

1,335

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,335
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×