Введение.

Для работы над сайтами весьма полезным является применение макетных сеток, они же 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, table или desctop, и убери их.
    html.className = html.className.replace(/(\s+)?(mobile|table|desctop)/g, '');


    if (range == 0)// для мобильного телефона
    {
        // Добавить класс "mobile"
        html.className += ' mobile';
        /*
         * Дальше идут разные манипуляции для телефонной версии
         */

    } else if (range <= 2)// для планшета
    {
        // Добавить класс "table"
        html.className += ' table';
        /*
         * Дальше идут разные манипуляции для планшетной версии
         */

    } 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, omegagrid-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 alphaomega g0_grid-100 g0_alphaomega g1_grid-100 g1_alphaomega">
		<p>grid-50 grid-parent g0_grid-100 g0_grid-parent g1_grid-100 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-50 grid-parent g0_grid-100 g0_grid-parent g1_grid-100 g1_grid-parent

grid-33
grid-33
grid-33

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 местами на узких ширинах окна.

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>
1
2
3
4
5

Этот пример показывает разные элементы, каждый в своём диапазоне ширин окна, сдвигая их, так, как будто остальные элементы присутствуют.

Элементы специальных классов.

Класс 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:

1 grid-25 g0_grid-100 g1_grid-50
2 grid-25 g0_grid-100 g1_grid-50
3 grid-25 g0_grid-100 g1_grid-50
 
1 grid-25 g0_grid-100 g1_grid-50
2 grid-25 g0_grid-100 g1_grid-50
3 grid-25 g0_grid-100 g1_grid-50
4 grid-25 g0_grid-100 g1_grid-50

 Без clear:

1 grid-25 g0_grid-100 g1_grid-50
2 grid-25 g0_grid-100 g1_grid-50
3 grid-25 g0_grid-100 g1_grid-50
1 grid-25 g0_grid-100 g1_grid-50
2 grid-25 g0_grid-100 g1_grid-50
3 grid-25 g0_grid-100 g1_grid-50
4 grid-25 g0_grid-100 g1_grid-50

 

Никаких мыслей по поводу “Простая CSS-сетка на основе unsemantic.”