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

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


4 сентября 2014, 12:00. Разместил: Design FactoRy
В наши дни сложно игнорировать мощь мобильных технологий. Так что, если вы разрабатываете веб-сайт, то определенно только следует учитывать необходимость разрабатывать проект под мобильные устройства. Лучше всего будет разработать полностью адаптивную разметку. Сегодня мы хотим представить вашему вниманию удобный и опрятный 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-код. Вам обязательно следует ознакомиться с этим фреймворком, и возможно попробовать его в качестве основы для вашего следующего проекта.
Вернуться назад