Назначение, происхождение и особенности Clever grid

Clever Grid - это набор CSS/JS компонентов из Bootstrap 3, которые не требуют подключеня всего фреймворка, а лишь своей маленькой необходимой части. Также в него входят уникальные компоненты, написанные специально для нужд данной библиотеки. CSS компонентов уменьшен в размере и уникализирован по внешнему виду, а так же переписан таким образом, чтобы не вступать в конфликты со стилями на любых клиентских сайтах, даже если на них уже используются какие-то компоненты Bootsrtap.

Компоненты Clever Grid предназначены для максимально быстрой и простой интеграции в любые сайты клиентов, находящиеся на поддержке. Они позволяют создавать css-сетки, таблицы, формы, модальные окна, табы, аккордеоны, поля и кнопки. Clever Grid позволяет не тратить часы на поиски и настройку плагинов, на стилизацию однотипных таблиц и форм, все это можно подключить к любому клиентскому сайту втечение пары минут.

Помимо стандартного внешнего вида, компоненты леко поддаются кастомизации под нужды сайта и имеют возможность настраиваемой под сайт адаптивности.

Таким образом Clever Grid ускоряет добавление CSS/JS-компонентов на сайты клиентов в разы, стандартизирует наш код, а клиенты получают надежные компоненты, проверенные тысячами разработчиков по всему миру.

Как использовать Clever grid?

Для использования Clever Grid не нужно подключать Bootsrap или какие-то другие бибилиотеки. Нужно лишь скопировать HTML, CSS, и Javascript(требуется не всегда), необходимый для нужного вам компонента в уже имеющиеся HTML, CSS, JS файлы сайта. Достаточно перейти в секцию "Использовать" любого компонента, и с помощью сочетания ctrl+a, ctrl+c скопировать код из окон с соответсвующими названиями. При необходимости, код можно модифицировать с помощью кнопок и полей, после чего взять его из того же окна, где он будет сгенерирован с новыми параметрами.

Сетка

ДемоСетка

1
1
1
1
1
1
1
1
1
1
1
1
clever-col-2
clever-col-2
clever-col-2
clever-col-2
clever-col-2
clever-col-2
clever-col-3
clever-col-3
clever-col-3
clever-col-3
clever-col-4
clever-col-4
clever-col-4
clever-col-6
clever-col-6
clever-col-5
clever-col-7
clever-col-4
clever-col-8
clever-col-3
clever-col-9
clever-col-2
clever-col-10
1
clever-col-11
clever-col-1-5
clever-col-1-5
clever-col-1-5
clever-col-1-5
clever-col-1-5
clever-col-12

ОписаниеСетка

Сетка работает идентично сетке Bootsrap 3, добавлена лишь возможность делать 5 колонок с помощью
класса .clever-col-1-5

Инструкция к применению:

Секта состоит из 12 условных колонок. Контейнер с классом .clever-grid - общий оберточный контейнер, контейнер .clever-row выполняет роль строки в таблице. Колонки всегда должны лежать в контейнере с классом .clever-row. Цифра на конце класса колонки обозначает долю, которую колонка будет занимать в 12-колоночном макете. Исключение составляют классы .clever-col-1-5, каждый из них всегда занимает 1/5 ширины макета. Всю конструкцию, как и отдельно строку с колонками можно вставлять в любые контейнеры на клиентком сайте, из-за своей относительный ширины они поделят любой контейнер на указанное количество колонок.

<div class="clever-grid">
  <div class="clever-row">
      <div class="clever-col-3"></div>
      <div class="clever-col-3"></div>
      <div class="clever-col-3"></div>
      <div class="clever-col-3"></div>
  </div>
</div>

Внимание! В сетку входит также класс .clever-clearfix, который работает также, как классческий класс .clearfix, достаточно понять схему работы классического .clearfix и использовать .clever-clearfix в любом месте сайта, не вникая в многочсленные странные реализаци этого метода на сайтах-рецепиентах.

Оффсеты-демоСетка

clever-col-3
clever-col-3 clever-offset-6

Оффсеты-описаниеСетка

Оффсеты позволяют создавать отступы между колонками с помощью классов .clever-offset-*, колонки создают отсупы слева от себя, последняя цифра в названии класса-оффсета означает ту часть 12-колоночной ширинры, которую займет отступ.

Пример:

Создадим три колонки шириной в 2 единицы и с оффсетами, равными 2 единицам между ними.

Разметка:

<div class="clever-grid">
    <div class="clever-row">
        <div class="clever-col-2">
            <div class="block">clever-col-2</div>
        </div>
        <div class="clever-col-2 clever-offset-2">
            <div class="block">clever-col-2</div>
        </div>
        <div class="clever-col-2 clever-offset-2">
            <div class="block">clever-col-2</div>
        </div>
    </div>
</div>

Результат:

clever-col-2
clever-col-2
clever-col-2

ИспользоватьСетка

HTML
CSS
Статичный CSS

Модальные окна

ДемоМодальное окно

ОписаниеМодальное окно

Модальное окно может вызываться по клику на любой элемент, достаточно добавить к нему два атрибута: data-toggle="modal" data-target="ваша модалка". Вместо "ваша модалка" обратитесь к вашему модальному окну по классу, идентификатору, имени или другому атрибуту.

Пример:

<a  data-toggle="modal" href="#" data-target="#first-modal">Ссылка на модалку</a>

<div class="modal clever-modal fade" id="first-modal" tabindex="-1">
    <div class="clever-modal-dialog">
        <div class="clever-modal-content">
            <div class="clever-modal-header">
                <button class="clever-modal-close-btn" data-dismiss="modal"><span class="clever-modal-close-cross">×</span></button>
                <span class="clever-modal-title" >Заголовок модального</span>
            </div>
            <div class="clever-modal-body">
                <form action="">
                    <div class="clever-form-group">
                        <span class="clever-form-label">Название поля</span>
                        <input class="clever-field" type="text">
                    </div>
                    <div class="clever-form-group">
                        <span class="clever-form-label">Название поля</span>
                        <textarea class="clever-field"  rows="3"></textarea>
                    </div>
                    <input class="clever-modal-submit-btn clever-btn" type="submit" value="Отправить">
                </form>
            </div>
        </div>
    </div>
</div> 

Размеры модалок и адаптивность:

Модалки имеют три размера: Дефолтный - 300 px, Средний - 600px (Добавить класс clever-modal-medium) и большой - 900px (Добавить класс clever-modal-big). С помощью формы ниже каждому из трех типов можно задавать свои размеры.

По умолчанию модальные окна не адаптивны, адаптивность легко включается кнопкой "добавить адаптивность". При включенной адаптивности, если размер окна станет меньше размера модалки по ширине, она начнет уменьшаться, вне зависимости от того, стоят у нее размеры по умолчанию или заданные кастомные.

ИспользоватьМодальное окно

Внимание! Если вы уже используете на сайте Табы или Коллапсы, нажмите кнопку "Я уже использую" ниже и получите JS код компонента без transition.js. Transition.js необходим каждому из этих компонентов для анимации, поэтому при использовании на сайте больше одного из них, нужно брать лишь код самого компонента, чтобы избежать дублирования скрипта transition.js.

Javascript
HTML
CSS
Статичный CSS c дефолтными размерами модалок: 300px, 600px, 900px

Табы

ДемоТабы стилизованные

1. Таб первый
2. Таб второй
3. Таб третий
4. Таб четвертый

ДемоТабы без стилей

1. Таб первый
2. Таб второй
3. Таб третий
4. Таб четвертый

ОписаниеТабы

Необходимая для табов разметка

<div class="clever-tabs">
    <ul  class="clever-tablist">
        <li class="active"><a href="#tab1"  data-toggle="tab">Таб первый</a></li>
        <li><a href="#tab2"  data-toggle="tab">Таб второй</a></li>
        <li><a href="#tab3"  data-toggle="tab">Таб третий</a></li>
        <li><a href="#tab4"  data-toggle="tab">Таб четвертый</a></li>
    </ul>
    <div class="clever-tab-content">
        <div id="tab1" class="clever-tab-pane fade in active">Таб первый</div>
        <div id="tab2" class="clever-tab-pane fade">Таб второй</div>
        <div id="tab3" class="clever-tab-pane fade">Таб третий</div>
        <div id="tab4" class="clever-tab-pane fade">Таб четвертый</div>
    </div>
</div>

Можно выбрать табы практически без стилей, для последующей кастомизации или с дефолтным внешним видом. Чтобы подключить к табам внешний вид, нужно всего лишь добавить к блоку с классом clever-tabs класс clever-tabs-styled.

Структура табов:

Табы-ссылки должны состоять из тегов <ul>, <li> и <a>. Таб-ссылка должна иметь атрибут data-toggle="tab" а в ее атрибуте href должна быть указана цель таб-ссылки, тоесть таб, который она открывает. Целевой таб можно указать по классу, айди, нейму и другим атрибутам тега.

Пример:

<div class="clever-tabs">
    <ul  class="clever-tablist">
        <li class="active"><a href=".first"  data-toggle="tab">Таб первый</a></li>
        <li><a href=".second"  data-toggle="tab">Таб второй</a></li>
    </ul>
    <div class="clever-tab-content">
        <div  class="first clever-tab-pane fade in active">Таб первый</div>
        <div  class="second clever-tab-pane fade">Таб второй</div>
    </div>
</div>

Контейнер для самих табов должен иметь класс clever-tab-content, а каждому табу должен быть присовен класс clever-tab-pane. К <li> таб-ссылки, которая должна быть активной при загрузке страницы должен быть вручную добавлен класс active. К изначально активному табу (блоку с классом clever-tab-pane) также должен быть добавлен класс active.

Чтобы получить плавный эффект переключения табов, к каждому табу нужно добавить класс fade, также при этом к изначально активному табу нужно добавить класс in, чтобы он стал видимым сразу при загрузке страиницы.

Адаптивность:

К стилизованным табам можно подключать адаптивность, а также выбирать точку на которой она будет отключаться самостоятельно. По умолчанию до разрешения в 767px, табы приспособлены для телефонных экранов а с 768px приобретают обычный вид.

ИспользоватьТабы

Внимание! Если вы уже используете на сайте Модалки или Коллапсы, нажмите кнопку "Я уже использую" ниже и получите JS код компонента без transition.js. Transition.js необходим каждому из этих компонентов для анимации, поэтому при использовании на сайте больше одного из них, нужно брать лишь код самого компонента, чтобы избежать дублирования скрипта transition.js.

Javascript
HTML
CSS (Стилизованные табы)
Статичный CSS
CSS (Нестилизованные табы)
Статичный CSS

Коллапс

ДемоКоллапс (стилизованный)

Заголовок коллапса
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione aliquid, corporis doloremque nobis, atque temporibus nisi reiciendis dolor nemo quo, minima in maiores error quae et. Ipsa officia facilis vel.

ДемоКоллапс (нестилизованный)

Заголовок коллапса
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, a, enim? Fugiat tempora officiis reiciendis fuga atque eius, doloremque, soluta ex quaerat assumenda perferendis placeat blanditiis, provident, quod architecto maiores!

ОписаниеКоллапс

На выбор есть 2 типа коллапсов - стилизованный и нестилизованный, нестилизованный отсавляет больше пространства для кастомизации, в нем ничего лишнего. Чтобы обозначить стилизованный коллапс достаточно лишь добавить к обертке коллапса с классом clever-collapse класс clever-collapse-styled.

Разметка коллапса:

<div class="clever-collapse">
    <a class="clever-collapse-link" data-toggle="collapse"  href="#collapse1">Заголовок коллапса</a>
    <div class="clever-collapse-content collapse" id="collapse1">
        <div class="clever-collapse-holder">Ваш контент</div>
    </div>
</div>

Весь HTML в разметке выше является обязательным для работы коллапса. Класс collapse у блока с классом clever-collapse-content также обязателен, он показывает, что коллапс изначально закрыт, без него коллапс не будет работать корректно при первом клике на него.

Атрибут href ссылки в примере равен id элемента с классом clever-collapse-content, тоесть контейнера, в которм лежит разворачиваемый контент, так устанавливается связь между ссылкой и контентом. Связь также можно установить с помощью классов, имен и других атрибутов тега.

Важно! Раскрываемый контент должен лежать исключительно в блоке с классом clever-collapse-holder а не в блоке с классом clever-collapse-content, иначе корректной работы коллапса не будет.

ИспользоватьКоллапс

Внимание! Если вы уже используете на сайте Модалки или Табы, нажмите кнопку "Я уже использую" ниже и получите JS код компонента без transition.js. Transition.js необходим каждому из этих компонентов для анимации, поэтому при использовании на сайте больше одного из них, нужно брать лишь код самого компонента, чтобы избежать дублирования скрипта transition.js.

Javascript
HTML
CSS

Формы

ДемоФормы

Заголовок для формы
Ваше имя
Ваш телефон
Ваш комментарий
Заголовок для формы
Ваше имя Типичный текст ошибки
Ваш телефон Типичный текст ошибки
Ваш комментарий Типичный текст ошибки
Заголовок для формы
Ваше имя
Ваш телефон
Ваш комментарий
× Ваши данные успешно отправлены

ОписаниеФормы

Формы имеют 4 основных внешних вида: Обычная форма с тенями, плоская форма, форма с выделенным заголоком и цветная форма. Все эти виды можно комбинировать. Чтобы назначить форме внешний вид, нужно просто добавить ее класс к блоку с классом clever-form. Формы являются изначально адаптивными, как только ширина окна браузера становится меньше ширины формы, форма становится резиновой и уменьшается вместе с окном. Ширину форм можно переназначить, адаптивность при этом сохранится.

Примеры:

.clever-form

Заголовок для формы
Ваше имя
Ваш телефон
Ваш комментарий

.clever-form-flat

Заголовок для формы
Ваше имя
Ваш телефон
Ваш комментарий

.clever-form-h-border

Заголовок для формы
Ваше имя
Ваш телефон
Ваш комментарий

.clever-form-flat.clever-form-h-border

Заголовок для формы
Ваше имя
Ваш телефон
Ваш комментарий

.clever-form-colored

Заголовок для формы
Ваше имя
Ваш телефон
Ваш комментарий

.clever-form-colored.clever-form-flat

Заголовок для формы
Ваше имя
Ваш телефон
Ваш комментарий

.clever-form-colored.clever-form-h-border

Заголовок для формы
Ваше имя
Ваш телефон
Ваш комментарий

.clever-form-colored.clever-form-h-border.clever-form-flat

Заголовок для формы
Ваше имя
Ваш телефон
Ваш комментарий

Ошибки полей:

Чтобы добавить в форму ошибки полей, нужно в контейнер поля с классом clever-form-group положить <span> с классом clever-error, <span> должен идти после тега <input>. По умолчанию ошибки не видны, чтобы сделать их видимыми нужно добавить к контейнеру поля с классом clever-form-group класс clever-form-group-wrong.
<div class="clever-form-content">
    <div class="clever-form-group">
        <span class="clever-form-label">Ваше имя</span>
        <input type="text" class="clever-field">
        <span class="clever-error">Типичный текст ошибки</span>
    </div>
</div>

Сообщение об успешной отправке:

Есть два типа сообщений об отправке: статичный и абсолютный, чтобы подключить один из них нужно добавить в форму разный html

Статичное сообщение:

Чтобы добавить статичное сообщение нужно добавить следующую разметку в то место формы, в котором вы хотите его видеть:

<div class="clever-form-success">
    <span class="clever-form-close-succ">×</span>
    Ваши данные успешно отправлены
</div>

По умолчанию сообщение не видимо, для его появления нужно добавить блоку с классом clever-form-success класс clever-form-succeed.

Разметка:

<form class="clever-form">
    <div class="clever-form-header">
        <span class="clever-form-title">Заголовок для формы</span>
    </div>
    <div class="clever-form-content">
        <div class="clever-form-group">
            <span class="clever-form-label">Ваше имя</span>
            <input type="text" class="clever-field">
        </div>
        <div class="clever-form-group">
            <span class="clever-form-label">Ваш комментарий</span>
            <textarea  cols="30" rows="10" class="clever-field"></textarea>
        </div>
        <div class="clever-form-clearing">
            <input type="submit" value="Перезвонить" class="clever-btn clever-form-submit">
        </div>
        <div class="clever-form-success clever-form-succeed">
            <span class="clever-form-close-succ">×</span> Ваши данные успешно отправлены
        </div>
    </div>
</form>

Результат:

Заголовок для формы
Ваше имя
Ваш комментарий
× Ваши данные успешно отправлены

Абсолютное сообщение:

Чтобы добавить абсолютное сообщение нужно добавить в форму следующую разметку:

<div class="clever-form-success-cover">
    <span class="clever-form-close-succ">×</span>
    <div>
        <div>
            Ваши данные были успешно отправлены
        </div>
    </div>
</div>

По умолчанию сообщение не видимо, для его появления нужно добавить блоку с классом clever-form-success-cover класс clever-form-succeed.

Разметка:

<form class="clever-form">
    <div class="clever-form-header">
        <span class="clever-form-title">Заголовок для формы</span>
    </div>
    <div class="clever-form-content">
        <div class="clever-form-group">
            <span class="clever-form-label">Ваше имя</span>
            <input type="text" class="clever-field">
        </div>
        <div class="clever-form-group">
            <span class="clever-form-label">Ваш комментарий</span>
            <textarea cols="30" rows="5" class="clever-field"></textarea>
        </div>
        <div class="clever-form-clearing">
            <input type="submit" value="Перезвонить" class="clever-btn clever-form-submit">
        </div>
        <div class="clever-form-success-cover clever-form-succeed">
            <span class="clever-form-close-succ">×</span>
            <div>
                <div>
                    Ваши данные были успешно отправлены
                </div>
            </div>
        </div>
    </div>
</form>

Результат:

Заголовок для формы
Ваше имя
Ваш комментарий
×
Ваши данные были успешно отправлены

Анимация появления ошибок и сообщений:

Анимация появления работает на CSS 3 и уже прописана в стилях формы, она включается динамческим добавлением соответсвующих классов clever-form-group-wrong и clever-form-succeed к элементам, с помощью любого Javascript кода. Запустите появление ошибок и сообщений у форм ниже, нажимая на кнопки "Показать".

Ошибки

Заголовок для формы
Ваше имя Типичный текст ошибки
Ваш телефон Типичный текст ошибки
Ваш комментарий Типичный текст ошибки

Статичное сообщение

Заголовок для формы
Ваше имя
Ваш телефон
Ваш комментарий
× Ваши данные успешно отправлены

Абсолютное сообщение

Заголовок для формы
Ваше имя
Ваш телефон
Ваш комментарий
×
Ваши данные были успешно отправлены

ИспользоватьФормы

HTML
CSS
Адаптивный CSS

Таблицы

ДемоТаблицы

Заголовок ячейки Заголовок ячейки Заголовок ячейки Заголовок ячейки
Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы

ОписаниеТаблицы

Таблица стилизуется простым добавлением к тегу <table> класса clever-table. Чтобы создать таблицу с границами по всем сторонам нужно добавить к тегу <table> еще и класс clever-table-bordered. Чтобы создать таблицу с подсветкой четных строк, нужно добавить класс clever-table-striped, чтобы создать таблицу с подсветкой строк по ховеру, нужно добавить класс clever-table-hover. Эти классы можно комбинировать.

Адаптивные и переполняющиеся справа таблицы:

Чтобы создать адаптивные таблицы и таблицы, которые при переполнении будут не вылезать за пределы контента а скроллиться нужно просто обернуть таблицу в блок с классом clever-table-responsive. Рекоммендуется оборачивать в него все таблицы по-умолчанию.

Пример адаптивной, скролящейся таблицы:

Заголовок ячейки Заголовок ячейки Заголовок ячейки Заголовок ячейки Заголовок ячейки Заголовок ячейки Заголовок ячейки Заголовок ячейки Заголовок ячейки Заголовок ячейки Заголовок ячейки Заголовок ячейки
Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы

Таблица без границ:

table.clever-table

Заголовок ячейки Заголовок ячейки Заголовок ячейки Заголовок ячейки
Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы

Таблица с границами:

table.clever-table.clever-table-bordered

Заголовок ячейки Заголовок ячейки Заголовок ячейки Заголовок ячейки
Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы

Таблица с подсветкой:

table.clever-table.clever-table-striped

Заголовок ячейки Заголовок ячейки Заголовок ячейки Заголовок ячейки
Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы

Таблица с подсветкой по ховеру:

table.clever-table.clever-table-hover

Заголовок ячейки Заголовок ячейки Заголовок ячейки Заголовок ячейки
Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы
Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы

ИспользоватьТаблицы

HTML
CSS
Статичный CSS

Кнопки

ДемоКнопки

ссылка

ОписаниеКнопки

<a href="" class="clever-btn">ссылка</a>

<input class="clever-btn" type="submit" value="input">

<button class="clever-btn">button</button>

ИспользоватьКнопки

CSS

Поля

ДемоПоля

Ваше имя
Ваш комментарий

ОписаниеПоля

Отдельные поля

<input type="text" class="clever-field">

<textarea class="clever-field"></textarea>

Поля с заголовками

<div class="clever-form-group">
    <span class="clever-form-label">Ваше имя</span>
    <input class="clever-field" type="text">
</div>
<div class="clever-form-group">
    <span class="clever-form-label">Ваш комментарий</span>
    <textarea class="clever-field"></textarea>
</div>

ИспользоватьПоля

CSS