Your SlideShare is downloading. ×
0
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
Big Frontends Made Simple
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,325

Published on

1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,325
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
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

×