Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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

3.711 Aufrufe

Veröffentlicht am

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

×