Dobrovoi Master
сделано с душой

В состоянии постоянного подключения...
Главная » Веб-Дизайн » 22 Облегченных CSS-фреймворка для быстрого старта

22 Облегченных CSS-фреймворка для быстрого старта

Времена, когда сайты клепали «на коленке», с чистого листа, уже давно прошли. Использование различных CSS-фреймворков стало обыденной практикой, а если проект реализуется разработчиком на основе качественной CSS-структуры, достигается высокая скорость разработки, большая производительность и надёжность решений.
Некоторые платформы, такие как хорошо всем знакомый и довольно популярный Bootstrap, на мой взгляд, немного раздуты и с избыточным кодом, а некоторые, оказываются порой сложны для понимания.

В идеале, каждый разработчик хочет работать с пакетом, который дает достаточно возможностей для того, чтобы создавать проекты любой сложности, не загружаясь при этом, множеством компонентов, которые в результате оказываются совсем не нужны.

Учитывая всё это, в этом обзоре, постарался собрать и представить на ваше обозрение 22 облегченных, адаптивных CSS-фреймворка, которые обеспечат основу разработки, без особой нагруженности.
 


 

1. Vital

Объявленный разработчиками, как «другой подход» к более крупным структурам, Vital является легким и масштабируемым фреймворком, построенным с использованием Sass. В пакете вы найдете эффективную схему сетки, пользовательские кнопки и загрузчики. В набор компонентов также включены несколько готовых стилей макетов для таких элементов, как фотоколлажи, карточные контейнеры и формы.
 
Vital - легкий фреймворк CSS


 

2. avalanche

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


 

3. FICTOAN

FICTOAN — это простой HTML + CSS-шаблон, интуитивный, модульный и конечно же отзывчивый.
Большинство сайтов по своей структуре напоминают что то типа: «от разработчиков, для разработчиков». Чтобы восстановить равновесие, этот облегчённый нацелен на новичков веб-разработки и дизайнеров, начинающих кодировать. Довольно неплохой выбор для тех, кто не является поклонниками более крупных и сложных инфраструктур. FICTOAN обладает яркой цветовой гаммой, пользовательскими иконками и множеством оформленных элементов дизайна.
 
FICTOAN - Простой HTML + CSS-фремворк


 

4. Beauter

При размере в сжатом виде 5 kb, Beauter, безусловно один из самых облегченных фреймворков. Однако это не означает, что в этом пакете недостаточно функций. Всё что нужно для высокой производительности и эффективности разработки вы получите, основные компоненты, такие как гибкая сетка, параллакс прокрутка, модальные окна, подсказки и контейнеры, кнопки, навигационные панели и многое другое.
 
Beauter - Лёгкий фреймворк CSS


 

5. Vanilla

Vanilla Framework прост по структуре и дизайну, чтобы дать вам отличную отправную точку для ваших новых проектов. В пакете есть много элементов дизайна, которые отлично смотрятся сами по себе, но также легко настраиваются в соответствии с вашими предпочтениями, желаемым внешним видом.
 
Vanilla Framework


 

6. Bulma

Основанный на CSS Flexbox, Bulma — полностью отзывчивая и модульная структура, которая позволяет вам использовать только то, что вам нужно. Вы получаете все преимущества Flexbox, включая столбцы и плитки, которые автоматически изменяют размер, основываясь на их числе и видовом экране.
 
Bulma - Отзывчивый фреймворк CSS


 

7. Milligram

Milligram весит почти столько же, сколько его тезка — всего лишь 2kb при сжатии. Пакет включает в себя все основы, которые вы ожидаете, и предназначен для минимизации количества стилей, которые вам придётся сбросить.
 
Milligram - Минимальный фреймворк CSS


 

8. Look

Результат персонального проекта Look был выпущен для общественности, как минималистичная структура CSS, которая послужит базовой, отправной точкой для разработки сайтов. Элементы дизайна просты и могут быть настроены по вашему вкусу.
 
Look - Лёгкий Html5-фреймворк


 

9. InvisCss

InvisCss был разработан, как альтернатива более сложным и тяжеловесным фреймворкам. Пакет содержит простые имена селекторов CSS и минимальный, но привлекательный интерфейс.
 
InvisCss - Альтернативный фреймворк CSS


 

10. Kouto Swiss

Kouto Swiss — это полная структура CSS для Stylus, которая предоставляет вам множество миксинов, функций и утилит для быстрого кодирования, а также включает в себя всю мощь веб-сайта Caniuse, чтобы ваши таблицы стилей соответствовали вашим требованиям к совместимости.
 
Kouto Swiss - Фреймворк CSS


 

 

11. Muffin

Не являясь фреймворком как таковым в чистом виде, но, тем не менее, стоит упомянуть, что Muffin — это ориентированный на дизайн внешний веб-шаблон, для создания статических сайтов с использованием SASS и Jekyll. Muffin использует обычные, базовые практики от Bootstrap, Boilerplate, inuit.css и других библиотек, чтобы сразу же перейти к кодированию.
 
Muffin - Внешний веб-шаблон CSS


 

12. Furtive CSS

Furtive — это мобильная платформа с очень небольшим размером. Этот фреймворк не заточен на более старых версиях браузеров, что означает, что он может использовать «ультрасовременные технологии», такие как flexbox, SVG и ограниченные вендорные префиксы. Он также доступен в SCSS, CSS и поставляется с файлом Gulp для настройки сборки.
 
Furtive CSS-Фреймворк


 

13. Webplate

Фреймворк Webplate включает в себя все: от надежного адаптивного макета, до глобальных элементов кнопок, настраиваемых форм и поддержки шрифтовых иконок от IcoMoon. Он также поставляется с jQuery, Modernizr и Typeplate по умолчанию.
 
Webplate - CSS Фреймворк


 

14. Fluidity

Fluidity — это, пожалуй, самая легкая полнофункциональная CSS-структура! HTML почти на 100% отзывчив прямо из коробки. Файл CSS размером в 247 байт, что может быть легче.
 
Fluidity - Адаптивный фреймворк CSS


 

15. Schema

Выстроенный на LESS, Schema представляет собой гибкую инфраструктуру пользовательского интерфейса, которая включает в себя коллекцию компонентов CSS (кнопки, выпадающие списки, формы ...), которые помогут вам быстро начать работу.
 
Schema = Отзывчивый фреймворк CSS


 

16. Emerald

Emerald — это прагматичная, чувствительная grid система в LESS. Фреймворк основан на block элементе (как противоположность floats) и написан с использованием методологии OOCSS с использованием синтаксиса BEM.
 
Emerald - практичный фреймворк CSS


 

17. Bijou

Bijou — легкий (<2 kb) отзывчивый 10 колоночный grid-фреймворк. Он поставляется в комплекте с кнопками, панелями предупреждениями, таблицами, навигацией и, конечно же, системой сетки.
 
Bijou - Grid фреймворк CSS


 

18. Base

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


 

19. Spark

Spark — легкая структура, основанная на гибком дизайне, заточенном под мобильные устройства. Фреймворк поставляется с преднастроенной конструкцией, с несколькими цветовыми темами, которые являются взаимозаменяемыми, как в стандартных, так и в плоских стилях. В настоящее время базовые цвета — серебристые (по умолчанию), синий, зеленый, оранжевый, красный, фиолетовый, лайм и дракон.
 
Spark - Лёгкий фреймворк CSS


 

20. Typebase

typebase.css — это минимальный и настраиваемый шаблон типографии CSS. Самое главное, что дает вам typebase.css — это уверенное отображение на большинстве экранов устройств, гарантирует, что текст в столбцах и длинных колонках не станет выглядеть неравномерным. Доступны, как версии Less, так и Sass.
 
Typebase - CSS Фреймворк


 

21. Cute Grids

Cute Grids — это мобильная система с 12 колонками, отвечающая требованиям отзывчивого дизайна, которая была разработана, как альтернатива большим, тяжеловесным фреймворкам, которые могут быть чрезмерно перегружены для большинства проектов, и тем самым, как это не парадоксально, ограничить производительность и творчество дизайнеров.
 
Cute Grids - Мобильная система сетки


 

22. Hoisin

Построенный с Sass, Hoisin представляет собой простую, адаптивную интерфейсную мини-инфраструктуру, созданную, как альтернативу более сложным и раздутым интерфейсным фреймворкам. Hoisin намеренно не включает в себя какие-либо компоненты, вместо этого фокусируется на предоставлении организованной базы, из которой вы можете создать свою собственную библиотеку.
 
Hoisin - Отзывчивый фреймворк CSS


 
Почему именно облегчённый фреймворк? Весь смысл использования какрго-либо фреймворка — облегчить вашу работу. Таким образом, заморачиваться и перелопачивать множество кода CSS, или загружать кучу скриптов, которые вы даже не собираетесь использовать, похоже, противоречит всякой логике. Поэтому, иногда проще использовать более лёгкий набор компонентов.

Поскольку некоторые из вышеописанных фреймворков используют модульный расклад, вы можете выбирать только те элементы, которые вам нужны для конкретного проекта.

В завершении хотелось бы всё же отметить, что не стоит полностью полагаться на готовые платформы, заучивать те или иные фреймвоки, всё же лучше изучить и знать саму архитектуру, базовые принципы, т.к. фреймворки постоянно меняются, а принципы – они остаются, но это совсем другая история.

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »

Рейтинг@Mail.ru