CSS фреймворк 960.gs

Как и обещал, продолжаю рассказывать про CSS фреймворки. На этот раз уже мой рассказ уже о конкретном — 960.gs.

На официальном сайте фреймворка имеет онлайн генератор кода, позволяющий настроить его под Ваши нужды. Генератор имеет немного настроек, рассмотрим их подробнее:

  • Column width — ширина столбца
  • Number of columns — число столбцов
  • Gutter width — расстояние между столбцами

Все эти значения задаются в пикселах. Установив галочку в чекбоксе Check to edit the width (Отметьте, чтобы редактировать ширину) Вы сможете задавать произвольную ширину окна. По умолчанию — 960 пикселов, оптимальная для разрешения 1024 на 768. Можете здесь указать свою ширину.
Под настройками имеется пример будущей сетки, меняющийся в реальном времени.
После того, как все настройки произведены, можно смело скачивать файл по ссылке Download CSS File. Вы получите готовый к употреблению файл, напичканный различными стилям. Что же там за стили? Смотрим.
В файле нас ожидают специальные классы, которые нужно использовать при верстке.

  1. .container_12 {
  2. 	margin-left: auto;
  3. 	margin-right: auto;
  4. 	width: 960px;
  5. }

Этот класс для контейнера, включающего в себя все другие блоки. Число 12 означает, что полностью контейнер состоит из 12 ячеек.

  1. .grid_1,
  2. .grid_2,
  3. .grid_3,
  4. .grid_4
  5. ...

Это отдельные ячейки. Точнее будет сказать, класс grid_1 — одна ячейка, grid_2 — две, объединенные в одну, и так далее, то есть число на конце класса означает число единичных ячеек, объединенных в одну, в слое.

  1. .alpha {
  2. 	margin-left: 0;
  3. }
  4.  
  5. .omega {
  6. 	margin-right: 0;
  7. }

Эти два класса служат для того, чтобы убрать поля слева или справа от ячейки.

  1. .suffix_1
  2. .prefix_1

Классы суффикс и префикс позволяют задать отступы внутри ячеек.

  1. .clear

Простой класс очистки.
Вобщем-то не много классов и не должно быть сильно сложно. Но перейдем к делу. Сверстаем элементарный шаблон:

  1. <!DOCTYPE html>
  2. <html dir="ltr" lang="ru-RU">
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>960.gs</title>
  6.         <link rel="stylesheet" href="grid.css" type="text/css" media="screen" />
  7.         <style>
  8.             div.border {
  9.                 border: 2px #000 solid;
  10.                 padding: 10px;
  11.                 margin-bottom: 20px;
  12.             }
  13.         </style>
  14.     </head>
  15.     <body>
  16.         <div class="container_20">
  17.             <div class="grid_4 prefix_16">
  18.             </div>
  19.             <div class="clear"></div>
  20.         </div>
  21.         <div class="container_20">
  22.             <div class="grid_15 ">
  23.             </div>
  24.             <div class="grid_5 ">
  25.             </div>
  26.             <div class="clear"></div>
  27.         </div>
  28.         <div class="container_20">
  29.             <div class="grid_6 prefix_14">
  30.             </div>
  31.             <div class="clear"></div>
  32.         </div>
  33.     </body>
  34. </html>

Довольно просто и быстро. А результат смотрите тут.

Запись опубликована в рубрике HTML & CSS с метками , , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">