prosto.css Корзина: 0

prosto.css

UI-кит в духе fuckingwebsite.ru: чёрный текст на белом фоне, системный шрифт, рамки вместо теней. Подходит для блога, портала, интернет-магазина и чего угодно ещё — потому что скучный CSS — это работающий CSS.

… КБ · … строк · 0 зависимостей · 0 попапов · 1 файл

00 · Правила

Правила кита

  1. Чёрный текст на белом фоне. Контраст важнее вкуса.
  2. Системный шрифт. Он уже стоит у всех — незачем качать мегабайты.
  3. Ссылки выглядят как ссылки. Кнопки — как кнопки. Всегда.
  4. Никаких попапов, cookie-баннеров и всплывающих чатов.
  5. Никаких слайдеров, параллаксов и «вау-анимаций».
  6. Никаких теней, градиентов и скруглений. Рамка — это рамка.
  7. Единственный акцент — инверсия: навёл — чёрное стало белым.
  8. Работает везде. Быстро. И завтра тоже.
01 · Типографика

Типографика

Заголовок H1

Заголовок H2

Заголовок H3

Обычный абзац. В нём есть ссылка, немного inline-кода и важное слово. Наведите на ссылку — она инвертируется. Это весь «дизайн».

  • Список — просто список
  • Без кастомных буллитов
  • Без иконок

Хороший сайт — как хорошая дверь: открывается, закрывается, не скрипит.

— здравый смысл

Разделитель выше — это <hr>. Толстая линия. Всё.

02 · Кнопки

Кнопки

Обычная, залитая, маленькая и выключенная. Других не завезли.

Ссылка-кнопка

Наведение — инверсия. Фокус — рамка. Безопасно для глаз с 1995 года.

03 · Формы

Формы

Живая форма: попробуйте отправить пустую. Ошибки — текстом под полем, без всплывающих подсказок и «тряску». Ничего никуда не отправляется — это демо.

04 · Таблицы

Таблицы

Прайс-лист. Цифры выровнены таблично — цены не прыгают.

Позиция Кол-во Цена
Блокнот, 96 листов 2 480 ₽
Кружка белая 1 390 ₽
Ручка перьевая 1 1 200 ₽
Итого 4 2 070 ₽
05 · Магазин

Карточки товаров

Три колонки, карточка с рамкой, монохромное фото, цена, кнопка. Кнопка настоящая: счётчик «Корзина» в шапке действительно растёт. Никаких модалок «товар добавлен» — он и так добавлен.

Блокнот
Новинка

Блокнот

96 листов, клетка. Бумага, обёрнутая в бумагу.

240 ₽
Кружка
Хит

Кружка

Белая. В неё наливается чай.

390 ₽
Ручка
−20%

Ручка перьевая

Пишет. Даже чернила входят в комплект.

1 500 ₽ 1 200 ₽

Скидка честно зачёркнута. Доставка считается на следующем шаге, а не всплывает с обратным отсчётом.

06 · Уведомления

Уведомления

Рамка и текст. Ошибки отличаются красной рамкой — и всё.

Заказ №1042 отправлен.

Придёт в среду. Probably. Почта — как почта.

Ошибка.

Не заполнено обязательное поле. Поле подсвечено красным, вы это переживёте.

07 · Сетка

Сетка

Обычный CSS Grid: .grid + .cols-2 / .cols-3 / .cols-4, растяжка через .span-2 / .span-3. На узких экранах колонки честно складываются в одну.

1
2
3
4
1
.span-2
08 · Мелочи

Код, клавиши, пагинация

Подключение кита целиком:

<link rel="stylesheet" href="prosto.css">

Сочетание Ctrl + S сохраняет эту страницу. Можете сохранить — она и так полностью локальная.

Пагинация тоже кликается:

09 · Весь CSS

Весь кит целиком

Ниже — весь prosto.css, от первой строки до последней. Это не копия: исходник читается прямо из этой страницы.

…