Más contenido relacionado
La actualidad más candente (14)
Middleman 一小時完成你的專案原形
- 3. ○ Photoshop / Illustrator / Artwork...
○ Dreamweaver or handcraft HTML / CSS...
○ Back-end Code...
○ Axure RP?...
○ Keynote?...
http://rocodev.com
- 11. ○ 先買 Rails101
○ 設計師超難入門
○ 建環境、假資料...
○ 我只要快速設計阿~~~
○ 很抱歉今天也沒有要
洗腦這個
http://rocodev.com
- 14. ○ 靜態網站產生器
○ gem install middleman
○ middleman init your_project_name
http://rocodev.com
- 15. ○ Layouts & Partials (喔耶不用重複copy html)
○ Helpers (喔耶亂數資料、Rails整合方便)
○ Haml (喔耶...?)
○ Sass & Compass (喔耶...?)
http://rocodev.com
- 18. ruby
helper
- 5.times do
%li= link_to( @name, @url )
http://rocodev.com
- 19. lorem.sentence # ⼀一句廢話
lorem.words 5 # 五個詭異單字
lorem.word
lorem.date # 隨便給個日子
lorem.name # 奇怪的名字
lorem.first_name
lorem.last_name
lorem.email
http://rocodev.com
- 21. lorem.image('300x400')
#=> http://placehold.it/300x400
lorem.image('300x400', :background_color => '333', :color => 'fff')
#=> http://placehold.it/300x400/333/fff
lorem.image('300x400', :random_color => true)
#=> http://placehold.it/300x400/f47av7/9fbc34d
lorem.image('300x400', :text => 'blah')
#=> http://placehold.it/300x400&text=blah
http://rocodev.com
- 23. <html>
<head>
%html
<title>text</title>
%head
</head>
%title text
<body>
%body
<%= yield %>
= yield
</body>
</html>
http://rocodev.com
- 24. <div>
<div>
<div>
<div> %div
<div> %div
... %div
</div> %div
</div> %div ...
</div>
</div>
</div>
http://rocodev.com
- 25. <article>
<header>
<h2>標題</h2> %article
</header> %header
<div class=”content”> %h2 標題
<div class=”inner”> .content
<%= @content %> .inner
</div> = @content
</div>
</article>
<article>
<h2>標題</h2> %article
<div class=”content”> %h2 標題
<%= @content %> .content
</div> = @content
</article>
http://rocodev.com
- 27. ○ 使用語言 sass http://sass-lang.com
○ 其實就跟 less 差不多好用
○ 但加上 compass 後完全不一樣
http://rocodev.com
- 29. scss less
a { a {
color: blue; color: blue;
} &:hover {
a:hover { color: black;
color: black; }
} }
compass
a {
@include link-colors(blue, black);
}
http://rocodev.com
- 30. compass css3 @include border-radius(5px);
prefix -ms-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-khtml-border-radius: 5px;
$experimental-support-for-khtml: false
$experimental-support-for-mozilla: false
http://rocodev.com
- 31. inline block @include inline-block;
@mixin inline-block {
@if $legacy-support-for-ie {
& { hack
*display: inline; } }
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: middle;
hack
@if $legacy-support-for-ie {
*vertical-align: auto; } }
http://rocodev.com
- 32. 量⼀一下圖片寬高 orz...
width: 200px; 高手都知道的普通技巧 orz...
height: 200px;
text-indent: -99999px;
background: url(logo.png) no-repeat;
compass
@include replace-text-with-dimensions($img);
沒人在算寬高的啦XDDD
http://rocodev.com
- 33. hack
.group {
*zoom: 1; hack
}
.group:after {
content: “”;
display: table;
clear: both;
}
compass
@include pie-clearfix;
沒人在記 ie 怎麼 hack 的啦
http://rocodev.com
- 36. @import "icon/*.png";
@include all-icon-sprites;
自動產生 (^o^)
.icon-sprite,
.icon-delete,
.icon-edit,
.icon-new,
.icon-save { background: url('/images/icon-
s34fe0604ab.png') no-repeat; }
沒人在算座標的啦
.icon-delete { background-position: 0 0; }
.icon-edit { background-position: 0 -32px; }
.icon-new { background-position: 0 -64px; }
.icon-save { background-position: 0 -96px; }
http://rocodev.com