Использование UniCSS

Материал рассчитан на подготовленного пользователя

UniCSS — это css-фреймворк, с помощью которого выполняется HTML-верстка вашего сайта. Если ваш шаблон основан на UniCSS, то у вас есть возможность использовать все его возможности при оформлении своего сайта. Вы сможете

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

Как это работает

Делается это с использованием css-классов UniCSS, которые уже настроены под многочисленные задачи. Нужно лишь указать css-класс блока при редактировании текста.

Поскольку в основном редактирование происходит с использованием bb-кодов, то вы можете указывать css-классы прямо в них. Многие bb-коды позволяют это делать. Например вы хотите выделить красным цветом текст в DIV-блоке.

[div(t-red)]текст текст текст[/div]

Классов можно указывать сразу несколько. Например здесь блок оформляется оранжевым фоном, белым текстом и 10px внутренним отступом ( pad — от padding):

[div(bg-orange t-white pad10)]текст текст текст[/div]

Если необходимо оформить небольшой текст внутри блока, то обычно используется SPAN.

текст текст текст [span(t-blue i-info)]текст с иконкой[/span] текст текст текст

Всё, что вам нужно сделать, так это использовать стандартную возможность указывать css-класс у bb-кода. Если какой-то bb-код не поддерживает указание css-класса (их немного, но есть), то используйте обычные HTML-тэги с указанием атрибута class. Этот пример будет аналогичен выше приведённому.

текст текст текст <span class="t-blue i-info">текст с иконкой</span> текст текст текст
Такой код сложней, но позволяет использовать все возможности HTML5.