• Шаблоны для вашего сайта
  • Сделать сайт
  • Реклама
  • Berry CSS
  • Albireo Framework
  • Бесплатный HTML-курс
  • Telegram-канал
  • Обратная связь
MaxSite.org
О создании сайтов и не только
Создание сайтов под ключ →
Вход
×
или зарегистрироваться

CSS: унификация классов и прототипирование (часть 2)

CSS, HTML, LESS, SASSПросмотров: 12322Комментарии: 020 декабря 2014 г.

Классы UniCSS состоят из простых css-правил. Этот фреймворк не задает UI сайта. Его задача — перенести верстку с уровня css-файла в html-код.

Смотрите. Обычно мы делаем так (простой пример):

<div class="my-top">
...
</div>
 
.my-top { 
    margin-top: 20px;
    padding: 10px;
    color: #FFF;
    background-color: #888;
}

C помощью UniCSS будет уже так:

<div class="mar20-t pad10 t-white bg-gray500">
...
</div>

То есть мы написали тот же самый код, только в HTML в виде самостоятельных классов. Если проанализировать работу верстальщика, то это постоянное переключение между css и html файлами. Здесь же мы работаем только с html. Вы удивитесь, сколько это экономит времени и насколько упрощает работу!

В данном примере .my-top какой-то «технический» класс, не содержащий уникальных стилей. Отступы, фон, текст, ширина и прочие примитивы. При использовании UniCSS уже не требуется создавать отдельный класс блока. CSS-код будет гораздо (многократно!) меньше.

Общая структура фреймворка

Основной файл style.scss, где и выполняется подключение sass-файлов. Каталог UniCSS собственно и содержит классы фреймворка.

Каталог main это то, где и выполняется верстка сайта. Причем файлы в этом каталоге подключаются вручную в style.scss, а не все скопом.

В файле main/_base.scss прописаны базовые стили. Это сбросы, подключение шрифтов, а также основная типографика. В этом файле по возможности прописываются только стили тэгов без классов. Выносить в less-переменные какие-то значения для этого файла не имеет смысла, поскольку они будут только единыжды использованы. Так что проще сразу задать нужные css-стили.

Файл main/_variables.scss для задания переменных. Эти переменные могут быть использованы в файлах UniCSS.

Общий порядок работы такой:

  • Выставляем в main/_variables.scss нужные значения.
  • Правим main/_base.scss под нужный дизайн.
  • Свои стили в каталоге main.

Sass-функции

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

Группы классов

Классы UniCSS разделены на функциональные группы по файлам. Если какая-то группа не требуется, то файл можно удалить. Или, наоборот, добавить новый.

Обновление фреймворка

Важный вопрос — как обновлять UniCSS? Мой совет — никак. Для каждого сайта используйте только ту версию, с которой начали работать. Строго говоря, обновлять не следует и любой другой css-фреймворк, поскольку измененные классы/стили/файлы могут поломать сайт.

Цвета

Охватить всю гамму цветов нереально, поэтому за основу взят принцип, что любой дизайн можно составить из 5-ти основных и 5-ти дополнительных цветов. Они задаются в less-переменных. Само значение цвета может быть любым, а можно взять готовые решения из гугловского material design. Они определены как less-переменные в _colors-gmd.scss.

Серому цвету (серая градация) отдано особое значение, поскольку он часто используется для прототипирования. Он также задается в less-переменных.

Цвета задаются для текста (t-), фона (bg-), границ (bor-) и градаций (gr-).

Сетка. Ширина. Адаптивность

Используется только flex-сетка. IE9 уже мало кого интересует, поэтому ограничений по браузерам можно сказать, что нет. Те, кто уже работает с flex, прочуствовали всю прелесть такого решения.

Для задания ширины используется width с шагом 1%. Такой мелкий шаг часто нужен для задания промежутков. Например три колонки по 32%. Конкретные ширины указываются в _variables.scss, где можно оставить толькт те варианты, которые будут востребованы.

Адаптивность реализуется через постфиксы -tablet и -phone. За основу берется desktop first, то есть вначале определяются стили десктопов (широкие экраны — это дефолт), далее tablet и в конце phone. Это отличается от mobile first других css-фреймворков, но зато проще для понимания. Технически же это просто последовательность задания классов.

Для адаптивности используется только точки: 768px и 480px (задаются в sass-переменных). Всего доступно несколько точек: SMALL, PHONE, TABLET, MEDIUM, DESKTOP, LARGE. Все они также настраиваются.

Точные размеры

Поначалу я решил, что оптимально будет использовать абстрактные размеры, вроде t-small, pad-large. В процессе создания сайтов выяснилось, что такая абстракция только усложняет работу. Какой бы ни был абстрактный класс, в результате нужно получить точный размер. Поэтому проще сразу указать нужный класс: t250 (2.5rem), pad50 (50px), t24px (24px), w992px (992px).

Для текста используются единицы rem — это позволяет задавать размер от корневого элемента сайта (body), а не от родительского блока.

Layout-сетка

Модульная (layout) сетка может быть глобальной для всего сайта, либо локальной для каждого блока. Модульная сетка — это не flex. Задача модульной сетки — расположение глобальных блоков: шапка, подвал, сайдбар и т.п. Технически модульная сетка бывает двух вариантов: со 100% шириной браузера и с центральным позиционированием. Вот так задано центрирование:

.layout-center {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	max-width: $layout_max_width;
}

Если нужно задать фон на всю ширину браузера, а содержимое отцентрировать, то используется дополнительный wrap-блок.

<div class="layout-center-wrap"><div class="layout-wrap">
...
</div></div>

Для div.layout-center-wrap можно задать дополнительное оформление, например фон и отступы.

<div class="layout-center-wrap bg-gray200 pad20-tb"><div class="layout-wrap">
...
</div></div>

Бордюры

С ними пришлось повозиться, поскольку охватить все возможные варианты очень сложно. Поэтому придумал простую вещь — отдельно задаются разные параметры border: border-style, border-width и border-color. Например, чтобы отобразить левую серую границу в 3px:

<h6 class="bor-gray700 bor-solid-l bor3">Текст</h6>

Это довольно объёмынй код, но только так можно охватить все варианты. Если ширина равна 1px, то её можно не указывать:

<h6 class="bor-gray300 bor-dashed">Текст</h6>

Иконки

Для иконок используется Font-Awesome. Из-за этого размер css-файла увеличивается почти на 40Кб. Это много, но с другой стороны это аж 675 иконок! Думаю, что оно того стоит.

Отступы

Поскольку размеров много (5, 6, 7, 10, 15, 20, 25, 30, 40, 50px), да еще и с !important, то получается довольно большой объём кода. Если какие-то значения не нужны, то их можно удалить. Или добавить новые. Данный ряд возник в процессе работы над сайтами, но у вас может быть другой вариант.

Классы UniCSS в своём css-коде

Можно делать так (тот же пример, что и вверху):

<div class="my-top">
...
</div>
 
.my-top { 
    @extend .mar20-t;
    @extend .pad10;
    @extend .t-white;
    @extend .bg-gray500;
}

ps Кстати, по задачке из первой части: «Почему, например, нельзя сделать двуколоночную сетку 29% и 14% с промежутком 8% выровненным по центру, но смещенным слева на 50px?». В UniCSS это будет так (добавил цвета для красоты):

<div class="flex flex-hcenter bg-color1">
	<div class="w29 mar50-l bg-gray200">29%</div>
	<div class="w8 bg-gray300"></div>
	<div class="w14 bg-gray400">14%</div>
</div>

Первая часть


Создание сайтов (Украина) →
Как выложить свой проект на GitHub.com
CSS: унификация классов и прототипирование (часть 1)
twitter.com facebook.com
Другие записи сайта
Обработка исключений и ошибок в PHP
Обработка исключений и ошибок в PHP
PHP-микрофреймворк своими руками. Основы
PHP-микрофреймворк своими руками. Основы
Немного о своём PHP-фреймворке
Немного о своём PHP-фреймворке
Учимся работать с шаблоном MF. Настройка дизайна
Учимся работать с шаблоном MF. Настройка дизайна
Программа мечты - третий претендент
Программа мечты - третий претендент
Работы по «MF». Редактирование записи на странице записи
Работы по «MF». Редактирование записи на странице записи
Оставьте комментарий!

Комментарий будет опубликован после проверки. Вы соглашаетесь с правилами сайта.

(обязательно)

Навигация
  • Шаблоны для MaxSite CMS 22
  • jQuery и JavaScript 6
  • Java и Android 5
  • PHP/ООП 25
  • SQL 17
  • Albireo Framework 11
  • Berry CSS 7
  • CSS, HTML, LESS, SASS 23
  • PHP 37
  • Тайм-менеджмент 9
  • Софт 37
  • SEO 13
  • Git. GitHub 3
  • CodeIgniter 5
  • Landing Page 3
  • Alpine.js 14
  • Фильмы 2
  • Дневник 55

Вот здесь можно заказать создание сайта, шаблона или лендинга. Также вы можете выбрать готовые шаблоны для MaxSite CMS по небольшой цене. Также можно купить отдельные модули, компоненты для вашего сайта.

MaxSite.org
Как создать свой сайт

Услуги по созданию сайтов, блогов, лендингов
Обратная связь • Реклама на сайте
Карта сайта
Мои проекты
  • Шаблоны для вашего сайта
  • Заказать создание сайта
  • MaxSite CMS
  • Berry CSS (CSS Utilities)
  • Albireo Framework
  • UniCSS (Universal Atomic CSS)
  • Landing Page Framework
  • Бесплатные НТML-курсы
Ссылки
  • Telegram-канал
  • Github
  • Twitter
  • Telegram-бот
  • RSS
© MaxSite.org, 2006-2022. Работает на MaxSite CMS | Время: 0.3220 | SQL: 20 | Память: 4.61MB | Вход