Вёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, Jammit

  • 5,984 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,984
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
39
Comments
0
Likes
4

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. Вёрстка в стиле Ruby:HAML, SASS, Compass, CoffeeScript, JammitАндрей Ситникai@evilmartians.comevilmartians.com
  • 2. Model View ControllerHTML CSS JavaScript
  • 3. HAML → HTML/XML!!! 5 <!DOCTYPE html>%html <html> %body <body> #content <div id="content"> - @posts.each do |p| <% @posts.each do |p| %> %h1= p.title <h1><%= @p.title %></h1> %time{ datetime: p.t } <time datetime="<%= @p.t %>"> <% end %> </body> </html>
  • 4. HAMLYAML/JSON > XML → HAML > HTML
  • 5. CoffeeScriptJS + Ruby + Python = CoffeeScript
  • 6. CoffeeScript. Основы (function() {i = 42 var i = 42;square = (x) -> function square(x) { x*x return x * x; }i = square(i) unless i < 10 if (!(x < 10)) { i = square(i); }if i > 100 if (i > 100) { alert(i) alert(i); } })();
  • 7. CoffeeScript. СахарЗначение аргументов по умолчанию: fill = (liquid = "coffee") -> alert(liquid)Переменные в строках: "Liquid is #{liquid}"Диапазон: array[0..2]   # => [1, 2, 3] "abcde"[0..2] # => "abc"Вызовет calc, если obj и getA не undefined: obj?.getA()?.calc()
  • 8. CoffeeScript. Циклыnumbers = [1, 2, 3]for i in numbers console.log(i)square = (i * 2 for i in numbers) #=> [1, 4, 9]scores = ivan: 1, kolya: 2, slava: 5for name, score of scores console.log("#{name}: #{score}")
  • 9. CoffeeScript. Установка1. Добавить gem barista, ~> 1.0 в Gemfile2. Вызвать bundle install3. Вызвать rails generate barista:install4. Положить свои скрипты в app/coffeescripts
  • 10. SASS → CSS$color: black$width: 100px@mixin default-font($size = 12px) font: $size serif#content #content { width: $width + 10px width: 110px; } h1 #content h1 { color: $color color: black; @include default-font(40px) font: 40px serif; } input #content input { @include default-font font: 12px seirf; }
  • 11. SCSS → CSS#content { width: $width + 10px; h1 { color: $color; @include default-font(40px); } input { @include default-font; }
  • 12. CompassRuby → Ruby on Rails = SASS → Compass
  • 13. SASS. Цвета$color: #ff0000a color: $color &:hover // a:hover color: darken($color, 10%) &:visited color: grayscale($color)
  • 14. Compass. Изображения.icon width: image-width(icon.png) height: image-height(icon.png) background: image-url(icon.png) ↓.icon { width: 50px; height: 50px; background: url(/images/icon.png?1299009570);}
  • 15. Compass. CSS3@import compass/css3input @include border-radius(3px) @include box-shadow(black, 0, 0, 5px) ↓input { border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; box-shadow: black 0 0 5px; -webkit-box-shadow: black 0 0 5px; -moz-box-shadow: black 0 0 5px; -o-box-shadow: black 0 0 5px;}
  • 16. Compass. Градиенты Opera$experimental-support-for-svg: trueheader @include background(linear-gradient(gray, black), filter-gradient(gray, black)) FF, Chrome, Safari, CSS3 IE через filter
  • 17. Compass. Base64.icon background: image-url("icon.png") // IE 6, 7 background: inline-image("icon.png") ↓.icon { background: url(/images/icon.png); background: url(data:image/png;base64,iVBORw0KG  ANSUhEUgAAABAAAAAQAQMAAAAlP  QVR4nGP4/5/h/1+G/58ZDrAzwz3g … MVEUAAAD///+l2Z/dAAAAM0lE);
  • 18. Compass. Спрайты$icons: sprite-map("icons/*.png").logo background: sprite($icons, logo) // icons/logo.png.contacts background: sprite($icons, contacts) // icons/contacts.png ↓.icon { background: url(/images/icons.png?123) 0 0 no-repeat;}.contacts { background: url(/images/icons.png?123) 0 -24px no-repeat;}
  • 19. JammitДля CSS/JS-файлов:1. Объединяет все файлы в один2. Убирает пробелы/комментарии, сокращает JS-код3. Сразу сжимает GZ на максимальной компрессии, чтобы Nginx быстро отдавал уже сжатое
  • 20. СсылкиHAML: haml-lang.comCoffeeScript: coffeescript.comCompass: compass-style.orgJammit documentcloud.github.com/jammit/
  • 21. Вопросы?ai@evilmartians.comevilmartians.com