Если вы обратитесь к поисковикам Яндекс\Google, то с вероятностью в 100% сможете найти огромное, нет, невероятное количество самых разных по функциональности и удобству инструментов для увеличения скорости работы вашего сайта. Разумеется, многое зависит и от оптимизации изображений, и работы с CDN. Но есть одна вещь, о которой думают чаще всего именно веб-верстальщики – оптимизация кода.
Оптимизация кода может означать и сокращение количества запросов http, уменьшение размера файлов, использование пользовательских фреймворков, уже оптимизированных «на» скорость. Bootstrap v4, по сути, является удивительным инструментом и разнообразным, но он тяжеловесен, и весьма сильно. Но не о нем речь.
Ранее, мы отдельно рассматривали разные фреймворки для разных целей, но все они были очень «большими». А, как известно, чем больше приложение, то зачастую и проект получается немаленьким. В этом материале мы посмотрим на самые маленькие фреймворки, которыми можно попробовать заменить, например, Bootstrap. Весь функционал, конечно, не перенести в них, но отдельные моменты вполне можно использовать. И да, можно действительно прийти в удивление от того, насколько огромны их возможности и как мал их размер. И это не фантастика! Особенно, если учесть момент, что большинство из примеров – модульные, а это значит, что лишнее можно отключить, не использовать, не прописывать и…код уменьшится в целом.
Маленькие, да удаленькие
Topcoat
Используя Topcoat, верстальщики получают отличный фреймворк, оптимизированный на скорость. Разработчики специально проверяли отдельные модули на скорость и затраченное время на выполнение тех или иных операций. Между тем, фреймворк легко настроить и подходит он для любого типа сайтов.
И это не говоря о том, что фреймворк имеет мобильную оптимизацию, использование CSS БЭМ-нейминга, позволяет редактировать и создавать собственные стили, обладает поддержкой psd-файлов и многое другое.
Pure CSS
Созданный Yahoo, фреймворк поражает адаптивностью и практически мгновенной загрузкой. Тем не менее, проще всего его охарактеризовать, как набор маленьких адаптивных CSS-модулей для любого сайта. Как и Milligram (о нем ниже), Pure базируется на Normalize.css, имеет адаптивный дизайн элементов, но набор стилей небольшой, поэтому при необходимости вполне можно заняться собственным творчеством и настроить таблицу стилей, чтобы включить меню, кнопки, формы, разные их комбинации и прочее.
Если же вы хотите поработать только с сеткой, то можно загрузить специальный модуль отдельно (весит около 0,8 Кb), а это явно меньше, чем у Bootstrap или Foundation. Да к тому же сетка рассчитана на 24 колонки.
Petal
Petal является довольно небольшим фреймворком для fronted-разработчиков уникального дизайна пользовательского интерфейса. В нем есть поддержка некоторых компонентов, но в основном он базируется на LESS CSS и представляет альтернативу всем Sass-библиотекам.
Фреймворк еще развивается, хотя стабильная версия на текущий момент v0.11.1., а команда разработчиков Shakr тратит невероятное количество времени на развитие Petal, поэтому в ближайшее время он точно не исчезнет.
Все имеющиеся компоненты Petal являются необязательными, так что вы можете упростить ваш сайт, удаляя те, которые вам не нужны. Стоит отметить обширную и подробную документацию, где описаны все компоненты, сетки, кнопки и представлены фрагменты кода.
Mincss
Данный фреймворк позиционируется разработчиками и рекламируется, как уменьшенная альтернатива Bootstrap. Но на самом деле это не что иное, как маленький фреймворк для пользовательского интерфейса. Работает он во всех основных браузерах и поддерживает ряд устаревших, таких как IE 6+.
Подходит он для тех случаев, когда нужны минимальные нагрузки на сайт. Фреймворк использует гораздо меньшее количество лишних div и classes, чем его аналоги, но при этом оставляет каждую часть кода читабельной и семантически правильной.
Да, у Mincss меньше возможностей, чем у Bootstrap, но при желании можно перенести часть кода из Bootstrap в Min для последующей оптимизации с помощью отдельного плагина. Можно подключить и Min к Bootstrap и тогда функциональность первого расширится.
Milligram
Еще один крохотный frontend-фреймворк для работы с пользовательским интерфейсом. У него не очень большой набор стилей, но зато есть возможность создать чистый проект. Размер пакета исчисляется в 2Kb, но уже сейчас он входит в тройку самых доступных и простых инструментариев. Установить его можно с помощью любого из основных менеджеров, таких как Yarn, Bower или npm.
Но особенность CSS-фреймворка в том, что в нем вы не найдете компоненты или динамические функции, которые точно существуют в Bootstrap. В основном в Milligram описаны кнопки, типографика, работа с цитатами, а работа с сеткой строится на флексбоксах (контейнерах). Поэтому приложение ориентировано на разработчиков, которые хотят быстро создать макет без необходимости использования сложных функций.
Kube
О, этот фреймворк способен поразить многих профи-мастеров в веб-верстке своим реально маленьким размером – 30 Kb и это включая все JS-библиотеки. Для тех, кто еще не особо представляет насколько это действительно мало, хотя мы рассказывали и о фреймворках менее 1Kb, то Kube почти в 20 раз меньше Bootstrap (последний около 600 Кb).
Тем не менее, Kube не может конкурировать с чем-то наподобие Mincss, потому что Kube поставляется в комплекте с огромным количеством модулей и функций. Но если это то, что вы ищете, то эта библиотека великолепна!
У Kube огромная документация и сам фреймворк выглядит весьма «настоящим» и профессиональным. Поэтому его вполне можно использовать и для работы в команде.
Furtive
Самопровозглашенный минималистический фреймворк Furtive весит приблизительно 2,4Кb и представляет собой один из немногих вариантов структур mobile-first с большим набором классов и функций для сайтов.
Кроме того, поддерживает фреймворк и самые новые технологии, что используются в современных браузерах, базируется на Normalize.css и работает с SVG и Flexbox, поэтому уменьшить код и сократить общее время загрузки страниц сайта труда не составит.
Siimple
Модульный маленький фреймворк был построен с использованием SASS/SCSS, вдохновлен трендом плоского дизайна и обладает очень простым кодом. Siimple выводит минимализм на новый уровень, предлагая «чистый» подход к дизайну и коду. Здесь всё – цвета, типографика, сетки и пр. – создается в стиле минималистического flat-дизайна, который до сих пор существует, используется, приветствуется и является уникальным. И это же относится к невероятно чистому, простому и понятному коду.
Для примера, посмотрите на документацию и спросите себя: «Действительно ли фреймворк подходит для быстрого прототипирования или создания пользовательского макета с нуля?»
Picnic
С Picnic.css веб-разработчики получают именно то, что обещают создатели - не меньше и не больше. Легкий и красивый интерфейс, оптимизацию на скорость работы конечного проекта. Внешне у многих верстальщиков приложение будет ассоциироваться с некоторой очень упрощенной вариацией Bootstrap, но при этом с возможностями для создания действительно красивых и эстетических проектов.
Использовать фреймворк можно для работы над любым сайтом, будь то портфолио или интернет-магазин, бизнес-портал или корпоративная платформа. Чтобы увидеть Picnic в действии достаточно посетить demo-страничку и ознакомиться с развернутой документацией.
А нужен ли такой CSS-фреймворк?
Аналогично тому, как мы ранее рассказывали о JS-библиотеках, надстройках для популярных инструментов верстки сайтов, мы рассказали сейчас и о CSS-фреймворках. Но если возникает вопрос, нужен ли он реально, то здесь стоит задуматься о том, «а как удобнее работать верстальщику: самому составлять CSS и описывать все нужные ему стили или использовать шаблоны, практики, кейсы и наборы, уже созданные и протестированные на эффективность и производительность».
Да, использование готовых вариаций значительно экономит время, исключает появление ошибок в коде и предотвращает монотонность труда в целом. Даже не возникает мысли о том, профессионал ли вы в веб-верстке, знаете ли на "отлично" HTML, CSS, JS и прочие необходимые языки и структуры. Суть здесь одна – ускорение и упрощение процесса труда над сайтом.
Каждый фреймворк имеет свои сильные и слабые стороны, а также конкретные области применения, что позволяет выбирать, исходя из потребностей конкретного проекта. Например, если некоторый проект прост, нет необходимости использовать сложный фреймворк. Кроме того, многие из вышеприведенных вариантов являются модульными, что позволяет использовать только те компоненты, которые нужны или даже смешивать компоненты из различных интерфейсных структур. Именно поэтому многие веб-разработчики используют и работают не в одном каком-то фреймворке, а в нескольких. Например, взять CSS-стиль отдельных компонентов из одной структуры, предпочтительную систему сетки из другой и более сложные компоненты из третьего. Vive la modularité! :)
Наконец, следует отметить, что в настоящее время, с Flexbox и Grid Layout, имеющими хорошую поддержку в последних версиях основных браузеров, веб-разработка стала проще, чем когда-либо относительно создания сложных макетов сайтов.
Завершение
Любите ли вы работать с готовыми решениями или обожаете описывать стили самостоятельно, может, вы сторонник составления и сбора собственной базы с кусочками нужного вам из проекта в проект кода – фреймворки могут пригодиться рано или поздно. Новичок или профессионал в веб-верстке? Фреймворки могут, с одной стороны, сделать работу за вас, с другой, предоставить чистый код, аккуратный, синтаксически правильный. А это уже залог и большое преимущество для улучшения и ускорения работы сайта.
И разумеется, CSS-фреймворков, как и прочих иных, огромное количество. Мы рассмотрели самые маленькие по размеру, да и только их часть. Возможно, что-то из списка пригодится и вам, читатели, а что-то вы, возможно, уже используете не первый проект.