Что такое css фреймворк
Статья обновлена в 2021 году.
Фреймворк: что это?
Суть фреймворка заключается как раз в переводе слова. Это программная среда специального назначения, своеобразный каркас, используемый для того, чтобы существенно облегчить процесс объединения определенных компонентов при создании программ. Это основа, которая позволяет добавлять компоненты в зависимости от потребностей. База, на которой можно сформировать программу любого назначения достаточно быстро и без особых затруднений.
Классификация фреймворков:
Наша статья рассмотрит фреймворки, используем ые для разработки современных веб-проектов и принадлежит второму пункту в классификации.
Сравниваем CMS, чистый код и фреймворк
Если у программиста стоит задача создать сайт, ему необходимо сразу же определить дальнейшую стратегию работы. Есть три пути разработки, каждый программист может выбрать тот, который больше всего подходит под его умения.
Рассмотрим фреймворки, их типы, особенности, чтобы помочь каждому, кто захочет воспользоваться данным способом для создания сайта.
HTML/CSS-фреймворки и библиотеки: их главные особенности
Bootstrap стал столь популярным из-за огромного количества достоинств, в нем практически отсутствуют недостатки. Это не только HTML/CSS-фреймворк, в Bootstrap также включены плагины и готовые стили JS/Jquery. Знание Bootstrap часто является одним из обязательных требований работодателей.
Официальная страница getbootstrap.com
Обратите вниманию, что для изучения HTML-фреймворков вам потребуются базовые знания HTML и CSS. Изучить HTML/CSS можно на наших курсах: курс HTML/CSS, курс HTML/CSS Advanced.
PHP-фреймворки: основные особенности
Прежде чем приступать к изучению каких-либо PHP фреймворков, вам потребуются знания основ PHP. Изучите язык PHP с помощью нашего интерактивного курса PHP.
Python-фреймворки: главные особенности
Javascript фреймворки и библиотеки
Язык Javascript очень популярный в 2021 году и на нем создается большое количество веб-приложений. Javascript используют как в Frontend, так и в Backend. Что такое Frontend и Backend вы можете узнать в этой статье:
Прежде чем приступать к изучению React или VueJS вам необходимо освоить современный Javascript. Изучить современный Javascript вы можете с помощью различных онлайн-курсов, в том числе с помощью нашего интерактивного курса Modern Javascript. Начните обучение современному Javascript прямо сейчас.
Также вам потребуются знания NodeJs. О том, что такое NodeJS вы можете прочитать здесь.
Также для того, чтобы разрабатывать современные веб-приложения (веб-сайты) вам потребуются знания верстки веб-сайтов. С помощью наших курсов по HTML/CSS и HTML/CSS Advanced, вы сможете изучить верстку веб-сайтов.
Знакомство с фреймворками. Часть 1. HTML/CSS, PHP и Python
Этой статьей я хочу начать цикл материалов, посвященных фреймворкам: что такое фреймворки, зачем они нужны, и какие бывают.
Что такое фреймворк
Если обратиться к истории самого слова «фреймворк», то этот неологизм появился в языке относительно недавно, примерно в начале XXI века. С английского слово “framework” можно перевести как «конструкция», «структура», «каркас», «корпус» или «остов». Понимание перевода слова ведет к понимаю сути фреймворка: это специальная программная среда выполнения, программный каркас, который облегчает разработку программ и объединение компонентов, так как уже содержит в себе некую основу, не меняющуюся от конфигурации к конфигурации часть, которую следует лишь наполнить сменными моделями или точками расширения.
В отличие от динамической библиотеки (DLL), которая предоставляет собой лишь набор ограниченных функций, фреймворк является каркасом, согласно которому будет строиться архитектура приложения, то есть он определяет взаимосвязь между компонентами. Более того, фреймворк может содержать много разных по тематике библиотек.
При этом фреймворки можно поделить на следующие виды:
В данном цикле в поле нашего зрения окажутся фреймворки, которые относятся к первому типу и помогают разрабатывать веб-проекты.
Сравнение чистого кода, фреймворка и CMS
Перед созданием сайта программисту нужно решить, по какому из трех возможных путей разработки сайта он хочет пойти.
Первый вариант – это написание исходного кода с нуля. Такой путь удобен, так как дает свободу действий и практически неограниченный функционал, который можно реализовать. Среди минусов необходимо выделить трудоемкость и растянутость во времени, а также необходимость тщательно тестировать готовый продукт на предмет ошибок и недоработок.
Второй вариант – это использование фреймворков. Безусловно, этот вариант имеет ряд ограничений, если сравнивать его с предыдущим путем: у вас уже будет готовая основа, которую необходимо будет заполнить нужными компонентами. Естественно, даже такой вариант не подойдет тем, кто мало знаком с программированием, и именно поэтому на свет появился третий способ создания сайта.
Третий вариант – установка готовой CMS. Этот путь популярен у людей, далеких от веб-разработки, так как он позволяет легко и быстро создать свой собственный сайт, при этом все необходимые действия можно выполнять из административной панели. Но в то же время этот подход является самым несвободным по сравнению с предыдущими двумя и обладает массой ограничений.
Таким образом, фреймворк – это некий компромисс между написанием собственного кода и использованием готовой системы управления контентом. Фреймворк обеспечивает проект уже готовым каркасом, при этом не лишает его функциональной гибкости.
Необходимые для веб-разработки фреймворки чаще всего делят по принципу языка, к которому они относятся. В данной и следующей статьях я последовательно рассмотрю, какие фреймворки существуют, и в чем заключаются их особенности.
HTML/CSS-фреймворки
HTML/CSS-фреймворкиBootstrap (или Twitter Bootstrap) – один из самых известных и современных фреймворков, впервые анонсированный в 2011 году. Одно из главных свойств этого фреймворка – адаптивность. Используя Bootstrap, вы можете создать сайт с отзывчивым дизайном: ваш проект будет самостоятельно подстраиваться под размер экрана пользователя. Другие плюсы этого фреймворка: простота в использовании, наличие множества шаблонов и стилей, что значительно экономит время при разработке, согласующийся постраничный дизайн, открытое программное обеспечение. Bootstrap нельзя назвать только HTML/CSS-фреймворком, так как он включает в себя также готовые стили и плагины под jQuery (библиотека на JS).
Foundation – один из ведущих front-end-фреймворков на данный момент. В последних версиях авторы сделали упор на функционал для мобильных устройств. Семантический подход позволяет писать более чистый код на HTML и использовать SCSS. Этот фреймворк хорошо подходит для быстрого прототипирования.
Semantic UI – этот фреймворк, как и Bootstrap, поможет вам создать переносимые интерфейсы. Это достаточно молодой фреймворк, который постоянно развивается; он имеет множество различных кнопок, иконок, изображений, надписей и других элементов.
Uikit – фреймворк, обладающий легкой и модульной структурой. Выделяется на фоне остальных фреймворков двумя особенностями: во-первых, markdown (предварительный просмотр в реальном времени), во-вторых, синтаксическая подсветка для HTML.
Pure by Yahoo! – фреймворк, который содержит небольшие адаптивные CSS-модули, пригодные для использования в любом проекте. Как можно понять из названия, к этому фреймворку стоит обращаться тогда, когда вам нужно использовать некоторые возможности фреймворка, но в то же время вы не хотите использовать слишком тяжелый программный каркас.
PHP-фреймворки
Yii – фреймворк, название которого расшифровывается как “Yes, it is!”, существует уже более 8 лет и постоянно обновляется. У него широкие возможности: одна из самых высоких производительностей (по сравнению с другими фреймворками), кэширование, обработка ошибок, миграция баз данных, возможность использовать и объединяться с jQuery и многое другое. В отличие от других PHP-фреймворков, Yii можно изучить достаточно быстро, работа с ним стабильна и безопасна. Именно по этим причинам данный фреймворк часто советуют тем, кто только начинает свой путь в PHP-программировании.
Laravel – этот фреймворк часто лидирует в разнообразных опросах, касающихся PHP-фреймворков. Например, в 2013 году Laravel был назван самым многообещающим проектом 2014 года, а в 2015 году занял первые места в категориях «Фреймворк корпоративного уровня» и «Фреймворк для личных проектов». Laravel прост в освоении и отлично подходит для небольших и средних проектов, когда необходимо быстро и удобно написать код.
Symfony – этот фреймворк часто рекомендуют использовать для создания больших порталов, так как его можно назвать одним из самых стабильных PHP-фреймворков. Это гибкий и масштабируемый фреймворк со значительным функционалом. Symfony содержит полезные многоразовые компоненты, касающиеся безопасности, шаблонов, перевода, настройки форм и многого другого.
CodeIgniter – один из старейших фреймворков, первый публичный релиз которого состоялся в 2006 году. Этот фреймворк имеет массу преимуществ: быстрая установка, хорошая документация, малый вес; с ним вы можете легко реализовать задуманный проект. Именно поэтому некоторые начинают освоение фреймворков именно с CodeIgniter. Немаловажным фактом также являются регулярные релизы новых версий, в которых исправлены баги и добавлены новые возможности.
Phalcon PHP – написанный на языках программирования C, С++ и PHP фреймворк имеет открытый исходный код, а также предлагает разные версии для самых популярных операционных систем: Windows, Linux и Mac. Если взять во внимание тесты, то данный фреймворк является одним из самых производительных. Также Phalcon PHP можно использовать на собственных серверах.
Python-фреймворки
Django – это один из самых известных фреймворков в целом и, безусловно, самый популярный фреймворк на языке Python. Удивительно, но для того, чтобы начать использовать Django, вам даже не нужны глубокое знание языка Python. Отличительной особенностью Django является его принцип DRY, который расшифровывается как “Don’t repeat yourself”. Мысль, выраженная в этой фразе, ведет к тому, что разработчикам не следует повторять те строки кода, которые они уже использовали, и благодаря этому исходный код выглядит более лаконично и понятно. К преимуществам фреймворка можно также отнести стандартную структуру (благодаря которой даже сторонний программист сможет разобраться в коде) и наследование шаблонов. Многие знакомы с Django в качестве системы администрирования, однако эта CMS подойдет только опытным пользователям, знакомым с программированием.
Flask – данный фреймворк также называют расширяемым микрофрейморком. Это связано с тем, что изначально в Flask заложен лишь самый необходимый функционал, который затем можно расширять до уровня, который необходим проекту. Обилие расширений решит практически любую задачу, которую вы перед собой поставите. Поэтому свое ознакомление с Python-фреймворками многие советуют начать именно с Flask.
TurboGears – известный Python-фреймворк с более чем 10-летней историей. Он предназначен для разработки веб-проектов и состоит из различных WSGI-компонентов, в том числе Pylons и CherryPy. Благодаря этому можно говорить о TurboGears как о мощном фреймворке с богатым функционалом. Он поддерживает множество баз данных и форматов обмена данными, также поддерживает различные JavaScript-библиотеки и горизонтальное масштабирование данных.
Tornado – этот фреймворк выделяется на фоне остальных своей главной особенностью, а именно способностью решить проблему 10 тысяч соединений. Неблокирующая природа сервера, использующего Torando, позволяет ему легко выдерживать тысячи недлительных подключений, которые произведены в одно время.
Web2spy – этот фреймворк, как и некоторые другие, основывается на концепции RAD (rapid application development). Иными словами, при его разработке особое внимание было уделено оптимизации процесса создания проекта, чтобы программист мог как можно быстрее создать хороший продукт. Фреймворк имеет открытый исходный код и помогает создавать динамические сайты при помощи языка Python. Это полнофункциональный фреймворк, который содержит компоненты для всех основных функций.
Во второй части будут рассмотрены фреймворки следующих языков программирования: Ruby, Java, JavaScript.
О CSS-препроцессорах и фреймворках: зачем они нужны и с чем их едят
Сегодня поговорим о том, как можно сделать работу с CSS проще и удобнее, подключив препроцессоры и фреймворки.
Немного о CSS
CSS – это язык разметки, который позволяет настроить визуальное оформление веб-страницы или приложения, а также расположить объекты на экране в определенном порядке и плоскости. Это основной механизм, отвечающий за то, как выглядят сайты и программы, построенные на базе веб-технологий.
Но этот язык имеет ряд недостатков, а также недостаточно функционален, чтобы эффективно решать задачи программистов. Поэтому разработчики придумали несколько вариантов надстроек, модифицирующих CSS.
Что такое препроцессор и зачем он нужен?
CSS-препроцессор – это программа, позволяющая генерировать CSS-код, используя уникальный синтаксис, присущий только конкретному препроцессору.
По сути, препроцессоры – это отдельные скриптовые языки, у каждого из которых свое представление о том, как должен работать CSS, и свой стек возможностей (хоть и довольно часто пересекающихся между собой).
Они нужны, чтобы сделать CSS чище и в заметной степени сократить количество кода, которое приходится писать для оформления сайта. А в некоторых случаях, чтобы добавить в CSS функции, по умолчанию отсутствующие в языке.
Что такое фреймворки и для чего они нужны?
CSS-фреймворк – это набор технологий, включающий в себя усовершенствованный синтаксис CSS, дополнительные функции, а также ряд шаблонов для быстрой развертки сайта без необходимости все элементы стиля прописывать самостоятельно.
Фреймворки сильно отличаются друг от друга и имеют разные подходы, но у них общие цели:
Ускорить процесс разработки, за счет уничтожения привычных для CSS сложностей с визуальным оформлением страниц.
Добавить в сайт или приложение кроссбраузерность.
Вынудить команду разработчиков следовать определенным правилам дизайна.
Корректно выровнять все элементы на странице.
Сделать подключаемые к приложению стили более удобными с точки зрения поддержки.
Особенности препроцессоров
У каждого препроцессора есть свой набор возможностей, но мы рассмотрим общие для всех них функции, чтобы проверить, на что способны эти расширения для CSS.
Примеры показаны на базе препроцессора LESS, но в других синтаксис отличается не принципиально.
Переменные
Да, они есть и в «чистом» CSS, но реализованы менее удобно.
Вложенность
Благодаря препроцессорам не нужно каждую строку прописывать отдельно. В них действуют элементарные правила вложенности, как и в структуре HTML.
Mixins
Миксины – это шаблоны с готовым CSS-кодом, легко подставляемые к любому из элементов сайта или приложения. Достаточно вписать их название в блок оформления селектора. Миксины отчасти похожи на функции, так как умеют принимать аргументы при использовании.
Математические выражения
С помощью препроцессоров можно добавлять на сайт более продвинутые, динамически меняющиеся стили, используя привычные математические операторы и функции.
If/Else-выражения
В некоторых препроцессорах поддерживаются логические операции.
Функции
У всех препроцессоров есть набор функций, с помощью которых можно оперировать стилями. Некоторые позволяют менять цвета объектов, некоторые добавляют в них анимацию и т.п.
И это только часть возможностей препроцессоров. Подробнее ознакомиться с ними можно в официальной документации каждого.
4 популярных CSS-препроцессора
Есть несколько распространенных дополнений к CSS, используемых чаще остальных:
SASS – самый популярный и часто используемый. Отличается от остальных наиболее сложным синтаксисом. Требует более четко прописывать визуальные стили и все же заставляет вводить больше кода, чем хотелось бы. Но при этом SASS обладает функциями, недоступными у конкурентов, поэтому он и лежит в основе многих фреймворков.
LESS – более простой с точки зрения синтаксиса препроцессор, но более ограниченный с функциональной точки зрения. При этом имеет более качественную поддержку в большинстве IDE и отлично подходит для новичков и несложных сайтов. 
Stylus – интересный язык, в заметной степени меняющий представление о том, как оформляется CSS. Он напоминает Python, где отсутствуют многие скобки и спецсимволы.
PostCSS – мощный препроцессор с автоматической проверкой на ошибки, подстановкой нужных префиксов и генерацией названий для селекторов.
Краткий обзор лучших CSS-фреймворков
Фреймворки не просто модифицируют синтаксис и добавляют пару дополнительных опций. Здесь несколько иные масштабы, и с ними нередко полностью меняется подход к оформлению страниц.
Bootstrap
Самый популярный CSS-фреймворк, который на слуху, наверное, у каждого, кто хоть немного изучал веб-разработку. Это крупный проект, представляющий собой целый набор предустановленных компонентов для быстрой развертки собственного сайта на основе существующих шаблонов.
Прелесть Bootstrap заключается в том, что вам не нужно использовать конструкторы в духе WordPress и самому разбираться с визуальным оформлением сайта. Используя Bootstrap, можно получить лучшее из двух миров, продолжая самостоятельно писать логику приложения и не тратить время на его оформление.
Правда, нужно понимать, что Bootstrap, как и любой другой набор шаблонов, наверняка включает в себя десятки компонентов, которые вам не нужны. С их наличием придется смириться.
Foundation
Более громоздкий и универсальный продукт, подходящий для оформления не только сайтов и приложений, но и почтовых рассылок. Foundation предлагает семантическую верстку, чтобы упростить восприятие кода. Все компоненты, встроенные во фреймворк, изначально создавались для мобильных устройств, поэтому проблем с адаптацией под различные разрешения экранов не возникает.
Foundation более сложный с точки зрения структуры. Включает в себя CSS-, HTML- и JavaScript-файлы, работает на базе SASS. Для установки и настройки используется фирменная консольная утилита.
И что важно, в Foundation заранее учтена адаптация веб-сайтов и приложений под требования людей с ограниченными возможностями.
Bulma
Это очередной аналог Bootstrap, предлагающий быстро собрать сайт на шаблоне, но он отличается от своего конкурента упрощенной структурой файлов, так как полностью написан на CSS и не требует подключения JavaScript для нормальной работы.
Из интересных функций стоит отметить наличие компонента для быстрой реализации темной темы на сайте. Также Bulma поддерживает препроцессор SASS.
В Bulma, как и в Bootstrap, есть набор готовых визуальных решений. Можно выбрать любое и слегка адаптировать под свой ресурс, не тратя дни на создание собственных компонентов.
TailwindCSS
Стремительно набирающая обороты технология, практически исключающая CSS-синтаксис из приложений и сайтов. Благодаря TailwindCSS можно прописывать стили прямо в HTML-классы. Да, это похоже на то, как работают inline-стили, но не совсем, потому что TailwindCSS, помимо прочего, предлагает собственный синтаксис.
Например, вместо background-color: white используется сокращение bg-white. И таких вариаций много. Благодаря сокращенном директивам удается достичь опрятного вида при прописывании стилей прямо в HTML-классы.
А сами директивы оформляются в отдельном конфигурационном файле, где можно заменить значение каждой из них. Например, создать переменную bgw и использовать ее для окраски фона в белый цвет.
TailwindCSS избавляет от необходимости генерировать дополнительные файлы и возиться с селекторами. При этом не лишает свободы творчества и не сказывается на производительности приложения.
Skeleton
Минималистичный CSS-фреймворк, основная цель которого быстро собрать стильный сайт без необходимости мудрить с визуальным оформлением.
Skeleton по умолчанию адаптивный и идеально выглядит на экране любого размера. Но какой-то роскоши с точки зрения дизайна ожидать не стоит. Разработчики сделали все, чтобы предельно упростить стили в Skeleton. Здесь всего три цвета: белый, серый и голубой. Один вариант оформления списков, один вариант оформления кнопок.
Как и другие фреймворки, Skeleton поддерживает семантическую верстку. Вместо конкретных значений в духе grid-column-start: 3 можно написать grid-third, и объект расположится в нужном месте.
Идеально подходит тем, кому нужно быстро собрать сайт и кому не нравится стандартный синтаксис CSS.
Похожий на Skeleton фреймворк, в основе которого лежит та же идея – создать минималистичный плацдарм для всего визуального стиля сайта или приложения. Принципиальная разница заключается в том, что Skeleton навязывает свой дизайн, а Pure – предлагает создать свой.
В Pure уже прописана большая часть необходимых свойств, отвечающих за поведение, размеры и расположение объектов. Но часть решений все же остается за разработчиком. Например, нужно будет самостоятельно выбрать цвет, степень прозрачности, процент закругленности граней и т.п.
Pure отлично подходит в качестве стартового варианта, потому что не вынуждает переписывать уже готовый CSS, а действительно работает как шаблон и предлагает быстро создать что-то свое.
Вместо заключения
Как видите, способов упростить работу с CSS много, и вы можете выбрать тот подход, который вам по душе. Не нравится синтаксис? Установите препроцессор или TailwindCSS. Не хочется с нуля придумывать дизайн? Установите Skeleton или его аналог. Хочется с ходу получить готовое решение? Тогда Bootstrap в помощь.
Либо комбинируйте эти технологии между собой, ведь это значительно упростит работу с CSS, и вы уже не сможете вернуться к классическому варианту разметки.
Сравнение css-фреймворков/библиотек на живом примере. Часть 1
Пролог
В данном цикле статей я намерен провести объективное сравнение css-фреймворков на основе живых примеров, как в TodoMVC для js решений.
В вводной статье Вы узнаете о фреймворках и библиотеках и об их различиях. Расскажу, на какие типы они делятся. Укажу планируемый список готовых решений для анализа.
Содержание
Введение
Ежедневно мир наполняется множеством идей и технологий, особенно в IT-секторе. Люди в нем спешно начинают переходить от одного новшества к другому, применяя его не по назначению.
Из-за перенасыщенности рынка готовыми решениями и нехватки информации о них усложняется выбор, и создается отрицательный эффект на производительность и качество продуктов.
При создании новой версии mr. Gefest’а нам не хватало информации о css-фреймворках. Нам нужно было узнать не только, какие там компоненты, но и как устроены они изнутри, получить их наиболее полное и корректное сравнение.
Вы, наверное, заметили, что уже существует не меньше 30 css-фреймворков с разным набором компонентов и архитектур. Разобраться во всем этом с первого раза непросто, да и со второго, и с третьего, и с.
Поэтому мы решили сделать сравнение css-фреймворков на живом примере, как в ToMVC. Это должно помочь веб-разработчикам быстро выбрать подходящее css-решение.
Работы много, поэтому сравнение я буду описывать на хабре постепенно — в виде цикла статей. Надеюсь, мой труд будет Вам полезен.
Различия в понятиях «фреймворк» и «библиотека».
Перед анализом решений необходимо рассмотреть два понятия: фреймворк и библиотека. На первый взгляд, они могут показаться одинаковыми, но это не так. Обратимся к их определениям в Википедии.
Фреймворк (неологизм от англ. framework — каркас, структура) — программная платформа, определяющая структуру программной системы; программное обеспечение, облегчающее разработку и объединение разных компонентов большого программного проекта.
Библиотека (от англ. library) в программировании — сборник подпрограмм или объектов, используемых для разработки программного обеспечения (ПО).
Css-фреймворк — фреймворк, созданный для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т. д.).
Про различия между понятиями там написано:
«Фреймворк отличается от библиотеки тем, что библиотека может быть использована в программном продукте просто как набор подпрограмм близкой функциональности, не влияя на архитектуру программного продукта и не накладывая на неё никаких ограничений. В то время как каркас диктует правила построения архитектуры приложения, задавая на начальном этапе разработки поведение по умолчанию, каркас, который нужно будет расширять и изменять согласно указанным требованиям.».
Типы css-фреймворков/библиотек
Простые css-фреймворки
В них не используется javascript. Все их модули пишутся на css и html. Они легки, быстры и просты. Из-за отсутствия javascript-компонентов у простых css-фреймворков не достаточно некоторых функциональных возможностей.
Web-components
Они основаны на новом механизме веб-компонентов.
Веб-компоненты — это комплекс стандартов, который добавляет в браузер технологию для удобной реализации ui-решений. Каждый такой элемент будет работать в своем личном DOM-дереве без перекрытия стилями основной страницы. Это одно из главных преимуществ web-components, так как позволяет поддерживать ему свойство инкапсуляции. Более подробно об этом я писал в группе проекта: Веб-компоненты.
Css-сетки
Большинство решений по реализации сетки имеет скромный набор возможностей и выполняет только одну задачу, поэтому она не входит в понятие фреймворков. Несмотря на это, мы все равно их проанализируем и сравним.
Комплексные css-фреймворки
Самые масштабные фреймворки. Обладают javascript и css+html модулями. Способны решить большинство задач по созданию web-UI.
Заключение вводного материала
Вы узнали, что в it-отрасли существует множество css-фреймворков и библиотек, и трудно определить, что именно выбрать из них для решения конкретной задачи. Вследствие чего для упрощения этого процесса я собрался сделать для Вас их полноценный анализ и сравнение на живых примерах.
В следующих статья мы начнем с анализа конкретных css-фреймворков и библиотек (список может меняться). До новых встреч.
UPD 21.12.2015: благодаря oledje в комплексные css-фреймворки добавил Materialize и Material Design Lite.
UPD 22.12.2015: andrewiWD предложил Gridle и я его добавили в список css-сеток.