—»     —»   CSS-фреймворк Cute Grids: гибкая сеточная система для адаптивной разметки
  Раздел: CSS/Style Sheets   Нет комментариев  

CSS-фреймворк Cute Grids: гибкая сеточная система для адаптивной разметки



В наши дни сложно игнорировать мощь мобильных технологий. Так что, если вы разрабатываете веб-сайт, то определенно только следует учитывать необходимость разрабатывать проект под мобильные устройства. Лучше всего будет разработать полностью адаптивную разметку. Сегодня мы хотим представить вашему вниманию удобный и опрятный CSS-фреймворк, который поможет вам без труда выполнить эту задачу. «Cute Grids» - это очень гибкая система, которая позволяет создавать сеточные разметки до 12 колонок в ширину. Cute Grids работает только с колонками, и больше ни с чем другим. Однако следует отметить, что она ответственно адаптирует их под размер окна браузера.

CSS-фреймворк Cute Grids: гибкая сеточная система для адаптивной разметки

Cute Grids: в буквальном смысле миниатюрный фреймворк

Cute Grids помогает вам отображать только колонки, и при этом сохраняет минимальный размер. Файл cutegrids.css содержит всего около 500 строк кода, а популярный скрипт normalize.css применяется для сброса стандартных CSS-параметров. Основа Cute Grids – это сетка из 12 колонок, которые можно комбинировать любыми способами. Вы можете создать две (2х6 колонок), три (3х4 колонок), четыре (4х3 колонок) или любую комбинацию значений.

Cute Grids отличает не только разрешения, но и устройства

Уникальное свойство Cute Grids заключается в том, что эта система способна отличать не только разрешения, но и также “узнает” настольные ПК, ноутбуки, смартфоны и планшеты. Таким образом у нас появляется возможность более точно определить нужное разрешение для сайта. Классы для смартфонов (от cute-1-phone до cute-12-phone) всегда представляются друг за другом, вне зависимости от размера. Это гарантирует то, что разметка сохранит несколько колонок вне зависимости от разрешения. Классы для планшетов (от cute-1-tablet до cute-12-tablet) позволяет гарантировать то, что колонки будут представлены в нужной очередности если окно браузера достигнет ширины как минимум 48em. Подобные же преимущества есть и для ноутбуков и настольных ПК.

<div class="row">
<div class="cute-6-desktop"></div>
<div class="cute-6-desktop"></div>
</div>
<div class="row">
<div class="cute-6-tablet"></div>
<div class="cute-6-tablet"></div>
</div>

В нашем примере мы создаем 2 строки с 2 колонками в каждой. Как только окно браузера сокращается в размере до 75em, колонки в первой строке перестают отображаться друг за другом, и вторая по счету колонка переносится под первую, а вторая строка остается такой как есть. Однако и вторая строка будет переформирована, если ширина окна браузера снизится до 48em.

Cute Grids работает и с другими классами, что позволяет вам определять дистанцию между колонками, а также очередность колонок в строке. Cute Grids по-максимуму сведен к минимуму, и у вас будет возможность применять нужный вам CSS-код. Вам обязательно следует ознакомиться с этим фреймворком, и возможно попробовать его в качестве основы для вашего следующего проекта.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, адаптивный дизайн
Опубликовал Design FactoRy   Прочитано (раз): 4546   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июнь 2017    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
2627282930