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

1. Patrick Crowley
http://github.com/mokolabs

2. Getting oriented
with Compass

3. What is Compass?

5. • Framework for stylesheets

6. • Framework for stylesheets
• Uses Haml & Sass

7. • Framework for stylesheets
• Uses Haml & Sass
• Well, really just Sass

8. • Framework for stylesheets
• Uses Haml & Sass
• Well, really just Sass
• Lightweight

9. Why do we need
to use Compass?

11. • Stylesheets are too long

12. • Stylesheets are too long
• Stylesheets are too complex

13. • Stylesheets are too long
• Stylesheets are too complex
• Stylesheets are a fucking mess!

14. • Stylesheets are too long
• Stylesheets are too complex
• Stylesheets are a fucking mess!
• Yeah, I’m talking to you.

15. But what if...

17. • I wanna use ERB

18. • I wanna use ERB
• I think Sass has a weird syntax

19. • I wanna use ERB
• I think Sass has a weird syntax
• My styles are hand-crafted

20. • I wanna use ERB
• I think Sass has a weird syntax
• My styles are hand-crafted
• I don’t have many styles yet

22. How do I get started?

24. • gem ‘compass’

25. • gem ‘compass’
• bundle install compass

26. • gem ‘compass’
• bundle install compass
• compass version

27. • gem ‘compass’
• bundle install compass
• compass version
• compass init rails /path/to/app

28. • gem ‘compass’
• bundle install compass
• compass version
• compass init rails /path/to/app
• tweak config/compass.rb

29. • gem ‘compass’
• bundle install compass
• compass version
• compass init rails /path/to/app
• tweak config/compass.rb
• add app/stylesheets

30. What are the basics?

31. .SCSS files

32. SCSS = Sassy CSS

33. .scss .css

34. app/stylesheets/app.scss
body {
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 28px;
a {
text-decoration: none;
}
}
a {
color: #FF1E00;
&:hover {
color: #336699;
}
}

35. public/stylesheets/app.css
body {
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 28px;
}
h1 a {
text-decoration: none;
}
a {
color: #FF1E00;
}
a:hover {
color: #336699;
}

36. Variables

37. $blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color: darken($blue, 9%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}

38. .content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}

39. Partials

40. app/stylesheets/app.scss
body {
font-family: Helvetica, Arial, sans-serif;
}
@import "core/type";

41. app/stylesheets/core/type.scss
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;
}

42. public/stylesheets/app.css
body {
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;
}

43. Mixins

44. @mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}

45. .page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}

46. .page-title {
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ff0000;
padding: 4px;
margin-top: 10px;
}

47. Compass =
Mixins on Charlie Sheen

48. WINNING!

50. • New CSS 3 hotness

51. • New CSS 3 hotness
• Blueprint

52. • New CSS 3 hotness
• Blueprint
• Yahoo UI layouts

53. • New CSS 3 hotness
• Blueprint
• Yahoo UI layouts
• Grid systems

54. • New CSS 3 hotness
• Blueprint
• Yahoo UI layouts
• Grid systems
• Fancy buttons

55. input[type=text],
input[type=password],
textarea {
@include border-radius(6px);
border: 1px solid #ccc;
color: #333;
font-size: 16px;
padding: 3px;
outline: none;
}

56. How do I organize
my stylesheets?

58. 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";

59. Resources

61. • http://compass-style.org

62. • http://compass-style.org
• http://compass-style.org
/docs/reference/compass/

63. • http://compass-style.org
• http://compass-style.org
/docs/reference/compass/
• http://github.com
/chriseppstein/compass

64. The End