Your SlideShare is downloading. ×
0
Вёрстка в стиле Ruby:HAML, SASS, Compass, CoffeeScript, JammitАндрей Ситникai@evilmartians.comevilmartians.com
Model   View   ControllerHTML    CSS    JavaScript
HAML → HTML/XML!!! 5                           <!DOCTYPE html>%html                           <html>  %body               ...
HAMLYAML/JSON > XML → HAML > HTML
CoffeeScriptJS + Ruby + Python = CoffeeScript
CoffeeScript. Основы                              (function() {i = 42                           var i = 42;square = (x) ->...
CoffeeScript. СахарЗначение аргументов по умолчанию: fill = (liquid = "coffee") ->   alert(liquid)Переменные в строках: "L...
CoffeeScript. Циклыnumbers = [1, 2, 3]for i in numbers console.log(i)square = (i * 2 for i in numbers) #=> [1, 4, 9]scores...
CoffeeScript. Установка1.   Добавить gem barista, ~> 1.0 в Gemfile2.   Вызвать bundle install3.   Вызвать rails generate b...
SASS → CSS$color: black$width: 100px@mixin default-font($size = 12px) font: $size serif#content                           ...
SCSS → CSS#content {  width: $width + 10px;  h1 {     color: $color;     @include default-font(40px);     }  input {     @...
CompassRuby → Ruby on Rails = SASS → Compass
SASS. Цвета$color: #ff0000a    color: $color    &:hover // a:hover     color: darken($color, 10%)    &:visited     color: ...
Compass. Изображения.icon  width: image-width(icon.png)  height: image-height(icon.png)  background: image-url(icon.png)  ...
Compass. CSS3@import compass/css3input  @include border-radius(3px)  @include box-shadow(black, 0, 0, 5px)                ...
Compass. Градиенты                                          Opera$experimental-support-for-svg: trueheader @include backgr...
Compass. Base64.icon  background: image-url("icon.png")    // IE 6, 7  background: inline-image("icon.png")               ...
Compass. Спрайты$icons: sprite-map("icons/*.png").logo  background: sprite($icons, logo)     // icons/logo.png.contacts  b...
JammitДля CSS/JS-файлов:1. Объединяет все файлы в один2. Убирает пробелы/комментарии, сокращает JS-код3. Сразу сжимает GZ ...
СсылкиHAML:           haml-lang.comCoffeeScript:   coffeescript.comCompass:        compass-style.orgJammit          docume...
Вопросы?ai@evilmartians.comevilmartians.com
Upcoming SlideShare
Loading in...5
×

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

6,141

Published on

Published in: Technology, Art & Photos
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,141
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
40
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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

  1. 1. Вёрстка в стиле Ruby:HAML, SASS, Compass, CoffeeScript, JammitАндрей Ситникai@evilmartians.comevilmartians.com
  2. 2. Model View ControllerHTML CSS JavaScript
  3. 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. 4. HAMLYAML/JSON > XML → HAML > HTML
  5. 5. CoffeeScriptJS + Ruby + Python = CoffeeScript
  6. 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. 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. 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. 9. CoffeeScript. Установка1. Добавить gem barista, ~> 1.0 в Gemfile2. Вызвать bundle install3. Вызвать rails generate barista:install4. Положить свои скрипты в app/coffeescripts
  10. 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. 11. SCSS → CSS#content { width: $width + 10px; h1 { color: $color; @include default-font(40px); } input { @include default-font; }
  12. 12. CompassRuby → Ruby on Rails = SASS → Compass
  13. 13. SASS. Цвета$color: #ff0000a color: $color &:hover // a:hover color: darken($color, 10%) &:visited color: grayscale($color)
  14. 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. 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. 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. 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. 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. 19. JammitДля CSS/JS-файлов:1. Объединяет все файлы в один2. Убирает пробелы/комментарии, сокращает JS-код3. Сразу сжимает GZ на максимальной компрессии, чтобы Nginx быстро отдавал уже сжатое
  20. 20. СсылкиHAML: haml-lang.comCoffeeScript: coffeescript.comCompass: compass-style.orgJammit documentcloud.github.com/jammit/
  21. 21. Вопросы?ai@evilmartians.comevilmartians.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×