SlideShare wird heruntergeladen. ×
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
Nächste SlideShare
Wird geladen 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,323

Published on

1 Comment
5 Gefällt mir
Statistiken
Notizen
Keine Downloads
Views
Gesamtviews
2,323
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

Inhalte melden
Als unangemessen gemeldet Als unangemessen melden
Als unangemessen melden

Wählen Sie Ihren Grund, warum Sie diese Präsentation als unangemessen melden.

Löschen
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

×