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>
Фиксированные размеры текста

Фиксированные размеры

Жидкие размеры текста

Жидкие размеры

Также есть классы для различных шрифтов, жирности текста и выравнивания текста:

Для того, чтобы работали классы шрифтов, установите шрифт Inter через GoogleFonts.

<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>

Отступы

Секция еще не дописана.

Компоненты

Секция еще не дописана.

Компоненты блога

Секция еще не дописана.

Кастомизация

Секция еще не дописана.

Прочее

Секция еще не дописана.

Закажи разработку
проекта

Заполнить бриф