Мы все были там раньше. У вас появилась идея для нового веб-сайта, и вы хотите начать его создание как можно скорее. С карандашом и бумагой вы разработали общее представление о макете и коде JavaScript.
Но, в отличие от прошлого раза, вам не нужно часами возиться с таблицами стилей. В отличие от других случаев, вам не нужно тратить время на переопределение значений Bootstrap по умолчанию.
Кроме того, вы слышали о TailwindCSS, но не знаете, какая разница. Плюс, кажется, есть некоторые противоречия.
Сейчас вам нужно простое решение, которое легко стилизовать. Более того, его должно быть просто настроить при необходимости.
Итак, сегодня мы рассмотрим четыре различных варианта — в произвольном порядке — для оформления вашего следующего побочного проекта.
(Примечание: количество звезд GitHub для каждого фреймворка точно на дату публикации этой статьи)
Spectre.css
⭐: 11.1K
Размер: ~10 КБ
npm install spectre.css --save
Spectre.css — это современная структура CSS, которая предоставляет элегантно оформленные компоненты без дополнительного JavaScript. Если вы использовали Bootstrap раньше, не должно возникнуть проблем с использованием Spectre.css, поскольку используемые имена классов очень похожи.
Используя Flexbox, Spectre может добавлять адаптивные макеты, которые отлично работают на мобильных устройствах. И, как и другие фреймворки в этом списке, Spectre предоставляет ряд стилизованных компонентов для удовлетворения большинства потребностей. Кроме того, мне нравится, как они рекомендуют настраивать с помощью переменных Sass.
Пико.css
⭐: 8.2K
Размер: ~10 КБ
npm install @picocss/pico --save
Для самых маленьких побочных проектов Pico.css ускоряет процесс. Фреймворк гордится тем, что имеет стили для всех нативных HTML-элементов без добавления каких-либо JavaScript или внешних зависимостей. Более того, у них даже есть бесклассовая версия для еще меньших размеров пакетов!
Хотя в Pico.css не так много компонентов, как в Spectre.css (таких как значки, нумерация страниц или фишки), базовые компоненты все же включены. Но он поставляется с темным режимом, адаптивными контейнерами на основе flexbox и чистыми семантическими элементами формы.
Настроить свою версию Pico.css очень просто. Либо измените переменные :root исходного кода, либо используйте SASS, как показано ранее.
Миллиграмм
⭐: 9.9K
Размер: ~2,2 КБ
npm install milligram --save
Не позволяйте размеру пакета обмануть вас. Milligram — это фреймворк, ориентированный на производительность, который предоставляет все необходимое. Так что это может стать отличной отправной точкой для вашего следующего проекта. Кроме того, вы почувствуете себя гораздо более продуктивным при написании более чистых сбросов CSS.
Применяя подход, ориентированный на мобильные устройства, включая адаптивную сетку, неудивительно, что Milligram удается получать около 3000 загрузок NPM в неделю.
Затем элементы могут быть переопределены по мере необходимости.
Скелет
⭐: 18.8K
Размер: ~18,7 КБ
Скачать zip-файл и добавить его в свой проект.
Skeleton — это простой CSS-фреймворк для быстрого начала работы. Его дизайн по умолчанию ориентирован на мобильные устройства и предоставляет служебные классы, стили темного режима и сетку на основе flexbox.
Весь фреймворк состоит из 400 строк кода, и часто вам остается достаточно, чтобы начать разработку. Более того, этот минималистичный подход позволяет легко расширять каждый элемент.
Заключение
Все четыре рассмотренных сегодня фреймворка могут помочь повысить производительность вашего сайта. В настоящее время средний вес страницы составляет 2,3 МБ, что неизбежно влияет на время загрузки страницы. Знаете ли вы, что 1 из 4 посетителей покинет веб-сайт, если он загружается дольше 4 секунд? Без сомнения, больше всего на размер бандла влияют массивные фреймворки CSS и JavaScript.
Облегченные CSS-фреймворки отлично подходят, если вам нужен простой макет веб-сайта, не тратя время на изучение тонкостей более крупных фреймворков, таких как Tailwind CSS, UIKit или Bootstrap.
Если вы хотите начать новый сторонний проект или уже используете один из этих четырех фреймворков, оставьте комментарий.
Спасибо за прочтение. Увидимся скоро.
Первоначально опубликовано на https://cs310.hashnode.dev.
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.
