Blueprint
Blueprint is a rather interesting framework for layout with a grid, which I personally find convenient, because it allows you to quite easily create very complex pages, while not thinking about IE.
Download the archive from the project page on Google Code .
The archive will have a blueprint folder / there and contains the main framework files, and connect them to the page:
')
The framework divides all space into vertical stripes, their default is 24, while the content divides into columns (the class of columns), which occupy one or more vertical stripes in width.
All columns must be inside the layer with the class container
Also, you should immediately pay attention to a rather interesting showgrid class, it is used during layout and shows a grid against the background of a container or another element.
The container cols-14, cols-15 ... cols-23, which indicate the number of columns, i.e. page width (24 columns, as I said, will be set by default).
We will understand now with columns:
As you can see, the columns are designated by the class column. Classes span-1, span-2 ... span-24 are used to designate widths in columns. The class last means that the column will not be expanded to the right with the following element.
As a result, we got a column on the entire width of the page with the title. Now let's complicate it a bit, let some information be to the right too:
Now we have a header divided into two parts. I added the heading class so that in css you can set the background for the entire header:
Using the classes prepend-x and append-x, we can supplement the column with empty columns on the left and on the right, respectively (where x is the number of columns).
For example, let's make the column heading have a margin of 4 columns to the left:
It should be noted that the sum of the widths of the columns should not exceed the width of the container, while prepend and append are also included in the width!
Now we will make a page with a menu on the left and right, with two columns of content and a cellar:
I used the clear class on the hr tag to create a wide break line. The colborder class that I pass to the div with the left half of the content adds a thick (whole column) dividing strip to the right of the column. There is also a border - just the line on the right.
The classes push-1 ... push-4 and pull-1 ... pull-4 allow you to push the current column into the next (push) and vice versa, pull it into the previous one (pull).
Next time we will talk about the typographical classes Blueprint and classes for design forms.
Examples from authors:
PS On Habré, the theme of layout has been raised by the grid .
Download the archive from the project page on Google Code .
The archive will have a blueprint folder / there and contains the main framework files, and connect them to the page:
')
<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]--> The framework divides all space into vertical stripes, their default is 24, while the content divides into columns (the class of columns), which occupy one or more vertical stripes in width.
All columns must be inside the layer with the class container
<div class="container showgrid"> </div> Also, you should immediately pay attention to a rather interesting showgrid class, it is used during layout and shows a grid against the background of a container or another element.
The container cols-14, cols-15 ... cols-23, which indicate the number of columns, i.e. page width (24 columns, as I said, will be set by default).
We will understand now with columns:
<div class="container showgrid"> <div class="column span-24 last"> <h1></h1> </div> </div> As you can see, the columns are designated by the class column. Classes span-1, span-2 ... span-24 are used to designate widths in columns. The class last means that the column will not be expanded to the right with the following element.
As a result, we got a column on the entire width of the page with the title. Now let's complicate it a bit, let some information be to the right too:
<div class="container showgrid"> <div class="heading container"> <div class="column span-20"> <h1></h1> </div> <div class="column span-4 last"> <p>-</p> </div> </div> ... </div> Now we have a header divided into two parts. I added the heading class so that in css you can set the background for the entire header:
.heading { background:#88D; padding-top:10px; } Using the classes prepend-x and append-x, we can supplement the column with empty columns on the left and on the right, respectively (where x is the number of columns).
For example, let's make the column heading have a margin of 4 columns to the left:
<div class="container"> <div class="heading container"> <div class="prepend-4 column span-16"> <h1></h1> </div> <div class="column span-4 last"> <p>-</p> </div> </div> </div> It should be noted that the sum of the widths of the columns should not exceed the width of the container, while prepend and append are also included in the width!
Now we will make a page with a menu on the left and right, with two columns of content and a cellar:
<body> <div class="container"> <div class="heading container"> <div class="prepend-4 column span-16"> <h1></h1> </div> <div class="column span-4 last"> <p>-</p> </div> </div> <hr class="space"/> <div id="view"> <div class="vp container"> <div class="menu prepend-1 column span-3"> <h3></h3> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <div class="content column span-16"> <h2>Content</h2> <div class="prepend-1 span-6 colborder"> <p>Lorus...</p> </div> <div class="span-7"><p>Ipsium...</p></div> </div> <div class="menu2 prepend-1 column span-3 last"> <h3>2</h3> <ul> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </div> </div> </div> <hr class="clear"/> <div class="span-24 prepend-1 column last"> </div> </div> </body> I used the clear class on the hr tag to create a wide break line. The colborder class that I pass to the div with the left half of the content adds a thick (whole column) dividing strip to the right of the column. There is also a border - just the line on the right.
The classes push-1 ... push-4 and pull-1 ... pull-4 allow you to push the current column into the next (push) and vice versa, pull it into the previous one (pull).
Next time we will talk about the typographical classes Blueprint and classes for design forms.
Examples from authors:
- files.bjorkoy.com/blueprint/tests/parts/sample.html
- files.bjorkoy.com/blueprint/tests/parts/grid.html
- files.bjorkoy.com/blueprint/tests/parts/elements.html
PS On Habré, the theme of layout has been raised by the grid .
Source: https://habr.com/ru/post/24011/
All Articles