lightning talk: blueprintcss
Post on 22-Oct-2014
2.961 views
DESCRIPTION
TRANSCRIPT
Prototyping usingBluep!ntCSS
客戶愛變卦
工程師會改錯
未成年就這麼優,是一切邪惡的根源“
– lukhnos
Premature optimization " # root of all evil
wireframe
Visio/OmniGraffle
Powerpoint
Axure
HTML wireframe
http://code.google.com/p/blueprintcss/
Blueprint is a CSS framework, designed to cut down on your development time. It gives you a solid foundation to build your CSS on
top of, including some sensible default typography, a customizable grid, a
print stylesheet and much more.
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css"
media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css"
media="print">
<!--[if IE]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css"
media="screen, projection"><![endif]-->
<div class="container">
<div class="span-24">
Header
</div>
<div class="span-4">
Left sidebar
</div>
<div class="span-16">
Main content
</div>
<div class="span-4 last">
Right sidebar
</div>
</div>
24
4 16 4
<div class="container">
<div class="span-24">
Header
</div>
<div class="span-4">
Left sidebar
</div>
<div class="span-16">
<div class="span-8">Box1</div>
<div class="span-4">Box2</div>
<div class="span-4 last">Box3</div>
<div class="span-16 last">
Main content
</div> </div>
<div class="span-4 last">
Right sidebar
</div>
<div class="span-24">
Footer
</div>
</div>
24
4 4
24
4 48
16
semantic?
Ruby compressor
project:
path: /path/to/different/stylesheets
custom_css:
screen.css:
- custom_screen.css
semantic_classes:
"#footer, #header": column span-24 last
"#content": column span-18 border
"#extra-content": last span-6 column
"div#navigation": last span-24 column
"div.section, div.entry, .feeds": span-6 column
plugins:
- fancy-type
- buttons
- validations
缺點
too much default
小心使用
謝謝ご清聴ありがとうございましたhttp://handlino.com/[email protected]