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 Crowley
http://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 need
to 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
• ad...
What are the basics?
.SCSS files
SCSS = Sassy CSS
.scss   .css
app/stylesheets/app.scss
body {
  font-family: Helvetica, Arial, sans-serif;
}

h1 {
  font-size: 28px;
  a {
     text-de...
public/stylesheets/app.css
body {
  font-family: Helvetica, Arial, sans-serif;
}

h1 {
  font-size: 28px;
}

h1 a {
  text...
Variables
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  pa...
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-colo...
Partials
app/stylesheets/app.scss
body {
  font-family: Helvetica, Arial, sans-serif;
}

@import "core/type";
app/stylesheets/core/type.scss
h1, h2, h3, h4, h5 {
  color: #444;
  margin: 12px 0;
}

h1 {
  font-size: 28px;
  margin: ...
public/stylesheets/app.css
body {
  font-family: Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5 {
  color: #444;
  ma...
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...
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;...
How do I organize
 my stylesheets?
app/stylesheets/app.scss
// Compass
@import "compass/reset";
@import "compass/utilities";
@import "compass/css3";

// Libr...
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/compa...
The End
Compass
Compass
Compass
Compass
Compass
Compass
Compass
Compass
Próximo SlideShare
Cargando en…5
×

de

Compass Slide 1 Compass Slide 2 Compass Slide 3 Compass Slide 4 Compass Slide 5 Compass Slide 6 Compass Slide 7 Compass Slide 8 Compass Slide 9 Compass Slide 10 Compass Slide 11 Compass Slide 12 Compass Slide 13 Compass Slide 14 Compass Slide 15 Compass Slide 16 Compass Slide 17 Compass Slide 18 Compass Slide 19 Compass Slide 20 Compass Slide 21 Compass Slide 22 Compass Slide 23 Compass Slide 24 Compass Slide 25 Compass Slide 26 Compass Slide 27 Compass Slide 28 Compass Slide 29 Compass Slide 30 Compass Slide 31 Compass Slide 32 Compass Slide 33 Compass Slide 34 Compass Slide 35 Compass Slide 36 Compass Slide 37 Compass Slide 38 Compass Slide 39 Compass Slide 40 Compass Slide 41 Compass Slide 42 Compass Slide 43 Compass Slide 44 Compass Slide 45 Compass Slide 46 Compass Slide 47 Compass Slide 48 Compass Slide 49 Compass Slide 50 Compass Slide 51 Compass Slide 52 Compass Slide 53 Compass Slide 54 Compass Slide 55 Compass Slide 56 Compass Slide 57 Compass Slide 58 Compass Slide 59 Compass Slide 60 Compass Slide 61 Compass Slide 62 Compass Slide 63 Compass Slide 64
Próximo SlideShare
Compass
Siguiente
Descargar para leer sin conexión y ver en pantalla completa.

1 recomendación

Compartir

Descargar para leer sin conexión

Compass

Descargar para leer sin conexión

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

Audiolibros relacionados

Gratis con una prueba de 30 días de Scribd

Ver todo

Compass

  1. 1. Patrick Crowley http://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 need to 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.scss body { 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.css body { 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.scss body { font-family: Helvetica, Arial, sans-serif; } @import "core/type";
  36. 36. 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; }
  37. 37. 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; }
  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
  • mandegary

    Jan. 28, 2014

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

Vistas

Total de vistas

2.062

En Slideshare

0

De embebidos

0

Número de embebidos

16

Acciones

Descargas

21

Compartidos

0

Comentarios

0

Me gusta

1

×