Geekly Articles each Day
⬆️ ⬇️

All about 960gs - an excellent css-framework for building modular grids





I want to give a comprehensive description of the wonderful framework for building modular grids 960gs. Recently, somewhere in the comments they said that 960gs is more difficult to understand than the blueprint , which surprised me. I do not want to deal with comparing these frameworks, if only because they perform in different weight categories, however, to build a modular grid, nothing is easier and easier to understand than 960gs I did not see.







About modular grids on Habré, it seems, they wrote, yes, here’s something that the search let you down, every garbage is found, like “Philosophical geometry”. Here are some links:



Since I am a programmer myself, I hope that experienced designers and designers will forgive me for some mistakes, if they are suddenly made lower in the text. I removed all the code on pastie.org , firstly, Habr does not allow to place the article entirely because of the large number of tags when the code is highlighted, and secondly, the code will not be in vain to inflate the article.

')

960gs got its name from the choice of Nathan Smith, the author of the framework, the default full width of 960 pixels containers. However, 960 px is not at all an iron constraint.





All 960gs elements are described as classes for css. Obviously, they should be used as <class = tag "960gs_someclass">.

In this article I will use the framework code from the official site, 960.gs/css/960.css . To read and understand this article, it is not necessary to look at this code, at the end of the story I will focus on ways to get css-code in more detail.

In the examples, I will use divs as markup elements, and, for convenience, call such divs by the name of their 960gs class. For example, a div with a class .container_12 I will call the element container. I hope this little liberty will find understanding in the eyes of the guru from the layout.

Also, when describing the parameters of the framework elements, I will describe only the parameters of the original css-code. Of course, the coder is free to change them or supplement them with new properties in the way he needs.

When translating, the grid element is called the “cell”, which is somewhat far from the literal “grid”, but it doesn’t sound so ugly and much closer to the real purpose. Compare: “put three grids on one row” and “put three cells on one row”.

I hope the roughness is over, so I turn directly to the topic of this article.



Container



Container - the root markup element 960gs, which sets the parameters for the modular grid. “Root element” means that only child elements of the framework will participate in the formation of a modular grid, “setting parameters” means that all elements of the framework that are inside the container obey its parameters in a uniform manner.

A container with 12 columns might look like this:



The container sets the following parameters for the modular grid:



Everything else is left to the will of the designer.

Any number of containers with the same parameters or with different ones can be on the same page at once (obviously, the designer should have very good reasons to use several different modular grids on the same page).





It is convenient to use several containers, for example, in order to divide a page into areas into headers / main contents / basements (header / content / footer).


Nested containers within the framework of the ideology of 960gs are absurd (imagine nested <body> in html), however, by manipulating the indentation in css, it is possible to nest containers into each other. But why?





In the future, I will use the container with the parameters:



Sample container code: 

 <div class = "container_12" />






At the development stage, it is convenient to use a grid image as a background-image container, which can be taken, for example, on the official website (this will be written a little further). 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 the two basic markup elements designed to position html elements on the modular grid of the container. A cell (grid) always orients its contents in a horizontal plane with respect to the container. One cell can occupy both a single column of a modular grid, and 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 in two columns - grid_2, for a five-column cell - grid_5 and so on. d. Therefore, in general terms, we can represent a class as grid_X, where X is the width of the cell we need in the columns of the modular grid. Consider an example with grids grid_1, grid_6 and grid_12, respectively:



pastie.org/780079


One cell may well coexist with other cells horizontally, provided that they collectively cover the columns no more than is in the container:



pastie.org/780086




Be careful, if the columns require more than the container has, the rightmost cells that do not fit in one line will be forcibly dropped to the line below.



pastie.org/780088




Inquisitive readers can look into the css code and find out that grooves are formed using a margin, unlike cells, for which an html element is needed. However, I hope it was obvious to everyone.


Aggressive typesetters can indignantly rename in the framework code all references to grid_, for example, cell_, which, in my opinion, is closer to the truth, as well as more clearly.





Clear



Probably, everyone who read the previous code noticed that a new element appeared in it: 

  <div class = "clear" />


Clear is the second basic markup element 960gs. To understand what makes clear, consider the following situation: I will try to rewrite the last example without using clear, adding a red border to the container for convenience.



pastie.org/780092


Hmm, the container did not stretch out as daughter cells, but remained thin and lonely. Therefore, the first clear task is to stretch the parent container to the expected size . Now, I suggest looking carefully at the first example from the grid section, in which each cell individually occupies the entire line. From this example it is logical to conclude that the second task of clear is to terminate the current line, regardless of how many free columns remain in it .

From these two rules it is a good habit when working with 960gs to always terminate any line with clear, even if this line is the last or only one in the container.



It is no secret that divas with the clear class are used by layout designers relatively often. In order to avoid possible conflicts between the entire site code and the 960gs code in the future, the maker-up should probably either rename the clear class to some other (for example, clr) in the css code of the framework file (for example, , .container_12 .clear). Still, in my opinion, renaming in case of probable conflicts is a more appropriate way.




Next, I will list all the additional classes for the grid element. They are additional because they exist only as additional classes to the main grid_X class. For example, 

  <div class = "grid_2 alpha" />




Alpha and Omega



Sometimes there are situations when it is necessary to put several others in one cell. As an example: we need two very long solid cells on the sides, 10 lines high, and one cell in the middle, on each of the ten lines.



In such cases, the alpha and omega classes should be used. The point is simple - if we put several other cells in the cell, then the first nested cell should be set to the class alpha, and the last, obviously, omega.

pastie.org/780095






By the way, the example is one of the rare cases when it is necessary to use the <br> tag.


If you need to nest only one cell, you only need to use the class alpha, without omega.




Prefix, Suffix, Push and Pull



These four additional classes are, in fact, a more abstract replacement for padding-left, padding-right, left, and right, respectively. It is worth noting that using these classes is much more convenient than calculating the necessary indents in the mind or on a calculator.

All of them have class names similar to the class names of the cells: class name_ X , where X is the number of columns of the modular grid.

Consider a simple example:



pastie.org/780097


And now let's apply the prefix_1, suffix_1, push_1 and pull_1 classes to each of the cells with a poem, respectively:



pastie.org/780099


That's all, the article lists all the features of 960gs, it remains to consider only a few points.

First, you can download the code with examples from the article at www.mediafire.com/?2jfqdxdtqow

Secondly, the framework site address: 960.gs. In the same place, clicking on the download you will receive a css file with two types of styles (12 and 16 columnar), as well as a whole bunch of extras, including templates for many graphic editors.

Thirdly, at the address www.spry-soft.com/grids is a wonderful generator of modular grids based on 960gs, which, including, is able to make rubber modular grids ( ! ), Be sure to appreciate this wonderful thing. It is with this tool that you can bypass the 960px limit set by the author.

Fourthly, I want to recommend the article habrahabr.ru/blogs/css/70203 to consolidate the material, if someone has not read.





On this, let me leave, wish you interesting and challenging projects in the new year!



UPD: Add (px, em,%) grid-generator gridinator.com . Thanks Pendalf .

And also the “rubber” version of the 960gs. www.designinfluences.com/fluid960gs . Thank you deavy

Source: https://habr.com/ru/post/80915/

More articles:



All Articles