-
Главная
-
Разное
-
CSS-фреймворки
- Простая CSS-сетка на основе unsemantic.
Простая CSS-сетка на основе unsemantic.
Введение.
Для работы над сайтами весьма полезным является применение макетных сеток, они же css фреймворки. В своё время я выбрал для использования CSS фреймворк Unsemantic, как наиболее гибкий и удобный. В процессе работы с ним, мной была сделана его модификация, еще более удобная и гибкая. Позже в среде вебдизайна стал популярен Bootstrap. Я познакомился с ним. Моё главное ощущение от него - кондовость по сравнению с моей сеткой. ))) Но директора студий требуют бутстрап... Главный их довод - "у него хорошая документация" - можно ознакомить клиента, чтобы он не ломал вёрстку и соответственно - меньше проблем с поддержкой сайта. Посему пишу мануал. Благо моя сетка значительно проще. Я имею в виду мой фреймворк проще и намного гибче сетки Bootstrap. Если нужны её расширения - то вполне подойдёт jQuery UI.
Назвал я её незатейливо - "Простая CSS-сетка" )))
Собственно, вот она. CSS_simple_grid.rar. Внутри архива имеется этот мануал, а так же мануал на adapt.js.
Структура фреймворка и его установка.
Сам CSS фреймворк состоит из общего файла grid-base.css и условно подключаемых файлов, для разных диапазонов ширин окна браузера (grid_0.css ... grid_8.css), а так же типов устройств (grid_print.css - для вывода на печать). Все условные файлы практически идентичны между собой, имеют одинаковую структуру классов и их параметров. Ширины элементов для всех файлов заданны в процентах от ширины родительского элемента. Файлы отличаются только префиксами классов.
У классов grid-base.css префиксы отсутствуют, у файлов ширин grid_0.css ... grid_8.css префиксы соответственно g0_ .... g8_ , файл grid_print.css имеет префиксы print_.
Если вам недостаточно имеющихся вариантов - вы можете создать свой, просто скопировав и переименовав соответственно условный файл и префиксы классов в нём.
Viewport.
Чтобы заставить страницу масштабироваться до ширины окна просмотра, HTML-файлы, вызывающие CSS_simple_grid, должны использовать тег meta…
<head>
<!--
Отформатирован для удобства чтения
-->
<meta
name="viewport"
content="
width=device-width,
initial-scale=1,
minimum-scale=1,
maximum-scale=1
"
/>
</head>
Установка фреймворка .
Необходимо подключить общий файл с помощью html.
<link rel="stylesheet" href="/css/grid-base.css" />
А так же, некоторое количество условных файлов, с соответствующими условиями.
С помощью html тегов.
<link rel="stylesheet" media="(max-width:760px)" type="text/css" href="/css/grid_0.css" /> <link rel="stylesheet" media="(min-width:761px) and (max-width:980px)" type="text/css" href="/css/grid_1.css" /> <link rel="stylesheet" media="(min-width:981px) and (max-width:1280px)" type="text/css" href="/css/grid_2.css" /> <link rel="stylesheet" media="(min-width:1281px) and (max-width:1600px)" type="text/css" href="/css/grid_3.css" /> <link rel="stylesheet" media="(min-width:1601px) and (max-width:1920px)" type="text/css" href="/css/grid_4.css" /> <link rel="stylesheet" media="(min-width:1921px) and (max-width:2540px)" type="text/css" href="/css/grid_5.css" /> <link rel="stylesheet" media="(min-width:2541px)" type="text/css" href="/css/grid_6.css" /> <link rel="stylesheet" media="print" type="text/css" href="/css/grid_print.css" />
или с помощью javascript, например с помощью adapt.js (он приложен с фремворком)
/*
* Функция обратного вызова на событие window.resizing
*
* range - номер диапазона
* width - ширина окна
*/
var resizeFunc = function (range, width) {
// Псевдоним тега HTML.
var html = document.documentElement;
// Заменить ID в теге HTML.
html.id = 'range_' + range;
// Найди все экземпляры классов mobile, tablet или desctop, и убери их.
html.className = html.className.replace(/(\s+)?( mobile| tablet| desctop)/g, '');
if (range == 0)// для мобильного телефона
{
// Добавить класс "mobile"
html.className += ' mobile';
/*
* Дальше идут разные манипуляции для телефонной версии
*/
} else if (range <= 2)// для планшета
{
// Добавить класс "tablet"
html.className += ' tablet';
/*
* Дальше идут разные манипуляции для планшетной версии
*/
} else // для больших устройств
{
// Добавить класс "desctop"
html.className += ' desctop';
/*
* Дальше идут разные манипуляции для десктопной версии
*/
}
};
// Редактируйте в соответствии с вашими потребностями.
var ADAPT_CONFIG = {
// Где ваш CSS?
path: 'css/',
// Функция обратного вызова
callback: resizeFunc,
// false = Запускать только один раз, когда страница загружается в первый раз.
// true = Изменение размера окна и наклона страницы.
dynamic: true,
// Первый параметр в диапазон является минимумом.
// Последний параметр в диапазон является максимумом.
// Разделитель диапазоны по ключевому слову "to".
range: [
'0 to 760 = grid_0.css',
'760 to 980 = grid_1.css',
'980 to 1280 = grid_2.css',
'1280 to 1600 = grid_3.css',
'1600 to 1940 = grid_4.css',
'1940 to 2540 = grid_5.css',
'2540 = grid_6.css'
]
};
Javascript подключение позволяет синхронизировать смену таблиц css дополнительными манипуляциями с DOM посредством JS, как видно из вышестоящего примера.
Примечание: Для правильного функционирования сетки, файл grid-base.css должен быть подключён перед всеми условными файлами.
Структура классов.
Класс grid-container - задаёт общюю ширину сетки. Он должен быть определён в css файле проекта в общем случае, так и для необходимых диапазонов ширин и параметров media.
При подключении условных файлов при помощи html тегов параметры класса grid-container надо задавать с помощью css тега @media.
@media (max-width:760px) {
.grid-container {
width: 95%;
}
}
@media (min-width:761px) and (max-width:980px) {
.grid-container {
width: 90%;
}
}
@media (min-width:981px) and (max-width:1280px) {
.grid-container {
width: 87%;
}
}
@media (min-width:1281px) and (max-width:1600px) {
.grid-container {
width: 85%;
}
}
@media (min-width:1601px) and (max-width:1920px) {
.grid-container {
width: 82%;
}
}
@media (min-width:1921px) and (max-width:2540px) {
.grid-container {
width: 79%;
}
}
@media (min-width:2541px) {
.grid-container {
width: 2000px;
}
}
При подключении условных классов при помощи adapt.js определение класса лучше привязывать параметрам тега html.
.grid-container {
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px;
}
html#range_0 .grid-container {
width: 95%;
}
html#range_1 .grid-container {
width: 90%;
}
html#range_2 .grid-container {
width: 87%;
}
html#range_3 .grid-container {
width: 85%;
}
html#range_4 .grid-container {
width: 82%;
}
html#range_5 .grid-container {
width: 79%;
}
html#range_6 .grid-container {
width: 2000px;
}
Впрочем, данные методы можно сочетать, например для случая
@media print {
.grid-container {
width: 95%;
}
}
Почти все остальные имена классов подчиняются единым правилам. (Исключения будут описанны ниже.)
<ИМЯ КЛАССА>=<ПРЕФИКС_><ТИП><-ШИРИНА>
Где:
<ПРЕФИКС_> - соответствует имени условного файла и одинаков для всех классов внутри файла.
<ТИП> - определяет, что данный класс задаёт у элемента.
<-ШИРИНА> - задаёт ширину элемента, или величину свойства соответствующего типа.
ПРЕФИКС.
Для общего файла grid-base.css префикс отсутствует, у файлов ширин grid_0.css ... grid_8.css префиксы соответственно g0_ .... g8_ , файл grid_print.css имеет префиксы print_.
В принципе, вы можете создать собственные условные файлы для других типов медиоконтента, или условий подключения. Для этого достаточно скопировать один из условных файлов, переименовать его и заменить в нем все префиксы на свои.
ТИП
Типы элементов сетки: grid, alpha, omega, grid-parent, pull, push, prefix, suffix, hide-on, display. Описание типов будет приведено ниже.
ШИРИНА
Ширина блоков задается числом соответствующим величине в процентах с шагом 5 (0, 5, 10, 15....100), а так же 33 и 66, имеющих ширину соответственно 33.33333% и 66.66667%. В сетке ширин для типа grid есть одна особенность - класс grid-0 со всеми префиксами означает, что данный контейнер невидим (display: none;).
Описание типов элементов сетки.
grid - задаёт блок определённой ширины ,а так же внутренние отступы padding-left: 10px; и padding-right: 10px;
alpha - задаёт отсутствие левого внутреннего отступа в блоке (padding-left: 0;), omega - то же самое, только для правого внутреннего отступа (padding-right: 0;). Если требуется убрать оба поля, то приеняется тип grid-parent. Ширина у этих типов отсутствует.
Блок с нулевыми отступами нужен, например, для случае, когда внутри этого блока находится дочерняя подсетка., поэтому и название типа grid-parent
<div class="grid-container">
<div class="grid-50 g0_grid-100 g1_grid-100">grid-50 g0_grid-100 g1_grid-100</div>
<div class="grid-50 g0_grid-100 g1_grid-100 grid-parent g0_grid-parent g1_grid-parent">
<p>grid-50 g0_grid-100 g1_grid-100 grid-parent g0_grid-parent g1_grid-parent</p>
<div class="grid-33">grid-33</div>
<div class="grid-33">grid-33</div>
<div class="grid-33">grid-33</div>
</div>
</div>
grid-50 g0_grid-100 g1_grid-100 grid-parent g0_grid-parent g1_grid-parent
pull - Сдвигает влево элемент сетки на значение ширины.
push - Сдвигает вправо элемент сетки на значение ширины.
Если вы хотите поменять визуальное расположение столбцов, но не повлиять на порядок источников, вы можете использовать классы push-x и pull-x и/или их условные версии — y_push-x и y_pull-x. (где y - префикс класса) Вы, конечно, тоже можете их комбинировать.
Например:
<div class="grid-container">
<div class="grid-25 g0_push-25 g1_push-25">1</div>
<div class="grid-25 g0_pull-25 g1_pull-25">2</div>
<div class="grid-25 g0_push-25 g1_push-25">3</div>
<div class="grid-25 g0_pull-25 g1_pull-25">4</div>
</div>
Меняет блоки 1 с 2 и 3 с 4 местами на узких ширинах окна.
prefix - создаёт внешний отступ слева от блока на размер значения ширины, как будто там находится невидимый блок. Текущий блок сдвигается вправо от своего места.
suffix - создаёт внешний отступ справа от блока на размер значения ширины, как будто там находится невидимый блок. Текущий блок остается на своём месте, а следующий блок сдвигается вправо от своего места.
hide-on - скрывает текущий блок. По действию аналогичен классу grid-0.
display - показывает текущий блок. Этот тип элемента не задан для общего случая (без префикса класса), то есть имеет смысл только g0_display, g1_display и тд.
Пример использования prefix, hide-on и display:
<div class="grid-container">
<div class="grid-20 hide-on g0_display">1</div>
<div class="grid-20 hide-on g1_display prefix-20">2</div>
<div class="grid-20 hide-on g2_display prefix-40">3</div>
<div class="grid-20 hide-on g3_display prefix-60">4</div>
<div class="grid-20 hide-on g4_display g5_display g6_display g7_display prefix-80">5</div>
</div>
Этот пример показывает разные элементы, каждый в своём диапазоне ширин окна, сдвигая их, так, как будто остальные элементы присутствуют.
Элементы специальных классов.
Класс clear - задаёт невидимый блок нулевого размера, приводящий к тому, что следующий за ним блок всегда будет распологаться с новой строки.
В приведённом ниже примере первая группа содержит блок clear между 3 и 4 блоками сетки, а вторая нет.
<div class="grid-container">
<div class="grid-25 g0_grid-100 g1_grid-50">1 grid-25 g0_grid-100 g1_grid-50</div>
<div class="grid-25 g0_grid-100 g1_grid-50">2 grid-25 g0_grid-100 g1_grid-50</div>
<div class="grid-25 g0_grid-100 g1_grid-50">3 grid-25 g0_grid-100 g1_grid-50</div>
<div class="clear"></div>
<div class="grid-25 g0_grid-100 g1_grid-50">1 grid-25 g0_grid-100 g1_grid-50</div>
<div class="grid-25 g0_grid-100 g1_grid-50">2 grid-25 g0_grid-100 g1_grid-50</div>
<div class="grid-25 g0_grid-100 g1_grid-50">3 grid-25 g0_grid-100 g1_grid-50</div>
<div class="grid-25 g0_grid-100 g1_grid-50">4 grid-25 g0_grid-100 g1_grid-50</div>
</div>
<p> </p>
<div class="grid-container">
<div class="grid-25 g0_grid-100 g1_grid-50">1 grid-25 g0_grid-100 g1_grid-50</div>
<div class="grid-25 g0_grid-100 g1_grid-50">2 grid-25 g0_grid-100 g1_grid-50</div>
<div class="grid-25 g0_grid-100 g1_grid-50">3 grid-25 g0_grid-100 g1_grid-50</div>
<div class="grid-25 g0_grid-100 g1_grid-50">1 grid-25 g0_grid-100 g1_grid-50</div>
<div class="grid-25 g0_grid-100 g1_grid-50">2 grid-25 g0_grid-100 g1_grid-50</div>
<div class="grid-25 g0_grid-100 g1_grid-50">3 grid-25 g0_grid-100 g1_grid-50</div>
<div class="grid-25 g0_grid-100 g1_grid-50">4 grid-25 g0_grid-100 g1_grid-50</div>
</div>
С clear:
Без clear: