CSS-фреймворк для лентяев?  Публичный пост

Я не умею и не люблю верстать. Когда-то в прошлой жизни любил и умел — но это были ещё девяностые, и мы делали это на таблицах и айфреймах. С тех пор каждый раз, когда я вижу HTML и CSS, моя рука тянется к пистолету, но к сожалению, делать фронт для маленьких игрушечных проектов иногда приходится.

Лет 10 назад я открыл для себя Bootstrap, и им в таких случаях и пользовался. Но он уже успел набить оскомину, да и фронт вроде не стоит на месте. Так что хочется найти что-то новое, что:

  1. Будет просто в использовании
  2. Выглядеть круто и ново
  3. Закрывать не-функциональные требования, о которых я могу сам и не знать

И именно из-за пункта 3 и прошу помощи сообщества: unknown unknowns пугают.

13 комментариев 👇
Dima Ollyak, софтваре инжениир 24 апреля в 14:47

+1 к Tailwind.
Вряд ли когда-либо его возьму в заказной проект, но для личного проекта идеально.

Раскрою мысль. Tailwind идеален для проекта, где требования устанавливаешь ты сам:

— Шрифт может быть размера lg, xl, 2xl, 3xl.
— Пойдет!

Если же требования ставит другой человек, то рано или поздно случится такое:

— Шрифт может быть размера lg, xl, 2xl, 3xl. Но для гарнитуры X в компоненте Y размер 22px. А если этот компонент с фоном, то 24px. Если с картинкой, то 23px.
— Бля.

Таilwind позволяет такое сделать, но после n таких ситуаций код получается запутаннее, чем сразу все сделать в sass, Emotion и т.п.

  Развернуть 1 комментарий
Tim Reznichenko, Co-founder | Team Lead 24 апреля в 08:48

Ant Design пока лучший UI kit, который я юзал.
Многим нравится Tailwind, но он мне кажется плохим решением.

А так скажу, что сейчас верстка (по крайне мере в React) стала +- безболезненной, если юзать styled-components или emotion. Особенно если выделить общие компоненты в UI библиотеку по атомарному подходу.

  Развернуть 1 комментарий

Нравится Tailwind и Halfmoon (https://www.gethalfmoon.com)

  Развернуть 1 комментарий
Евгений Храмков, Фронтенд Разработчик 24 апреля в 13:11

Про https://tailwindcss.com уже упомянули, но добавлю и от себя.
У него есть свою плюсы и минусы, но для случая "маленьких игрушечных проектов" на мой взгляд это идеальное решение:

  • выглядит свежо и очень легко кастомизируется (в отличие от того же бутстрапа)
  • легко ложится на любой фронтенд фреймворк или его отсутствие

в добавок есть официальные ништяки от разработчиков:

  • если используете Vue либо React есть https://headlessui.dev библиотека хедлесс компонентов, на которые можно добавить свои классы из тэйлвинда и за вечер собрать базовый ui kit для своего проекта
  • https://tailwindui.com - (это уже за отдельную плату) набор готовых сниппетов, компонентов и экранов, задизайненых с тэйлвиндом: выбираете интерфейс который нужно, будь то кнопка, карточка или шелл приложения, и копируете под свой проект - на выбор сниппеты на чистом html, либо Vue/React (с использованием headlessui)

Я сам сначала относился с сомнением к проекту, но когда попробовал мне очень понравилось - весьма ускоряет разработку небольшого проекта, когда хочется нужен чистый и приятный интерфейс и пара фунциональных компонентов, а тащить громоздкий ui kit не хочется

  Развернуть 1 комментарий

Мне https://bulma.io зашла, изучается легко, выглядит свежо

  Развернуть 1 комментарий

@gashkov, + за Bulma.
Как-то по совету от этого парня @rozhok взял этот фреймворк для своего первого учебного проекта. Абсолютно не умея в фронт, получилось очень даже сносно и вполне было легко разобраться.

  Развернуть 1 комментарий

Вот список можете посмотреть https://github.com/troxler/awesome-css-frameworks

Я пользуюсь Bulma, но там есть недостаток—размер бандла получается большой, нет нормальной минификации из коробки как в tailwind.

  Развернуть 1 комментарий

@rozhok, в итоге взял кстати именно его, вопреки всем советам в комментариях. Но разве 200кб, которые после первого открытия страницы сайта остаются потом в кеше браузера это много?

  Развернуть 1 комментарий

@golergka, ну, в моем проекте это 335 KiB несжатых, я думаю что это многовато для пары стилей.

Tailwind весил бы 30 KiB несжатых наверное.

  Развернуть 1 комментарий

https://milligram.io/ хорошо стилизует дефолтные элементы html.

Вообще рекомендую вам под каждый свой игрушечный проект искать готовый uikit подходящий по стилю. https://themeforest.net/tags/ui%20kit

  Развернуть 1 комментарий
Yaroslav Shelomentsev, Веб-разработка 25 апреля в 11:14

ребята спасибо за тред и tailwind. ант конечно хорош, но тут похоже топчик на N лет вперед.

  Развернуть 1 комментарий

@acrobat, бери windicss. Тот же таилвинд, только ко компиится как ракета

  Развернуть 1 комментарий

Мне зашло вот этот
https://spiderpig86.github.io/Cirrus/

  Развернуть 1 комментарий

😎

Автор поста открыл его для большого интернета, но комментирование и движухи доступны только участникам Клуба

Что вообще здесь происходит?


Войти  или  Вступить в Клуб