Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
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
Próxima SlideShare
Cargando en…5
×

Compass

1.865 visualizaciones

Publicado el

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

Publicado en: Tecnología
  • Sé el primero en comentar

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

×