Your SlideShare is downloading. ×
Big Frontends Made Simple
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Big Frontends Made Simple

2,220
views

Published on


1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,220
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
1
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Big Frontends Made Simple With Sass & Compass
  • 2. {less} vs. Sass Compass Structuring Projects Handling Browsers
  • 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. gem install haml Installation gem install less
  • 5. gem install? try http://www.ruby-lang.org/en/downloads/ first
  • 6. sass style.sass style.css css2sass style.css style.sass Running lessc style.less
  • 7. haml --rails your/app Ruby on Rails http://github.com/ cloudhead/more
  • 8. .class div :color blue or: .class div color: blue Syntax .class div { color: blue; }
  • 9. Result .class div { color: blue; }
  • 10. .class :color blue div :color red Cascading .class { color: blue; div { color: red; } }
  • 11. Result .class { color: blue; } .class div { color: red; }
  • 12. !pink = #c322bd #pink :color = !pink :background red Variables @pink: #c322bd; #pink { color: @pink; background: red; }
  • 13. Result #pink { color: #c322bd; background: red; }
  • 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. Result #important { font-weight: bold; color: red; }
  • 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. Mix-Ins (3) .red-text { color: red; a { color: blue; } } #important { .red-text; } =red-text :color red a :color blue #important +red-text
  • 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. 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. 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. =color(!x = 0) @if !x < 0 :color red @else :color black #colorful +color(-1) If Blocks ?
  • 22. @for !i from 1 through 3 .number-#{!i} :background = "url(number-#{!i}.png)" Loops ?
  • 23. :width = percentage(100px / 50px) :color = hsl(120, 100%, 50%) :height = floor(21px / 2) Functions (1) ?
  • 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. · 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. One more thing.
  • 27. {less} vs. Sass Compass Structuring Projects Handling Browsers
  • 28. Compass · Like Gems for Sass · http://github.com/chriseppstein/ compass/ · gem install compass
  • 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. Project
  • 31. Blueprint
  • 32. Using Blueprint !blueprint_grid_columns = 24 !blueprint_container_size = 950px !blueprint_grid_margin = 10px @import blueprint/modules/grid.sass #teaser +column(4)
  • 33. How Does It Work?
  • 34. Open the Gem
  • 35. Extend It Yourself.
  • 36. Own Gems
  • 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. {less} vs. Sass Compass Structuring Projects Handling Browsers
  • 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. 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. Ex. moviepilot.de
  • 42. Naming Conventions · sample-class, sample_class or sampleClass · Dash case is preferred in CSS · More important: be consistent
  • 43. {less} vs. Sass Compass Structuring Projects Handling Browsers
  • 44. ie.css? · You’ll just forget what you’ve done.
  • 45. Browser Hacks? ul.bad-styling li :padding 5px :*padding-left 7px
  • 46. Or Valid CSS? ul.bad-styling li :padding 5px .trident & :padding-left 7px
  • 47. Other Browsers ul.bad-styling li :padding 5px .trident & :padding-left 7px .webkit & :color red .gecko & :display none
  • 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. 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. Any questions?
  • 51. nico@hagenburger.nete-mail twitter blog first name last name