UIX
CSS Фреймворк для всего, минималистичный и простой.
Навигация
О Фреймворке
UIX - это очень простая и минималистичная CSS библиотека для лендингов, а также различных интерфейсов. Хотите стильный и минималистичный стиль для сайта? — используйте UIX!
Установка
Чтобы начать использовать CSS классы из UIX, добавь его на свою страницу:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Proxymal/UIX.css/src/uix.min.css">
Типографика
В UIX есть два типо размеров текста - фиксированные и
жидкие. Оба этих адаптивны, просто первый меняет размер
по брейкпоинтам, а второй - по формуле. Для фиксированных размеров
используются классы text-fixed-*, для жидких размеров -
text-fluid-*. Всего существует 9 размеров.
Демонстрация всех размеров:
<p class="text-fixed-1"> Размер 1 </p>
<p class="text-fixed-2"> Размер 2 </p>
<p class="text-fixed-3"> Размер 3 </p>
<p class="text-fixed-4"> Размер 4 </p>
<p class="text-fixed-5"> Размер 5 </p>
<p class="text-fixed-6"> Размер 6 </p>
<p class="text-fixed-7"> Размер 7 </p>
<p class="text-fixed-8"> Размер 8 </p>
<p class="text-fixed-9"> Размер 9 </p>
<p class="text-fluid-1"> Размер 1 (жидк.) </p>
<p class="text-fluid-2"> Размер 2 (жидк.) </p>
<p class="text-fluid-3"> Размер 3 (жидк.) </p>
<p class="text-fluid-4"> Размер 4 (жидк.) </p>
<p class="text-fluid-5"> Размер 5 (жидк.) </p>
<p class="text-fluid-6"> Размер 6 (жидк.) </p>
<p class="text-fluid-7"> Размер 7 (жидк.) </p>
<p class="text-fluid-8"> Размер 8 (жидк.) </p>
<p class="text-fluid-9"> Размер 9 (жидк.) </p>
Фиксированные размеры
Жидкие размеры
Также есть классы для различных шрифтов, жирности текста и выравнивания текста:
<p class="font-title"> Шрифт 1 </p>
<p class="font-text"> Шрифт 2 </p>
<p class="font-sans"> Шрифт Sans </p>
<p class="font-serif"> Шрифт Serif </p>
<p class="font-weight-normal"> Нормальный </p>
<p class="font-weight-bold"> Жирный</p>
<p class="font-weight-heavy"> Очень жирный </p>
<p class="text-center"> По центру </p>
<p class="text-left"> Слева </p>
<p class="text-right"> Справа </p>Цвета
Любой тег также можно стилизовать с помощью классов
цветов. Всего есть 9 оттенков цвета, первые цвета - более темные,
а последние цвета - более светлые. Чтобы стилизовать цвет
текста используются классы color-*, а чтобы
фон - bg-*.
<p class="color-1"> Цвет 1 </p>
<p class="color-2"> Цвет 2 </p>
<p class="color-3"> Цвет 3 </p>
<p class="color-4"> Цвет 4 </p>
<p class="color-5"> Цвет 5 </p>
<p class="color-6"> Цвет 6 </p>
<p class="color-7"> Цвет 7 </p>
<p class="color-8"> Цвет 8 </p>
<p class="color-9"> Цвет 9 </p>
<p class="bg-1"> Фон 1 </p>
<p class="bg-2"> Фон 2 </p>
<p class="bg-3"> Фон 3 </p>
<p class="bg-4"> Фон 4 </p>
<p class="bg-5"> Фон 5 </p>
<p class="bg-6"> Фон 6 </p>
<p class="bg-7"> Фон 7 </p>
<p class="bg-8"> Фон 8 </p>
<p class="bg-9"> Фон 9 </p>
Цвета текста
Цвета фона
Темы
UIX также позволяет применять темы как на всю страницу, так и на отдельные компоненты. Существует две темы: светлая и темная. Пример:
<div dark>
<p>Этот компонент - темный!</p>
</div>
<div light>
<p>Этот компонент - светлый!</p>
</div>
Отступы
Секция еще не дописана.
Компоненты
Секция еще не дописана.
Компоненты блога
Секция еще не дописана.
Кастомизация
Секция еще не дописана.
Прочее
Секция еще не дописана.
Закажи разработку
проекта