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.

Ihnen gefällt diese Präsentation? Warum teilen Sie sie nicht!

Big Frontends Made Simple

on

  • 2,595 Views

 

Statistics

Views

Total Views
2,595
Views on SlideShare
2,591
Embed Views
4

Actions

Likes
5
Downloads
14
Comments
1

1 Einbettung 4

http://www.slideshare.net 4

Zugänglichkeit

Kategorien

Details hochladen

Uploaded via as Adobe PDF

Benutzerrechte

© Alle Rechte vorbehalten

Report content

Als unangemessen gemeldet Als unangemessen melden
Als unangemessen melden

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

Löschen
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Ihre Nachricht erscheint hier
    Processing...
Kommentar posten
Kommentar bearbeiten

Big Frontends Made Simple Big Frontends Made Simple Presentation Transcript

  • Big Frontends Made Simple With Sass & Compass
  • {less} vs. Sass Compass Structuring Projects Handling Browsers
  • Overview http://lesscss.org http://sass-lang.org https://github.com/cloudhead/less http://github.com/nex3/haml Inspired by Sass Combined with Haml
  • Installation gem install less gem install haml
  • gem install? try http://www.ruby-lang.org/en/downloads/ first
  • Running lessc style.less sass style.sass style.css css2sass style.css style.sass
  • Ruby on Rails http://github.com/ haml --rails your/app cloudhead/more
  • Syntax .class div { .class div color: blue; :color blue } or: .class div color: blue
  • Result .class div { color: blue; }
  • Cascading .class { .class color: blue; :color blue div { color: red; div } :color red }
  • Result .class { color: blue; } .class div { color: red; }
  • Variables @pink: #c322bd; !pink = #c322bd #pink { #pink color: @pink; :color = !pink background: red; :background red }
  • Result #pink { color: #c322bd; background: red; }
  • Mix-Ins (1) .red-text { =red-text color: red; :color red } #important #important { :font-weight bold font-weight: bold; +red-text .red-text; }
  • Result #important { font-weight: bold; color: red; }
  • 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); }
  • Mix-Ins (3) .red-text { =red-text color: red; :color red a { a color: blue; :color blue } } #important +red-text #important { .red-text; }
  • 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); }
  • 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; }
  • 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
  • If Blocks =color(!x = 0) ? @if !x < 0 :color red @else :color black #colorful +color(-1)
  • Loops @for !i from 1 through 3 ? .number-#{!i} :background = "url(number-#{!i}.png)"
  • Functions (1) :width = percentage(100px / 50px) ? :color = hsl(120, 100%, 50%) :height = floor(21px / 2)
  • 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
  • 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
  • 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.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
  • Project
  • Blueprint
  • Using Blueprint !blueprint_grid_columns = 24 !blueprint_container_size = 950px !blueprint_grid_margin = 10px @import blueprint/modules/grid.sass #teaser +column(4)
  • 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 · No silly formatting classes needed (e. g. “.two-colums”)
  • {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 plugins External converted (css2sass) stylesheets (e. g. jQuery plugins)
  • 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.
  • Ex. moviepilot.de
  • Naming Conventions · sample-class, sample_class or sampleClass · Dash case is preferred in CSS · More important: be consistent
  • {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 href="/stylesheets/screen.css?1264808640" media="screen" rel="stylesheet" type="text/css"> </head> <body class="webkit"> </body> </html>
  • 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
  • Any questions?
  • last name first name e-mail nico@hagenburger.net twitter blog