Категория: CSS.
Фреймворк (от англ. framework — каркас)
Вы возможно уже слышали о CSS Frameworks таких как Blueprint, Grid System 960, Elastic и так далее. Также есть мнения что они могут быть хорошей отправной точкой для развития собственных работ и значительно сокращают время вёрстки шаблонов для web сайтов. Но так-ли это на самом деле? В этой статье мы рассмотрим то, как использовать CSS Frameworks на примере одного из наиболее популярных CSS фреймворков Grid System 960.
И так CSS Frameworks – это инструмент который предоставляет web – дизайнеру (разработчику) четкую архитектуру, основанную на довольно точных записанных правилах, которые позволяют выполнять вёрстку шаблонов дизайна для web сайтов не начиная с нуля.
А что такое CSS Frameworks- Grid System 960.
Grid System 960-представляет собой связку таблиц стилей, которые предусматривают общий контейнер расположенный на сетке. Структура делает доступным две стеки: первая сформирована 12 колонками, а вторая 16 колонками. В обеих сетках ширена общего контейнера всегда остаётся 960px.
Почему выбор размера 960px?
Все современные мониторы поддерживают к настоящему времени минимальное разрешение 1024×768 пиксел. Цифра 960 является делимой на 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 и 480. Это даёт намного более гибкие комбинации относительно измерений колонок которые могут быть сделаны.
На изображениях ниже вы можете видеть примеры двух сайтов которые были сделаны с использованием двух разных сеток, первая с 12 колонками вторая с 16.
Как использовать рамки Grid System 960.
Для начала конечно нужно просмотреть архив CSS framework Grid System 960, и распаковать его, берём оттуда папку css и перемещаем её туда где будут находиться все файлы шаблона. Теперь запускаем ваш любимый редактор(я рекомендую Adobe Dreamweaver) и создаём документ index.html. Подключим к документу index.html все необходимые файлы фреймворка.
Вставить между тегами head
Также создадим отдельный css файл “style.css” в котором будут находиться наши собственные правила стилей, сохраняем его в папке path, это сделано для того чтобы не вносить изменения в css файлы фреймворка.
Подключим “style.css”
Как выбрать контейнер/сетку для использования.
Теперь мы должны выбрать тип сетки которую хотим использовать 12-колоннок (. Container_12) или 16-колоннок (. Container_16). Мы знаем что обе сетки имеют размерность 960px, разница заключается только в том что 12-колоннок делит размерность на 12, а 16 соответственно на 16.
Класс который выбирает тип сетки выглядит так:
Или
Как установить размер колонок?
Когда мы хотим разделить наш контейнер в несколько столбцов, для этого достаточно просто использовать класс. Grid_XX, в котором “XX” представляет число колонок (сетки выбранной в качестве контейнера). Из которых будет составлен колонка, которую мы хотим получить.
Например, если мы хотим иметь две колонки (боковое меню и содержание) достаточно указать это так:
основное содержание боковое меню
Класс «grid_7» указывает на то, что у боковой колонки меню должен быть размер равный 7 колонкам выбранной сетки.
Как Вы можете видеть, сумма первой колонки (grid_7) со второй колонкой (grid_5) точно 12, общее количество колонок которые составляют сетку контейнера, который мы выбрали (container_12). Таким образом не нужно знать ширину которую должна иметь каждая единственная колонка, тем самым легче изменять размеры наших колонок во время развития вёрстки.
Давайте посмотрим на другой пример, нам нужно разделить наш основной контейнер на три колонки равного размера, нет необходимости делать какие-то вычисления для того чтобы определить нужный размер в пикселах, которая должна иметь каждая колонка. Достаточно применить немного математики, чтобы получить следующее:
раздел 1 раздел 2 раздел 3
Как вы видите сумма этих трех колонок grid_4 точно 12 (4 + 4 + 4).
Отступы между колонками.
Предопределенные настройки столбцов имеют определенный отступ между ними. Каждый класс grid_XX имеет 10px. отступа и справа и слева. Если мы хотим убрать например отступ у первой и последней колонки нашего макета, надо добавить класс “alpha” это уберёт отступ с левого края и “omega” для правого.
Вот пример:
раздел 1 раздел 2 раздел 3
Мы в примере сделали, так что у первой колонки не будет отступа слева, а у последней справа.
В случае если мы захотим оставить одну или несколько пустых пространств до и после колонки.
Для того чтобы оставить одно или более пустых мест до или после колонки, надо использовать классы “prefix_XX” или “suffix_XX”, в место XX надо указать количество колонок которые вы хотите оставить пустыми.
Давайте посмотрим пример:
... ...
В этом примере мы установили, что перед колонкой grid_7 будет находиться пустое пространство равное одной колонке, и также после колонки grid_3 будет одна пустая колонка.
Не забывайте что сумма всех колонок, в том числе и пустых должна быть равна 12 (grid_7 + grid_3 + prefix_1 + suffix_1) или 16 если вы выбрали соответствующую сетку.
Выводы
Как вы могли наверно заметить CSS framework, даёт возможность значительно сэкономить время в процессе верстки дизайна сайта. Очевидно, никто не запрещает персонализацию платформы согласно Вашим реальным потребностям, поскольку эти решения никогда не могут быть универсальными, особенно относительно верстки Ваших работ. Поэтому советую не останавливаться на простом использовании рамок, а идти дальше и экспериментировать .
Или