-
Notifications
You must be signed in to change notification settings - Fork 7
Blueprint liquid
Liquid grid is a must for web applications. Website often have a fixed width for readability but most web applications should use all the space available to display information. Think about a dashboard, we can't put much widget into a 950px grid.
The blueprint liquid grid is grid system which can adapt to the window width. Columns are not longer in pixels but in percents. They will expand to take 80% of the canva but this can be changed to whatever value you want (our demo expands to 99%).
One other cool thing about the grid system is columns will stretch with window size and not font-size. So you get a real control over it.
My last comment about the liquid grid system is that it is so easy to use, you have no reason to not use it. You just have to add @import "blueprint/liquid" in your sass style...
The markup is the same has the first example. It's a simple grid filled with lorem ipsum.
<!DOCTYPE>
<html>
<head>
<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
<!--[if lt IE 8]>
<link href="stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div id="container">
<header>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</header>
<section id="lipsum-1">
<p>Cras elementum tortor in arcu tincidunt ut rhoncus quam posuere.</p>
</section>
<section id="lipsum-2">
<p>Duis vel tellus tellus, non condimentum ligula. Proin sagittis dignissim turpis, vitae semper dui tristique non.</p>
</section>
<section id="lipsum-3">
<p>Morbi sed lacus elit, sed bibendum massa. Donec venenatis posuere eros vitae sollicitudin.</p>
</section>
<footer>
<p>Curabitur cursus nisi et odio interdum vulputate. Etiam vestibulum hendrerit nunc tincidunt fringilla.</p>
</footer>
</div>
</body>
</html>
I want to create the same output as the first example : A header (full row), a middle row of 3 cols and a footer (full row).
Again this is almost the same style as the first example.
@import "blueprint/reset";
@import "partials/base";
@import "blueprint";
@import "blueprint/liquid";
@include blueprint-typography;
#container {
@include container;
width: 99%;
}
header, footer {
@include column($blueprint-grid-columns);
}
#lipsum-1, #lipsum-2, #lipsum-3 {
@include column($blueprint-grid-columns/3);
}
#lipsum-3 {
@include last;
}
Notice the @import "blueprint/liquid"; import. This is where all the magic happens. With this import, your grid will automatically be stretched. The default width of the stretched grid is 80% of the window. We can override this using the width attribute on our container. In this example I set the width 99% to so a full nice liquid grid in action.
I have never used the liquid grid in a website but I can't wait to try it. I will try to create a more real-world example next time.