• Gefällt mir

Lädt ...

Flash Player 9 (oder höher) wird benötigt, um Präsentationen anzeigen zu können.
Wir haben festgestellt, dass Sie diese Software nicht auf Ihrem Computer haben. Um sie zu installieren, klicken Sie hier.

Big Frontends Made Simple

  • 2,107 Views
Hochgeladen am

 

  • Full Name Full Name Comment goes here.
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
Keine Downloads

Views

Gesamtviews
2,107
Bei Slideshare
0
Aus Einbettungen
0
Anzahl an Einbettungen
0

Aktionen

Geteilt
Downloads
14
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. Overview http://lesscss.org http://sass-lang.org https://github.com/cloudhead/less http://github.com/nex3/haml Inspired by Sass Combined with Haml
  • 4. Installation gem install less gem install haml
  • 5. gem install? try http://www.ruby-lang.org/en/downloads/ first
  • 6. Running lessc style.less sass style.sass style.css css2sass style.css style.sass
  • 7. Ruby on Rails http://github.com/ haml --rails your/app cloudhead/more
  • 8. Syntax .class div { .class div color: blue; :color blue } or: .class div color: blue
  • 9. Result .class div { color: blue; }
  • 10. Cascading .class { .class color: blue; :color blue div { color: red; div } :color red }
  • 11. Result .class { color: blue; } .class div { color: red; }
  • 12. Variables @pink: #c322bd; !pink = #c322bd #pink { #pink color: @pink; :color = !pink background: red; :background red }
  • 13. Result #pink { color: #c322bd; background: red; }
  • 14. Mix-Ins (1) .red-text { =red-text color: red; :color red } #important #important { :font-weight bold font-weight: bold; +red-text .red-text; }
  • 15. Result #important { font-weight: bold; color: red; }
  • 16. Mix-Ins (2) .red-text(@color: red) { =red-text(!color = "red") color: @color; :color = !color } #important #important { :font-weight bold font-weight: bold; +red-text("green") .red-text(green); }
  • 17. Mix-Ins (3) .red-text { =red-text color: red; :color red a { a color: blue; :color blue } } #important +red-text #important { .red-text; }
  • 18. Mix-Ins (4) .red-text(@color: red) { =red-text(!color = "red") color: @color; :color = !color a { a color: blue; :color blue } } #important won’t work +red-text("green") with variables #important { .red-text(green); }
  • 19. Mix-Ins (5) .hover-link { = hover-link text-decoration: none; :text-decoration none :hover { &:hover text-d…: underline; :text-d… underline } } #important a +hover-link #important a { .hover-link; }
  • 20. Math height: 22px / 2; :height = 22px / 2 color: #fff * 3; :color = #fff * 3 background-position: :background-position 10px 30px / 2; = 10px 30px / 2 won’t work as expected
  • 21. If Blocks =color(!x = 0) ? @if !x < 0 :color red @else :color black #colorful +color(-1)
  • 22. Loops @for !i from 1 through 3 ? .number-#{!i} :background = "url(number-#{!i}.png)"
  • 23. Functions (1) :width = percentage(100px / 50px) ? :color = hsl(120, 100%, 50%) :height = floor(21px / 2)
  • 24. Functions (2) !c1 = #a3b400 ? !c2 = #2300ae !c3 = mix(!c1, !c2) !c4 = mix(!c1, !c2, 30%) !c5 = darken(!c1, 10%) !c6 = desaturate(!c1, 5%) !c7 = complement(!c1) Sass 3.0 till then: gem install compass-colors
  • 25. Overview + + · Easy to learn · Good for developers · Better syntax for variables · Mix-ins just work · Good for people who hate {, } and ; — p. e. German keyboard users · New features come out frequently – – · Classes used as a mix-in won’t be · Syntax changes frequently rendered (maybe confusing) · More complex syntax · Still complicated CSS syntax with · Annoying “=” {, } 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. last name first name e-mail nico@hagenburger.net twitter blog