Completely empty spaces. Save the document as a template
When I first encountered the 960 Grid System, I was extremely excited by how easily it made complex layouts possible.
However, since I was still relatively new to web design at the time, when I downloaded the files there was so much information that very quickly it all started to seem very complicated to me:
With so many codes, is it really possible to just create a mockup?
This article is intended for web designers and web front-end developers who are interested in grid-based layout systems but have trouble understanding them.
We'll look specifically at the 960 Grid System, but after reading this tutorial, you'll see that most other grid systems are very similar and will be easier to work with once you understand a few basic principles.
Grid-based design
Before we get into the specifics of the 960 Grid System, let's take a quick look at grid-based design in general. This idea, of course, did not originate with the advent of the Internet. In fact, it comes from one of the oldest and most fundamental design principles: alignment.
Our brains are used to simplifying things to make them easier to understand. That's why we try to bring order to things that seem chaotic. That's why we see images of faces in lunar craters.
Naturally, the easier it is to restore order, the faster our brain can identify a pattern and move on. The grids are so organized and orderly that they practically do not require additional thinking on our part.
Consider two page layouts, which are presented in the figure below:
Although both of these images are simply a collection of rectangles, the top image seems fundamentally better to us than the one below. We can instantly recognize the structure, accept it and move on.
The bottom image seems visually disordered. There is no clear pattern, order or purpose to it - it just looks like a collection of random shapes.
When we look at something, our eyes tend to frantically try to find a pattern in a split second, which increases the time it takes us to appreciate the whole picture.
It's interesting that random things can still be beautiful. Random elements can certainly look beautiful in nature, in art, and even in design, but they have no place in the logical organization of information.
The fact is that grids are one of the simplest and powerful ways create order on the page. They may seem cold and rigid, but remember that they are very effective and efficient, and they can be quite flexible as long as you don't worry about your imagination getting bogged down by all the elements needed to organize the structure.
Why do you need a grid system?
960 Grid System - like other similar tools - provides a quick and easy way to create grid-based layouts with using CSS. This is done by providing browser compatibility tested and optimized preset column sizes in which you can place content.
Before CSS3, it wasn't easy to split a web page into columns without doing tedious math.
For example, if you have a container that is 1000 pixels wide and you want to split it into three columns, that would be 333 and 1/3 pixels per column (not the best number). In addition, the columns must be separated, otherwise their contents will merge - which means you need to add an indent.
If we add 10 pixels of padding on each side of each column, we must subtract an additional 20 pixels from the width of each column. This gives us 3 columns of approximately 313 pixels wide with 10 pixels of padding on each side (even then it's 999 pixels, not 1000).
Want to create 4 columns just below? Then you should start the whole calculation process from the beginning and subtract 80 pixels of padding from 1000 pixels of total width, and then divide 920 pixels by 4 to get a column width of 230 pixels.
Finally, if you want to add sidebar, which will be one-third the width of the page, you would create a 750px column for the content and another 250px for the sidebar, then subtract 40px of padding to get one column 730px wide and another 230px wide.
Already confused?
Like many web designers before you. It's certainly not rocket science, but it's also not something you want to do over and over again every time you take on a new project.
Solution? Find someone else to figure out these crazy column width calculations, write them into a CSS document, and let you download it for free. (This person turned out to be Nathan Smith, creator of the 960 Grid System).
960 Grid System
The 960 Grid System is an easy way to create website layouts using a grid that is 960 pixels wide:
The reason why 960 pixels was chosen as the base width is that the number 960 gives the opportunity to create large quantity options for breaking into columns and indents, using only integers. And these options fit perfectly into most screen extensions.
The 960 GS comes in two main flavors: 12-column grid and 16-column grid (a 24-bit version is available for those who want extreme design control).
In the 12-column version, the narrowest column is 60 pixels wide. The width of each subsequent column increases by 80 pixels.
Thus, the available column width sizes are: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860, and 940 pixels:
In the 16-bit version, the narrowest column is 40 pixels wide, and each subsequent column becomes 60 pixels wider.
Thus, the available column width sizes are: 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880, and 940 pixels:
CSS Class Sessions
When you look at the diagrams above, each of the dark blue horizontal stripes can be viewed in the 960 Grid System as CSS class.
To create an object in your page structure whose width matches the width of one of these blocks, you just need to give it the proper class in the div - that's all!
The classes are named indicatively according to their sizes, with grid_1 being the narrowest CSS class and grid_12 being the widest (in the 16-column version, grid_16 is the widest class).
So, take another look at the previous image, but this time think about different sizes Column widths as per CSS classes:
This naming system makes it incredibly easy to compose complex layouts in seconds. A clever trick is used to fill the entire width of the page. Its essence is that the sum of the numbers of the selected classes should be equal to 12 in the 12-bit version and 16 in the 16-bit version.
For example, in the 12-column version, if you have 3 blocks of text that you want to place side by side in 3 columns, simply assign the class grid_4 to each of them for a total of 12 (4+4+4=12):
Likewise, by assigning the CSS class grid_4 in the 16-column version, you can easily create a 4-column layout (4+4+4+4=16):
To make sure you use the appropriate classes, be sure to place the 12-bit elements inside a div with class container_12 and the 16-bit classes inside a div with class container_16 .
If you've never worked with a 960 GS before, I expect that right now you'll be saying something along the lines of, "That's it! ”, which will refer to how easy it is to manipulate the layout using this system.
Push Me, Pull Me
The 960 Grid System allows you to move elements independently by dragging them along a horizontal edge. This is achieved using CSS classes push and pull.
Let's look at two examples shown in the figure below. The first example is a 4-column layout using only the grid_3 class.
And in the second option, I pulled the first column and put it in place of the last one, causing the columns to move one position relative to how they would normally be positioned in the layout:
Keep in mind that you can drag blocks anywhere you want. If I wanted to drag an element from two columns, I would implement the push_2 class, and so on.
The push/pull system deeply affects the page structure of an HTML document.
For example, imagine that in the example below we enter the site name in the logo and place it in the first element on the page.
The logo is one of the most important elements of the site, and you would like it to be present as the first point of the HTML markup. At the same time, so that it is visually displayed in the center of the page.
Before dragging:
To visually position a logo element between two text columns, you would use the following HTML code:
text column
text column
The resulting layout will look like this:
After dragging:
Despite the fact that the logo is at the beginning of the layout, visually it will be located in the center of the page.
Completely empty spaces
You'll often come across a situation where you need to create white space in your layout (negative space is a great design management tool).
To achieve this, the prefix and suffix classes are applied to divs. Their implementation is very similar to that of the push and pull classes.
For example, to leave white space that is one column wide, use the prefix_1 class before the element or the suffix_1 class after the element:
As you can see, the example above uses the suffix_3 class to create three columns of empty space after it.
Beginning and the end
Finally, I want to give you some information about the alpha (“first”) and omega (“last”) classes that should be applied to any grid elements that are children of other grids.
Obviously the alpha class will be applied to the first one child element, and the omega class to the latter.
Essentially, these classes define the boundaries of the area in which you can place grid modules within other modules.
Summing up
With this new knowledge, you should now feel like a 960 Grid System expert.
The basic principles of the system include only 5 concepts that you must remember:
- use class container_12 for the 12-column version of the system and container_16 for the 16-column version;
- use the classes grid_1 , grid_2 , grid_3 etc. to set the width of the columns. If you want to fill the entire width of the page horizontally, make sure the class numbers add up to 12 or 16 respectively (grid_4 + grid_2 + grid_6 = 12);
- use the push and pull classes to position elements on the page yourself, regardless of their position in the markup document;
- use the prefix and suffix classes to create empty spaces in the layout;
- use the alpha and omega classes to set boundaries for any nested grid elements.
The 960 Grid System also uses CSS reset. This is an optional file based on Eric Meyer's popular CSS reset set. If you like it, use it. If not, add it to your trash!
960 Grid System Resources
Now that you're an expert in grid-based web design and the 960 Grid System, here are a few tools and resources you can check out to further understand this topic.
Fluid 960 Grid System
Wonderful adaptive version 960 GS! Floating web layouts allow you to adjust the structure to fit the page. They use some really complex code, but if you use this system, it will do all the hard work for you:
The 1KB CSS Grid
Extremely simple system grids, elementary and easy to understand. It has many options for customization, but by default uses a base of 960 pixels:
Variable Grid System
A simple and flexible CSS grid builder based on the 960 Grid System:
Grid-Based Design Gallery
If you're skeptical about the 960 Grid System and what grid-based design can offer you as a web designer, check out this gallery of mockups. As you can see, with a little imagination and ingenuity, you get simply limitless possibilities.
Framework (from the English framework - frame)
You may have already heard about CSS Frameworks such as Blueprint, Grid System 960, Elastic and so on. There are also opinions that they can be a good starting point for the development of their own work and significantly reduce the time of layout of templates for web sites. But is this really so? In this article we will look at how to use CSS Frameworks using the example of one of the most popular CSS frameworks GridSystem 960.
And so CSS Frameworks is a tool that provides a web designer (developer) with a clear architecture based on fairly precise written rules that allow the layout of design templates for web sites without starting from scratch.
AWhatsuchCSS Frameworks - Grid System 960.
GridSystem 960- is a bunch of style sheets that provide a common container located on a grid. The structure makes available two stacks: the first is formed by 12 columns, and the second by 16 columns. In both grids, the width of the common container always remains 960px.
Why choose the size 960px?
All modern monitors currently support a minimum resolution of 1024×768 pixels. The number 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192 , 240, 320 and 480. This gives much more flexible combinations regarding the speaker measurements that can be made.
In the images below you can see examples of two sites that were made using two different grids, the first with 12 columns and the second with 16.
How to use the Grid System 960 framework.
First, of course, you need to download the CSS framework Grid System 960 archive, and unpack it, take the css folder from there and move it to where all the template files will be located. Now launch your favorite editor (I recommend Adobe Dreamweaver) and create a document index.html. Let's connect everything to the index.html document necessary files framework.
Insert between head tags
= "stylesheet" type="text/css" media="all" href="css/reset.css" /> = "stylesheet" type="text/css" media="all" href="css/960.css" /> = "stylesheet" type="text/css" media="all" href="css/text.css" />We will also create separate css the file “style.css” which will contain our own rules styles, save it in the path folder, this is done so as not to make changes to the css files framework.
Let’s connect “style.css”
= "stylesheet" type="text/css" media="all" href="css/style.css" />
How to choose a container/mesh to use.
Now we must select the grid type we want to use, 12-column (.Container_12) or 16-column (.Container_16). We know that both grids have a dimension of 960px, the only difference is that 12-columns divides the dimension by 12, and 16, respectively, by 16.
The class that selects the grid type looks like this:
How to set column size?
When we want to split our container into multiple columns, we can simply use a class to do so. Grid_XX, in which “XX” represents the number of columns (of the grid selected as the container). From which the column that we want to obtain will be compiled.
For example, if we want to have two columns (side menu and content), just specify it like this:
The "grid_7" class specifies that the menu sidebar should have a size equal to 7 columns of the selected grid.
As you can see, the sum of the first column (grid_7) with the second column (grid_5) is exactly 12, the total number of columns that make up the grid of the container we selected (container_12). This way we don’t need to know the width that each single column should have, making it easier to resize our columns as the layout develops.
Let's look at another example, we need to divide our main container into three columns of equal size, there is no need to do any calculations to determine right size in pixels that each column should have. All you need to do is apply a little math to get the following:
As you can see, the sum of these three grid_4 columns is exactly 12 (4 + 4 + 4).
Spaces between columns.
The predefined column settings have a specific padding between them. Each grid_XX class has 10px . indentation both right and left. If we want to remove, for example, the indentation from the first and last columns of our layout, we need to add the class “alpha” this will remove the indentation from the left edge and "omega" for the right one.
Here's an example:
In the example, we did it so that the first column will not have an indent on the left, and the last on the right.
In case we want to leave one or more empty spaces before and after the column.
To leave one or more empty seats before or after the column, you need to use classes “prefix_XX” or “suffix_XX”, in place XX you need to indicate the number of columns that you want to leave empty.
Let's see an example:
In this example, we have set that before the column grid_7 there will be empty space equal to one column, and also after the column grid_3 there will be one empty column.
Do not forget that the sum of all columns, including empty ones, should be equal to 12 (grid_7 + grid_3 + prefix_1 + suffix_1) or 16 if you selected the appropriate grid.
conclusions
As you may have probably noticed, the CSS framework makes it possible to significantly save time in the process of website design layout. Obviously, no one prohibits personalizing the platform according to your real needs, since these solutions can never be universal, especially regarding the layout of your works. Therefore, I advise you not to stop there easy to use framework, but go further and experiment.
I want to give a comprehensive description of the wonderful 960gs modular grid framework. Recently somewhere in the comments they said that 960gs is more difficult to understand than blueprint, which surprised me. I don’t want to compare these frameworks, if only because they perform in different weight categories, however, for building a modular grid, I have not seen anything easier and easier to understand than 960gs.
It seems they wrote about modular grids on Habré, but the search somehow let us down, all sorts of garbage is found, like “Philosophical Geometry”. Here are a few links off the top of your head:
Since I am a programmer myself, I hope seasoned layout designers and designers will forgive me some mistakes if they are suddenly made below in the text. I removed all the code on pastie.org, firstly, Habr does not allow you to post the entire article due to the large number of tags when highlighting the code, and secondly, the code will not in vain bloat the article.
960gs gets its name from the choice by Nathan Smith, the author of the framework, to have the default full container width of 960 pixels. However, 960 px is not an ironclad limitation at all.
All 960gs elements are described as classes for css. Obviously, they should be used as<тег class=«960gs_someclass»>.
In this article I will use the framework code from the official website, 960.gs/css/960.css. To read and understand the article, it is not at all necessary to look at this code; at the end of the story, I will dwell on ways to obtain the CSS code in more detail.
In the examples, I will use divs as markup elements, and, for convenience, I will call such divs by the name of their 960gs class. For example, I will call a div with class.container_12 a container element. I hope this small liberty will find understanding in the eyes of the layout guru.
Also, when describing the parameters of the framework elements, I will only describe the parameters of the original CSS code. Of course, the layout designer is free to change them or add new properties as he needs.
When translated, the grid element received the name “cell”, which is somewhat far from the literal “grid”, but it does not sound so ugly and is much closer to its real purpose. Compare: "put three grids on one row" and "put three cells on one row".
I hope the rough edges are over, so I’ll move directly to the topic of this article.
Container
Container– the root element of the 960gs markup, which specifies parameters for the modular grid. “Root element” means that only the framework elements that are its children will participate in the formation of the modular grid, “setting parameters” means that all framework elements that are inside the container obey its parameters in a uniform way.A container with 12 columns might look like this:
Container specifies following parameters for a modular grid:
Everything else is left to the will of the designer.
One page can contain any number of containers at once, both with the same parameters, and with different ones (obviously, the designer must have very good reasons use several different modular grids on one page).
It is convenient to use several containers, for example, to divide a page into areas of header/content/footer.
Nested containers within the 960gs ideology are absurd (imagine nested in html), however, by manipulating the indentation in CSS, it is possible to nest containers inside each other. But why?
In the future, I will use a container with parameters:
- Column width: 60px
- Number of columns: 12
- Groove Width: 20px
- Container width = (60*12) + (20 * 11) + (20/2 * 2) = 960px
At the development stage, it is convenient to use a grid image as the background-image of the container, which you can take, for example, on the official website (this will be written about a little later). True, only for standard 12 and 16 column layouts.
div.container_12 ( background: #fff url("/img/12_col.gif") repeat-y; )
Grid
Grid is one of two basic markup elements designed for arranging HTML elements on a modular container grid. A cell (grid) always orients its contents in a horizontal plane relative to the container. One cell can occupy either one column of the modular grid or all at once; the names of the classes reflect this property: for a cell that occupies one column, the class will be named grid_1, for a cell with two columns - grid_2, for a five-column cell - grid_5, etc. Therefore, in general terms we can represent the class as grid_ X, where X is the cell width we need in the columns of the modular grid. Let's look at an example with grids grid_1, grid_6 and grid_12 respectively:One cell may well be adjacent to other cells horizontally, provided that they all together cover no more columns than there are in the container:
Be careful, if more columns are required than the container has, the rightmost cells that do not fit into one line will be forcibly moved to the line below.
Curious readers can look into the CSS code and find out that grooves are formed using margins, as opposed to cells, which require an html element. However, I hope this was obvious to everyone.
Aggressive layout designers may indignantly rename all references to grid_ in the framework code to, for example, cell_, which, in my opinion, is closer to the truth and is also more clear.
Clear
Probably everyone who read the previous code noticed that it appeared new element:Clear– the second basic element of the 960gs markup. To understand what clear does, consider the following situation: I will try to rewrite the last example without using clear, adding a red border to the container for convenience.
Hmm, the container did not expand with child cells, but remained thin and lonely. Hence, clear's first task is to stretch the parent container to the expected size. Now, I suggest you look carefully at the first example from the grid section, in which each cell alone occupies the entire line. From this example it is logical to conclude that the second task is clear - to complete current line, no matter how many free columns are left in it.
These two rules make it a good habit when working with 960gs to always end any line with clear, even if it is the last or only line in the container.
It's no secret that divs with the clear class are used relatively often by layout designers. In order to avoid possible conflicts between the code of the entire site and the 960gs code in the future, the layout designer should probably either rename it in the code css file framework class clear to some other (for example, clr), or refine it (for example, .container_12 .clear). Still, in my opinion, renaming in the event of possible conflicts is a more appropriate method.
Alpha and Omega
Sometimes there are situations when it is necessary to nest several others in one cell. As an example: we need two very long solid cells on the sides, occupying 10 lines in height, and one cell in the middle, on each of the ten lines.In such cases you should use classes alpha And omega. The idea is simple - if we nest several other cells into a cell, then the first nested cell needs to have the class alpha, and the last one, obviously, omega.
By the way, the example is one of the rare cases where it is necessary to use the tag
.
If you need to nest only one cell, it is enough to use only the alpha class, without omega.
Prefix, Suffix, Push and Pull
These four additional classes are essentially more abstract replacements for padding-left, padding-right, left, and right, respectively. It is worth noting that using these classes is much more convenient than calculating the required indents in your head or on a calculator.They all have class names similar to the cell class names: classname_ X, where X is the number of columns of the modular grid.
Let's look at a simple example:
Now let’s apply the classes prefix_1, suffix_1, push_1 and pull_1 to each of the cells with the rhyme, respectively:
That's all, the article listed all the features of the 960gs, there are only a few points left to consider.
Firstly, you can download the code with examples from the article at
I want to give a comprehensive description of the wonderful 960gs modular grid framework. Recently somewhere in the comments they said that 960gs is more difficult to understand than blueprint, which surprised me. I don’t want to compare these frameworks, if only because they perform in different weight categories, however, for building a modular grid, I have not seen anything easier and easier to understand than 960gs.
It seems they wrote about modular grids on Habré, but the search somehow let us down, all sorts of garbage is found, like “Philosophical Geometry”. Here are a few links off the top of your head:
Since I am a programmer myself, I hope seasoned layout designers and designers will forgive me some mistakes if they are suddenly made below in the text. I removed all the code on pastie.org, firstly, Habr does not allow you to post the entire article due to the large number of tags when highlighting the code, and secondly, the code will not in vain bloat the article.
960gs gets its name from the choice by Nathan Smith, the author of the framework, to have the default full container width of 960 pixels. However, 960 px is not an ironclad limitation at all.
All 960gs elements are described as classes for css. Obviously, they should be used as<тег class=«960gs_someclass»>.
In this article I will use the framework code from the official website, 960.gs/css/960.css. To read and understand the article, it is not at all necessary to look at this code; at the end of the story, I will dwell on ways to obtain the CSS code in more detail.
In the examples, I will use divs as markup elements, and, for convenience, I will call such divs by the name of their 960gs class. For example, I will call a div with class.container_12 a container element. I hope this small liberty will find understanding in the eyes of the layout guru.
Also, when describing the parameters of the framework elements, I will only describe the parameters of the original CSS code. Of course, the layout designer is free to change them or add new properties as he needs.
When translated, the grid element received the name “cell”, which is somewhat far from the literal “grid”, but it does not sound so ugly and is much closer to its real purpose. Compare: "put three grids on one row" and "put three cells on one row".
I hope the rough edges are over, so I’ll move directly to the topic of this article.
Container
Container– the root element of the 960gs markup, which specifies parameters for the modular grid. “Root element” means that only the framework elements that are its children will participate in the formation of the modular grid, “setting parameters” means that all framework elements that are inside the container obey its parameters in a uniform way.A container with 12 columns might look like this:
The container specifies the following parameters for the modular grid:
Everything else is left to the will of the designer.
One page can contain as many containers as desired, both with the same parameters and with different ones (obviously, the designer must have very compelling reasons to use several different modular grids on one page).
It is convenient to use several containers, for example, to divide a page into areas of header/content/footer.
Nested containers within the 960gs ideology are absurd (imagine nested in html), however, by manipulating the indentation in CSS, it is possible to nest containers inside each other. But why?
In the future, I will use a container with parameters:
- Column width: 60px
- Number of columns: 12
- Groove Width: 20px
- Container width = (60*12) + (20 * 11) + (20/2 * 2) = 960px
At the development stage, it is convenient to use a grid image as the background-image of the container, which you can take, for example, on the official website (this will be written about a little later). True, only for standard 12 and 16 column layouts.
div.container_12 ( background: #fff url("/img/12_col.gif") repeat-y; )
Grid
Grid is one of two basic markup elements designed for arranging HTML elements on a modular container grid. A cell (grid) always orients its contents in a horizontal plane relative to the container. One cell can occupy one column of a modular grid, or all at once; the class names reflect this property: for a cell occupying one column, the class will have the name grid_1, for a cell with two columns - grid_2, for a five-column cell - grid_5, etc. d. Therefore, in general terms we can represent the class as grid_ X, where X is the cell width we need in the columns of the modular grid. Let's look at an example with grids grid_1, grid_6 and grid_12 respectively:One cell may well be adjacent to other cells horizontally, provided that they all together cover no more columns than there are in the container:
Be careful, if more columns are required than the container has, the rightmost cells that do not fit into one line will be forcibly moved to the line below.
Curious readers can look into the CSS code and find out that grooves are formed using margins, as opposed to cells, which require an html element. However, I hope this was obvious to everyone.
Aggressive layout designers may indignantly rename all references to grid_ in the framework code to, for example, cell_, which, in my opinion, is closer to the truth and is also more clear.
Clear
Probably everyone who read the previous code noticed that a new element appeared in it:Clear– the second basic element of the 960gs markup. To understand what clear does, consider the following situation: I will try to rewrite the last example without using clear, adding a red border to the container for convenience.
Hmm, the container did not expand with child cells, but remained thin and lonely. Hence, clear's first task is to stretch the parent container to the expected size. Now, I suggest you look carefully at the first example from the grid section, in which each cell alone occupies the entire line. From this example it is logical to conclude that the second task of clear is to complete the current line, regardless of how many free columns are left in it.
These two rules make it a good habit when working with 960gs to always end any line with clear, even if it is the last or only line in the container.
It's no secret that divs with the clear class are used relatively often by layout designers. In order to avoid possible conflicts between the code of the entire site and the 960gs code in the future, the layout designer should probably either rename it to css code framework file class clear to some other (for example, clr), or refine it (for example, .container_12 .clear). Still, in my opinion, renaming in the event of possible conflicts is a more appropriate method.
Alpha and Omega
Sometimes there are situations when it is necessary to nest several others in one cell. As an example: we need two very long solid cells on the sides, occupying 10 lines in height, and one cell in the middle, on each of the ten lines.In such cases you should use classes alpha And omega. The idea is simple - if we nest several other cells into a cell, then the first nested cell needs to have the class alpha, and the last one, obviously, omega.
By the way, the example is one of the rare cases where it is necessary to use the tag
.
If you need to nest only one cell, it is enough to use only the alpha class, without omega.
Prefix, Suffix, Push and Pull
These four additional classes are essentially more abstract replacements for padding-left, padding-right, left, and right, respectively. It is worth noting that using these classes is much more convenient than calculating the required indents in your head or on a calculator.They all have class names similar to the cell class names: classname_ X, where X is the number of columns of the modular grid.
Let's look at a simple example:
Now let’s apply the classes prefix_1, suffix_1, push_1 and pull_1 to each of the cells with the rhyme, respectively:
That's all, the article listed all the features of the 960gs, there are only a few points left to consider.
Firstly, you can download the code with examples from the article at