960 Grid System - 960 Grid System
|960 Grid System|
|License||GPL and MIT|
960 Grid System is a CSS library focused on the layout of a web page.
The library uses a main container ( div ) of a fixed size of 960 pixels, hence its name. This size was chosen because it is easily divisible into 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.
In order to use the library on a page, we must add it in the code:
<link rel=stylesheet href="ruta/960.css" type="text/css">
A page is structured using the HTML div tag . First, a main container is created that will contain the rest of the layers and will be divided into 12 or 16 columns. The number of columns and how many each layer will occupy is defined by the class attribute .
For the container div you can use the container_12 or container_16 classes to specify whether it will contain 12 or 16 columns.
For the inner layers, the grid_X class is used , where X is the value of the columns they will occupy.
The following code would create a page with a heading for a title that would occupy 12 columns. In the next row, two layers would be created, one for a menu with a width of 4 columns and another for the content of 8 columns. At the end there would be a layer as a footer occupying the 12 columns.
<div class="container_12"> <div class="grid_12">Cabecera</div> <div class="grid_4">Menú</div> <div class="grid_8">Contenido</div> <div class="grid_12">Pie de página</div> </div>
There are also the following complementary classes:
- alpha and omega : Used to create layers within layers.
- prefix_XX and suffix_XX : To create blank layers before or after the current layer.
Reset CSS styles
The library comes with the reset.css file , developed by Eric Meyer , which is used to eliminate some pre-established style values that web browsers assign to some elements, thus avoiding certain inconsistencies in the document display. [ 1 ] The file (reset.css), if bound as external, must be added before any other external CSS files:
<link href="ruta/reset.css" rel="stylesheet" type="text/css"/> <link href="ruta/960.css" rel="stylesheet" type="text/css"/>