Big Frontends
Made Simple
With Sass & Compass
{less} vs. Sass
Compass
Structuring Projects
Handling Browsers
http://sass-lang.org
http://github.com/nex3/haml
Combined with Haml
Overview
http://lesscss.org
https://github.com/cloudhe...
gem install haml
Installation
gem install less
gem install?
try
http://www.ruby-lang.org/en/downloads/
first
sass style.sass style.css
css2sass style.css 
style.sass
Running
lessc style.less
haml --rails your/app
Ruby on Rails
http://github.com/
cloudhead/more
.class div
:color blue
or:
.class div
color: blue
Syntax
.class div {
color: blue;
}
Result
.class div {
color: blue;
}
.class
:color blue
div
:color red
Cascading
.class {
color: blue;
div {
color: red;
}
}
Result
.class {
color: blue;
}
.class div {
color: red;
}
!pink = #c322bd
#pink
:color = !pink
:background red
Variables
@pink: #c322bd;
#pink {
color: @pink;
background: red;
}
Result
#pink {
color: #c322bd;
background: red;
}
=red-text
:color red
#important
:font-weight bold
+red-text
Mix-Ins (1)
.red-text {
color: red;
}
#important {
font-weight...
Result
#important {
font-weight: bold;
color: red;
}
Mix-Ins (2)
.red-text(@color: red) {
color: @color;
}
#important {
font-weight: bold;
.red-text(green);
}
=red-text(!color...
Mix-Ins (3)
.red-text {
color: red;
a {
color: blue;
}
}
#important {
.red-text;
}
=red-text
:color red
a
:color blue
#imp...
Mix-Ins (4)
.red-text(@color: red) {
color: @color;
a {
color: blue;
}
}
#important {
.red-text(green);
}
=red-text(!color...
Mix-Ins (5)
.hover-link {
text-decoration: none;
:hover {
text-d…: underline;
}
}
#important a {
.hover-link;
}
= hover-li...
height: 22px / 2;
color: #fff * 3;
background-position:
10px 30px / 2;
:height = 22px / 2
:color = #fff * 3
:background-po...
=color(!x = 0)
@if !x < 0
:color red
@else
:color black
#colorful
+color(-1)
If Blocks
?
@for !i from 1 through 3
.number-#{!i}
:background =
"url(number-#{!i}.png)"
Loops
?
:width = percentage(100px / 50px)
:color = hsl(120, 100%, 50%)
:height = floor(21px / 2)
Functions (1)
?
!c1 = #a3b400
!c2 = #2300ae
!c3 = mix(!c1, !c2)
!c4 = mix(!c1, !c2, 30%)
!c5 = darken(!c1, 10%)
!c6 = desaturate(!c1, 5%)
...
· Good for developers
· Mix-ins just work
· Good for people who hate {, } and ;
— p. e. German keyboard users
· New featur...
One more thing.
{less} vs. Sass
Compass
Structuring Projects
Handling Browsers
Compass
· Like Gems for Sass
· http://github.com/chriseppstein/
compass/
· gem install compass
Setup for Rails
rails app -m http://compass-style.org/rails/installer
rake rails:template LOCATION=http://compass-style.or...
Project
Blueprint
Using Blueprint
!blueprint_grid_columns = 24
!blueprint_container_size = 950px
!blueprint_grid_margin = 10px
@import bluep...
How Does It Work?
Open the Gem
Extend It Yourself.
Own Gems
Overview
· Modular structure
· Mix different frameworks
· Uses only code needed (small CSS files)
· Easy to extend as Gem
...
{less} vs. Sass
Compass
Structuring Projects
Handling Browsers
Folders
app
stylesheets
basics
Grid, typography, colors, borders, common mix-ins
partials
Elements used on the side
plugin...
File Names
screen.sass
basics/_grid.sass
basics/_typography.sass
basics/_borders.sass
partials/_header.sass
partials/_boxe...
Ex. moviepilot.de
Naming Conventions
· sample-class, sample_class or
sampleClass
· Dash case is preferred in CSS
· More important: be consis...
{less} vs. Sass
Compass
Structuring Projects
Handling Browsers
ie.css?
· You’ll just forget what you’ve done.
Browser Hacks?
ul.bad-styling
li
:padding 5px
:*padding-left 7px
Or Valid CSS?
ul.bad-styling
li
:padding 5px
.trident &
:padding-left 7px
Other Browsers
ul.bad-styling
li
:padding 5px
.trident &
:padding-left 7px
.webkit &
:color red
.gecko &
:display none
Set Browser Class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Nico Hagenburger</title>
<link hre...
Overview
· Every browser fix is close to the normal
definition
· Works with Safari, Firefox and Opera
· Valid CSS
· Only o...
Any questions?
nico@hagenburger.nete-mail
twitter
blog
first name
last name
Nächste SlideShare
Wird geladen in ...5
×

Big Frontends Made Simple

2,367

Published on

1 Comment
5 Gefällt mir
Statistiken
Notizen
Keine Downloads
Views
Gesamtviews
2,367
Bei Slideshare
0
Aus Einbettungen
0
Anzahl an Einbettungen
0
Aktionen
Geteilt
0
Downloads
15
Kommentare
1
Gefällt mir
5
Einbettungen 0
No embeds

No notes for slide

Big Frontends Made Simple

  1. 1. Big Frontends Made Simple With Sass & Compass
  2. 2. {less} vs. Sass Compass Structuring Projects Handling Browsers
  3. 3. http://sass-lang.org http://github.com/nex3/haml Combined with Haml Overview http://lesscss.org https://github.com/cloudhead/less Inspired by Sass
  4. 4. gem install haml Installation gem install less
  5. 5. gem install? try http://www.ruby-lang.org/en/downloads/ first
  6. 6. sass style.sass style.css css2sass style.css style.sass Running lessc style.less
  7. 7. haml --rails your/app Ruby on Rails http://github.com/ cloudhead/more
  8. 8. .class div :color blue or: .class div color: blue Syntax .class div { color: blue; }
  9. 9. Result .class div { color: blue; }
  10. 10. .class :color blue div :color red Cascading .class { color: blue; div { color: red; } }
  11. 11. Result .class { color: blue; } .class div { color: red; }
  12. 12. !pink = #c322bd #pink :color = !pink :background red Variables @pink: #c322bd; #pink { color: @pink; background: red; }
  13. 13. Result #pink { color: #c322bd; background: red; }
  14. 14. =red-text :color red #important :font-weight bold +red-text Mix-Ins (1) .red-text { color: red; } #important { font-weight: bold; .red-text; }
  15. 15. Result #important { font-weight: bold; color: red; }
  16. 16. Mix-Ins (2) .red-text(@color: red) { color: @color; } #important { font-weight: bold; .red-text(green); } =red-text(!color = "red") :color = !color #important :font-weight bold +red-text("green")
  17. 17. Mix-Ins (3) .red-text { color: red; a { color: blue; } } #important { .red-text; } =red-text :color red a :color blue #important +red-text
  18. 18. Mix-Ins (4) .red-text(@color: red) { color: @color; a { color: blue; } } #important { .red-text(green); } =red-text(!color = "red") :color = !color a :color blue #important +red-text("green") won’t work with variables
  19. 19. Mix-Ins (5) .hover-link { text-decoration: none; :hover { text-d…: underline; } } #important a { .hover-link; } = hover-link :text-decoration none &:hover :text-d… underline #important a +hover-link
  20. 20. height: 22px / 2; color: #fff * 3; background-position: 10px 30px / 2; :height = 22px / 2 :color = #fff * 3 :background-position = 10px 30px / 2 Math won’t work as expected
  21. 21. =color(!x = 0) @if !x < 0 :color red @else :color black #colorful +color(-1) If Blocks ?
  22. 22. @for !i from 1 through 3 .number-#{!i} :background = "url(number-#{!i}.png)" Loops ?
  23. 23. :width = percentage(100px / 50px) :color = hsl(120, 100%, 50%) :height = floor(21px / 2) Functions (1) ?
  24. 24. !c1 = #a3b400 !c2 = #2300ae !c3 = mix(!c1, !c2) !c4 = mix(!c1, !c2, 30%) !c5 = darken(!c1, 10%) !c6 = desaturate(!c1, 5%) !c7 = complement(!c1) Functions (2) ? Sass 3.0 till then: gem install compass-colors
  25. 25. · Good for developers · Mix-ins just work · Good for people who hate {, } and ; — p. e. German keyboard users · New features come out frequently · Syntax changes frequently · More complex syntax · Annoying “=” Overview · Easy to learn · Better syntax for variables · Classes used as a mix-in won’t be rendered (maybe confusing) · Still complicated CSS syntax with {, } and ; · Problems with variables in mix-ins · No consistent use of cascading + – + –
  26. 26. One more thing.
  27. 27. {less} vs. Sass Compass Structuring Projects Handling Browsers
  28. 28. Compass · Like Gems for Sass · http://github.com/chriseppstein/ compass/ · gem install compass
  29. 29. Setup for Rails rails app -m http://compass-style.org/rails/installer rake rails:template LOCATION=http://compass-style.org/ rails/installer =================================================== Welcome to the Compass Installer for Ruby on Rails! =================================================== What CSS Framework do you want to use with Compass? (default: 'blueprint') blueprint Where would you like to keep your sass files within your project? (default: 'app/stylesheets') Where would you like Compass to store your compiled css files? (default: 'public/stylesheets/compiled') public/stylesheets
  30. 30. Project
  31. 31. Blueprint
  32. 32. Using Blueprint !blueprint_grid_columns = 24 !blueprint_container_size = 950px !blueprint_grid_margin = 10px @import blueprint/modules/grid.sass #teaser +column(4)
  33. 33. How Does It Work?
  34. 34. Open the Gem
  35. 35. Extend It Yourself.
  36. 36. Own Gems
  37. 37. Overview · Modular structure · Mix different frameworks · Uses only code needed (small CSS files) · Easy to extend as Gem · No silly formatting classes needed (e. g. “.two-colums”)
  38. 38. {less} vs. Sass Compass Structuring Projects Handling Browsers
  39. 39. Folders app stylesheets basics Grid, typography, colors, borders, common mix-ins partials Elements used on the side plugins External converted (css2sass) stylesheets (e. g. jQuery plugins)
  40. 40. File Names screen.sass basics/_grid.sass basics/_typography.sass basics/_borders.sass partials/_header.sass partials/_boxes.sass plugins/_lightbox.sass Files prefixed with underscore won’t be rendered as CSS, but will be available for including.
  41. 41. Ex. moviepilot.de
  42. 42. Naming Conventions · sample-class, sample_class or sampleClass · Dash case is preferred in CSS · More important: be consistent
  43. 43. {less} vs. Sass Compass Structuring Projects Handling Browsers
  44. 44. ie.css? · You’ll just forget what you’ve done.
  45. 45. Browser Hacks? ul.bad-styling li :padding 5px :*padding-left 7px
  46. 46. Or Valid CSS? ul.bad-styling li :padding 5px .trident & :padding-left 7px
  47. 47. Other Browsers ul.bad-styling li :padding 5px .trident & :padding-left 7px .webkit & :color red .gecko & :display none
  48. 48. Set Browser Class <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Nico Hagenburger</title> <link href="/stylesheets/screen.css?1264808640" media="screen" rel="stylesheet" type="text/css"> </head> <body class="webkit"> </body> </html>
  49. 49. Overview · Every browser fix is close to the normal definition · Works with Safari, Firefox and Opera · Valid CSS · Only one HTTP request · No conditional comments needed
  50. 50. Any questions?
  51. 51. nico@hagenburger.nete-mail twitter blog first name last name
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×