lightning talk: blueprintcss

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/hlb@handlino.com