элементная база сайтостроения

Home Элементы Фреймворки CSS фреймворк Unsemantic

CSS фреймворк Unsemantic

ПОДЕЛИТЬСЯ
, / 939 0

Когда появились первые CSS фреймворки, это значительно облегчило труд веб-разработчиков, которые теперь могли создавать типовые макеты сайтов, используя колоночную сетку. Дизайн большинства сайтов можно представить в виде условной таблицы, а если разбить эту таблицу на большое число колонок и строк, то каждый структурный элемент сайта можно будет описать как ячейку, занимающую некоторое количество столбцов и строк. На этом принципе и основаны фреймворки, которые разбивают гипотетический будущий сайт на сетку, а веб-мастер использует готовые классы, чтобы расположить элементы по ней.

Первые фреймворки при всей их простоте и широком распространении, обладали существенным недостатком, они были рассчитаны на сайты с фиксированной шириной. Но сегодняшние тенденции интернет-серфинга таковы, что сайт должен обладать гибкой (резиновой) структурой, приспосабливающейся к размерам браузера. Логическим развитием резиновой верстки стала адаптивная верстка, когда при изменении разрешения устройства просмотра сайта, меняется его верстка, причем не просто пропорционально изменяя, боковая колонка уезжает под область контента, а горизонтальное выпадающее меню «схлопывается» до кнопки. Одним из фреймворков, рассчитанных на создание сайтов с адаптивным дизайном является Unsemantic CSS Framework.

Unsemantic — это преемник легендарного фреймворка 960 Grid, от которого унаследовал те же принципы наименования классов — ячейки называются grid, родительский класс container, классы для перемещения ячеек влево/вправо — push и pull. Главным отличием стал расчет числовых значений, которыми обозначаются ячейки. Если в сетке 960gs класс grid_4 обозначал, что ячейка занимает 4 колонки, то в Unsemantic значения указываются в процентах, либо кратно 5, либо кратно 33. Поэтому в Unsemantic числовое обозначение grid_40 обозначает, что ячейка занимает 40% ширины колонки, grid_33 — одна треть, 33%. Ширина макета сайта в Unsemantic по умолчанию равна 1200 пикселей.

Остальные принципы построения сетки не отличаются от системы 960: отступы у колонок равны 10 пикселам, что формирует 20-пиксельные дорожки между колонками. Классы push и pull сдвигают колонки вправо-влево, отделяя визуальное отображение информации на сайте от ее расположения в коде страницы (крайне полезно для SEO).

Фреймворк Unsemantic работает с препроцессором стилей SASS, что позволяет использовать для описания стилей динамические переменные. Unsemantic CSS Framework — это прогрессивное решение, которое позволяет веб-мастерам создавать профессиональные кроссбраузерные сайты быстро и просто.

Оставить сообщение

PASSWORD RESET

два × два =

REGISTER


один × три =

LOG IN