Css material design: Сравнение Material Design CSS фреймворков / Хабр

Содержание

Сравнение Material Design CSS фреймворков / Хабр

Доброго время суток. В статье рассказно о Material Design фреймворках для создания Web-страничек. Если вас интересует тема Material Design, также как и меня, то Добро пожаловать под кат, возможно, откроете для себя что-нибудь новое и интересное.

Вкратце расскажу что такое Material Design, когда появился и где используется.

Material Design — Визуальный язык, представлен в 2014 году Google, используется чаще всего в мобильных приложения. Пример использования Material Design'a можно увидеть во многих мобильных приложения Google(Play, Music, Books и т.д.), а также в Chrome OS.
Если хотите разузнать больше, то советую посетить сайт Material.io — там можно узнать все гораздо более подробно, чем в этом посте. Перейдем непосредственно к теме поста — к фреймворкам.


Ссылки: Materialize и Github

И первым в моем списке станет Materialize, который сюда попал благодаря интересным функциям.
Первый коммит датирован 2014 годом, собственно в тот же год, когда и был презентован Material Design на конференции Google.
Из приятного можно отметить, что недавно вышла Alpha 1.0, которая привнесла независимость от сторонних JS библиотек, таких как JQuery и Hummer.js

Как я и говорил в начале, в Materialize несколько интересных фишек, который отличают его от других, а именно эффект Параллакса, Scrollspy и Scrollfire(появление элементов по мере прокрутки страница).

Размер: ~194kb


Ссылки: Material Design Lite и Github

Официальный фреймворк от Google для Web'a.

В отличии от Materialize, Material Design Lite не зависит от других JS фреймворков, что делает его немного легче.

Слово Lite стоит в названии не зря — этот фреймворк предлагает только основные компоненты Material Design'a, здесь нету Carousel, сетки, эффекта Параллакса и т.д.
Из плюсов можно отметить, что есть поддержка разных цветовых тем.
На сайте есть конструктор тем, где вы можете создать свою цветовую тему.

Размер: ~27 kb


Ссылки: MUI и Github

Позиционируется как легкий фреймворк, тем не менее в нем используется Angular и React, что явно не делает его легче, я бы сказал, что он тяжелее всех, не считая темы для Bootstrap речь о которой пойдет позже.

Большой вес фреймворка компенсируется поддержкой React.js версии 16, Angular.js и наличием модуля для верстки почтовых писем.
Письма сверстанные с использованием этого фреймворка поддерживаются многими популярными платформами для работы с e-mail ящиками, например GMail, Microsoft Outlook, Apple Mail и т.д., а если письмо оформлено красиво и, в первую очередь, приятно для чтения, то с помощью обычной рассылки вы сможете заинтересовать человека вашим продуктом или чем-либо другим.

Размер: ~61kb


Ссылка: Surface и Github

Фреймворк написан на чистом CSS без использования Javascript, именно этот факт делает его самым легким из всех перечисленных. Кстати, интересно еще то, что фреймворк написан всего за 2 недели.
Не смотря на все эти факты, он обладает всеми основными элементами Material Design'a.
Но к сожалению, нету поддержки Bower и NPM.

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

Размер: ~5.7kb


Ссылки: Bootstrap Material Design и Github

Как следует из названия, это не отдельный фреймворк, а просто тема для Bootstrap.
По сколько это тема для Bootstrap'a, то здесь есть все фишки из Bootstrap'a и все элементы из Material Design, есть даже встроенные значки в стиле Material.

Размер: ~648kb

Отдельно хочется отметить, что все вышеперечисленные библиотеки имеют поддержку сетки с 12-тью колонками.


Если вам нужен простой, как топор, или просто легковесный фреймворк, то вашим выбором скорей всего станет Surface или Material Design Lite. Если вам нужно полностью готовое решение, где будут и различные слайдеры и, например эффект Параллакса, то скорее всего вы остановитесь на Materialize. Если же вы делаете более сложный проект, где будет использоваться MVC, и вам необходима поддержка React.js или Angular.js, то вам стоит посмотреть на MUI.
Отдельного внимания, по моему мнению, отдельного внимания заслуживает тема для Bootstrap.
Я считаю, что рационально использовать ее будет в случае, если вы такой же консерватор, как и я
у вас весь сайт написан с использованием Bootstrap и вы не хотите использовать по 10 CSS библиотек в одном проекте или хотите немного сократить время загрузки сайта.

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

Material Design. CSS фреймворк Materialize

В предлагаемом цикле уроков будет изучаться фреймворк Materialize, реализующий материальный дизайн. Давайте скажем несколько слов о том, что же такое Material Design.

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

Material Design является продолжение плоского дизайна (Flat Design) и стоит на рубеже двух концепций: плоского дизайна и скевоморфизма. Он воплощает многие элементы плоского дизайна - минимализм, геометрию, модули и яркие цвета. В то же время он близок к скевоморфизму благодаря использованию трехмерного пространства и теней.

Фреймворк Materialize является одним из наиболее популярных фреймворков, реализующих концепции материального дизайна, но также эти концепции реализованы и в ряде других фреймворков, таких как: Material Design Lite, MUI, Surface, Bootstrap Material Theme и т.д.


Все уроки курса:


Количество уроков: 22

Продолжительность курса: 05:11:10

Автор: Андрей Кудлай

Меня зовут Андрей Кудлай - один из авторов проекта webformyself и практикующий веб-разработчик. Имею хорошие навыки работы с HTML, CSS, jQuery, PHP, MySQL, Bootstrap, CakePHP, Yii2, WordPress, OpenCart. Являюсь автором нескольких курсов-бестселлеров издательства WebForMySelf.com

Описание курса: В предлагаемом цикле уроков будет изучаться фреймворк Materialize, реализующий материальный дизайн.


Категории премиум

7 Material Design CSS фреймворков на 2017 год

В 2014 году Google анонсировали Material Design и установили его стандартом для всех своих продуктов. Он используется как в Web так и в мобильных Android приложениях, которые выпускает компания.

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

Materialize

Materialize наверное самый популярный Material Design фреймворк. Его используют многие команды разработчиков и создают множество различных тем для сайтов. Это позволяет быстро и легко начать использовать Material Design в своих проектах не особо заморачиваясь.

  • Ссылка: materializecss.com
  • Релиз: 2014
  • Версия: 0. 100.1
  • Популярность: 27,000 звёзд и 3,900 фокров на GitHub
  • Концепт/принципы: Адаптивный веб дизайн и UX
  • Вес: 931 KB (download)
  • Препроцессоры: Sass
  • Адаптивность: Да
  • Модульность: Да
  • Наличие стартового шаблона: Да
  • Иконки: Material Design Icons
  • Типография: Roboto
  • Документация: Хорошая
  • Поддержка браузерами: Firefox 31+, Chrome 35+, Safari 7+, IE 10+
  • Лицензия: MIT

MUI

MUI тоже довольно популярный фреймворк. Несмотря на единоличную разработку и поддержку, он обеспечивает поддержку Angular, React и WebComponents из коробки. Очень подробная документация так же заслуживает отдельной похвалы.

  • Ссылка: muicss.com
  • Релиз: 2015
  • Версия: 0.9.20
  • Популярность: 3,400 звёзд and 370 фокров на GitHub
  • Концепт/принципы: поддержка кроссплатформенности
  • Вес: 461 KB (download) / 6.7 KB (NPM package, minified)
  • Препроцессоры: Sass
  • Адаптивность: Да
  • Модульность: Да
  • Наличие стартового шаблона: Да
  • Иконки: Нет
  • Типография: Arial, Verdana, Tahoma
  • Документация: Очень хорошая
  • Поддержка браузерами: Firefox, Chrome, Safari, IE 10+
  • Лицензия: MIT

Surface

Surface это очень легковесный и минималистичный CSS фреймворк ориентированный на Material Design. У него довольно слабая документация, однако её вполне достаточно для знакомства с фреймворком и работы с ним. Фреймворк создавался для быстрого прототипирования и тестирования новых проектов.

  • Ссылка: mildrenben.github.io
  • Релиз: 2015
  • Версия: 1.01
  • Популярность: 130 звёзд и 40 форков на GitHub
  • Концепт/принципы: Минимализм
  • Вес: 195 KB (download)
  • Препроцессоры: Sass
  • Адаптивность: Да
  • Модульность: Да
  • Наличие стартового шаблона: Нет
  • Иконки: Нет
  • Типография: Roboto, sans-serif
  • Документация: Удовлетворительная
  • Поддержка браузерами: Firefox, Chrome, Opera, Safari 6. 1+, IE 10+
  • Лицензия: MIT

Material Foundation

Уже набрались опыта с Foundation Framework от Zurb? Тогда Material Foundation создан специально для вас! Однако есть и плохие новости: развитие фреймворка кажется очень медленным, новые версии выходят достаточно редко, можно сказать, что не выходят вовсе. Пользователей тоже не так уж и много. Очень надеемся что кто-то возобновит развитие фреймворка.

  • Ссылка: eucalyptuss.github.io
  • Релиз: 2014
  • Версия: 6.4.1
  • Популярность: 329 звёзд и 69 форков на GitHub
  • Концепт/принципы: основан на Zurb Foundation
  • Вес: 218 KB (download)
  • Препроцессоры: Sass
  • Адаптивность: Да
  • Модульность: Да
  • Наличие стартового шаблона: Нет
  • Иконки: Material Design Iconic Font
  • Типография: Нет, подключаемая
  • Документация: Не полная
  • Поддержка браузерами: Firefox, Chrome, Opera, Safari 6.1+, IE 10+
  • Лицензия: MIT

Material Design Lite

Material Design Lite был создан инженерами из Google, следовательно вы можете ожидать строгое следование принципам Material Design. Но, не смотря на высокую популярность фреймворка, поддержка весьма ограниченна так как развитие ушло к «Material Components for the Web».

  • Ссылка: getmdl.io
  • Релиз: 2014
  • Версия: 1.3.0
  • Популярность: 28000 звёзд и 4800 форков на GitHub
  • Концепт/принципы: поддержка кроссплатформенности
  • Вес: 205 KB (download) / 62 KB (NPM package, minified)
  • Препроцессоры: Sass
  • Адаптивность: Да
  • Модульность: Да
  • Наличие стартового шаблона: Да
  • Иконки: Material icons
  • Типография: Roboto
  • Документация: Очень хорошая
  • Поддержка браузерами: Firefox, Chrome, Opera, Safari, IE 10+
  • Лицензия: Apache License 2.
    0

Material Components for the Web

Material Components for the Web является приемником фреймворка «Material Design Lite» и активно поддерживается инженерами и дизайнерами Google. Его основными принципами являются: модульность, следование Material Design и отличную интеграцию с другими javascript фреймворками и библиотеками.

  • Ссылка: material.io
  • Релиз: 2014
  • Версия:  0.13.0
  • Популярность: 5400 звёзд и 540 форков на GitHub
  • Концепт/принципы: Модульность и интеграция с JS фреймворками и библиотеками
  • Вес: 117 KB (NPM package, minified)
  • Препроцессоры: Sass
  • Адаптивность: Да
  • Модульность: Да
  • Наличие стартового шаблона: Нет
  • Иконки: Material icons
  • Типография: Roboto
  • Документация: Очень хорошая
  • Поддержка браузерами: Firefox, Chrome, Safari, IE 11/Edge
  • Лицензия: Apache License 2.0

Material-UI

Это не совсем CSS фреймворк, Material-UI использует интересный подход и имплементацию Material Design используя React компоненты. Разработан call-em-all, которые используют его в своих проектах. Фреймворк набрал тысячи звёзд на GitHub.

  • Ссылка: material-ui.com
  • Релиз: 2014
  • Версия: 0.18.7
  • Популярность: 27600 звёзд и 4900 форков на GitHub
  • Концепт/принципы: поддержка кроссплатформенности
  • Вес: 429 KB (NPM package, minified)
    Препроцессоры: Less
  • Адаптивность: Да
  • Модульность: Да
  • Наличие стартового шаблона: Да
  • Иконки: Нет
  • Типография: Roboto
  • Документация: Хорошая
  • Поддержка браузерами: Firefox, Chrome, Safari
  • Лицензия: MIT

Заключение

Практически невозможно определить победителя среди всех Material Design фреймворков. И разработчики могут сами выбирать те, которых больше остальных подходят под их требования. Это сравнимо с операционными системами — нет правильного или не правильного выбора, вы просто используете то, что удобнее, то, к чему привыкли.

Как бы то ни было, выбирая CSS фреймворк, вы должны учитывать следующее:

  • Сообщество: как много людей пользуются фреймворком? Большая пользовательская база значит не только то, что он хорошо протестирован, но и так же наличие поддержки пользователями в виде готовых шаблонов.
  • Разработчики: кто является разработчиком — компания или сообщество индивидуальных программистов? Частные дополнения кода, в том числе и исправление багов и принятые pull request’ы, важно чтобы были, заинтересованные в развитии проекта, стороны.
  • Развитие: Как часто выходят новые версии? Некоторые фреймворки обновляются постоянно, в то время как другие предпочитают идти более медленным темпом, в ногу с устоявшимися технологиями. Если вы хотите создавать прототипы и тестировать новые фичи, вероятнее всего вы выберете первое.
  • Документация: на сколько чиста и подробна официальная документация? Хорошая документация сильно помогает в использовании, особенно если это ваше первое знакомство с фреймворком. Готовые примеры позволяют разрабатывать очень быстро и не останавливаться на мелких загвоздках.
  • Обучаемость: Есть ли какие-то условия для использования? Если вам нужно быстро выпустить приложение в продакшн и нет времени экспериментировать с технологиями, с которыми вы ранее не работали, то вам лучше выбрать фреймворк, который не требует изучения нового синтаксиса и технологий для использования.

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

comments powered by HyperComments

Материальный дизайн — Цвет — CSS-LIVE

Перевод раздела Color официальной документации Google: http://www. google.com/design/spec/material-design/.

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

Цветовая палитра

Данная цветовая палитра содержит основные и акцентные цвета, которые могут быть использованы для отоображения или развития цветов вашего бренда. Эти цвета подобраны так, чтобы гармонично дополнять друг друга.

Данная цветовая палитра начинается с основных цветов и заполняет весь спектр, создавая полноценную палитру, пригодную для использования в Android, iOS и в Сети. Google рекомендует в качестве основных цветов вашего приложения использовать оттенки с насыщенностью 500, а остальные – в качестве акцентных цветов.

Скачать цветовые образцы

Использование цветов в UI

Выберите палитру

Чтобы ограничить свою цветовую выборку выберите три оттенка из основной палитры и один акцентный цвет из вспомогательной палитры.

Пример основной цветовой палитры

Пример вспомогательной палитры

Используйте непрозрачность для текста, иконок и разделителей

Чтобы сообщить пользователю, насколько важна определенная информация относительно остального текста, вы можете изменять непрозрачность текста. 

Темный текст на светлом фоне

Белый текст на темном фоне

Если темный текст расположен на светлом фоне, непрозрачность основного текста должна составлять 87%. Вспомогательный текст, расположенный ниже в визуальной иерархии, должен иметь непрозрачность 54%. Текстовые подсказки для пользователей, вроде тех, что расположены в текстовых полях и в метках, имеют еще меньшую визуальную важность и непрозрачность 26%.

Темный текст (#000000) Непрозрачность
Основной текст 87%
Вспомогательный текст 54%
Подсказки (текстовые поля, метки) 26%

Светлый текст на темном фоне

Значения в таблице отражают относительную значимость светлого текста на темном фоне.

Светлый текст (#FFFFFF) Непрозрачность
Основной текст 100%
Вспомогательный текст 70%
Подсказки (текстовые поля, метки) 30%

Текст на цветном фоне

Для случаев расположения белого или черного текста на цветном фоне ознакомьтесь с этими таблицами цветовых палитр, в которых указаны оптимальные значения контраста и альфа-канала.

Прочие элементы

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

Панели инструментов и панели состояния

Панели инструментов и более крупные цветные блоки должны использовать основной оттенок (500) главного цвета вашего приложения. Панель состояния должна использовать более темный оттенок (700) вашего основного цвета.

Смелое использование цвета в больших полях поощряется в UI. Различные элементы в UI могут использовать различные части вашей цветовой темы.

Акцентный цвет

Используйте акцентный цвет для вашей основной кнопки действия и компонентов, таких как переключатели или слайдеры.

В плавающей кнопке действия используется акцентный цвет.

Переключатель, использующий акцентный цвет.

Правильно.

В основном тексте используйте акцентный цвет только для привлечения внимания к веб-ссылке.

Неправильно.

Не используйте акцентный цвет в качестве цвета основного текста.

Правильно

Используйте акцентный цвет для вашей основной кнопки действия и компонентов, таких как переключатели или слайдеры.

Неправильно.

Не используйте акцентный цвет для панелей своего приложения или для крупных цветных участков. Избегайте использования одного и того же цвета для плавающей кнопки действия и для фона.

Запасные акцентные цвета

Если выбранный вами акцентный цвет окажется слишком светлым или слишком темным для выбранного фона, то в качестве запасного варианта обычно используется более темный или светлый оттенок акцентного цвета. Если ваш акцентный цвет совершенно не подходит, используйте оттенок 500 вашего основного цвета на белом фоне. Если для цвета фона выбран оттенок 500 вашего основного цвета, используйте 100% белый или 54% черный.

Правильно

Если цветной фон окажется слишком светлым или слишком темным, используйте запасной акцентный цвет.

Неправильно.

Не используйте акцентный цвет на цветном фоне, если контраст недостаточно высок.

Темы

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

Скачать темы

Светлая тема

  1. Панель состояния
  2. Панель приложения
  3. Фон
  4. Карточки/Диалоговые окна

Палитра светлой темы

Применение в UI

Темная тема

  1. Панель состояния
  2. Панель приложения
  3. Фон
  4. Карточки/Диалоговые окна

Палитра темной темы

Применение в UI

Media CSS - Материализовать

Изображения

Изображения можно стилизовать по-разному, используя Materialize

.
Адаптивные изображения

Чтобы изображения изменялись в соответствии с шириной страницы, вы можете добавить класс responsive-img в свой тег изображения. Теперь у него будет max-width: 100% и height: auto .

 
    
          

Круговые изображения

Это квадратное изображение.Добавьте к нему класс "circle", чтобы он выглядел круглым.

Чтобы изображения выглядели круглыми, просто добавьте к ним class = "circle"

 
      
Это квадратное изображение. Добавьте к нему класс "circle", чтобы он выглядел круглым.

Видео

Мы предоставляем контейнер для встроенных видео, который адаптивно изменяет их размер.


Адаптивные встраивания

Чтобы сделать ваши вложения адаптивными, просто оберните их содержащим div, который имеет видео-контейнер класса

 
      

Адаптивные видео

Чтобы сделать ваши видео HTML5 адаптивными, просто добавьте класс responseive-video в тег видео.

 
  <элементы управления видео>
    
  
          

CSS Baseline - Material-UI

Material-UI предоставляет компонент CssBaseline для запуска элегантной, последовательной и простой базовой линии для развития.

Глобальный сброс

Возможно, вы знакомы с normalize.css, набором элементов HTML и нормализаций стилей атрибутов.

  импортировать React из react;
импортировать CssBaseline из '@ material-ui / core / CssBaseline';

экспортировать функцию по умолчанию MyApp () {
  возвращаться (
    <Реагировать.Фрагмент>
      
      {}
    
  );
}  

Область действия для детей

Тем не менее, вы можете постепенно переносить веб-сайт на Material-UI, и использование глобального сброса может не подходить.Можно применить базовую линию только к дочерним элементам с помощью компонента ScopedCssBaseline .

  импортировать React из react;
импортировать ScopedCssBaseline из '@ material-ui / core / ScopedCssBaseline';
импортировать MyApp из './MyApp';

экспортировать функцию по умолчанию MyApp () {
  возвращаться (
    
      {}
      <Мое приложение />
    
  );
}  

⚠️ Убедитесь, что вы сначала импортируете ScopedCssBaseline , чтобы избежать конфликтов размера блока, как в приведенном выше примере.

Подход

Страница

Элементы и обновлены, чтобы обеспечить лучшие значения по умолчанию для всей страницы. Более конкретно:

  • Поле во всех браузерах удалено.
  • Применяется цвет фона Material Design по умолчанию. Он использует theme.palette.background.default для стандартных устройств и белый фон для устройств печати.

Layout

  • box-sizing устанавливается глобально в элементе на border-box .Каждый элемент, включая * :: before и * :: after , объявлен как наследующий это свойство, что гарантирует, что заявленная ширина элемента никогда не будет превышена из-за заполнения или границы.

Типографика

  • В не объявлен базовый размер шрифта, но предполагается 16 пикселей (по умолчанию в браузере). Вы можете узнать больше о последствиях изменения размера шрифта по умолчанию на странице документации темы.
  • Задайте стиль theme.typography.body2 для элемента .
  • Установите вес шрифта на theme.typography.fontWeightBold для элементов и .
  • Включено пользовательское сглаживание шрифтов для лучшего отображения шрифта Roboto.

Настройка

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

10 бесплатных фрагментов кода HTML и CSS для материального дизайна

Мы коснулись материального дизайна несколько месяцев назад (комплекты графического интерфейса для материального дизайна, вы должны их проверить!), Когда инновационный визуальный язык Google начал набирать обороты. С тех пор мы видели много-много сайтов и приложений, которые успешно использовали визуальный язык. Это будет год материального дизайна, и нам он нравится

На тот случай, если вы еще не присоединились к концепции материального дизайна или еще не полностью уверены в ее достоинствах, мы собрали небольшую коллекцию примеров HTML и CSS из Codepen, которые наверняка вас убедят.Вот они:

Набор инструментов для материального дизайна

Неограниченные загрузки: более 1 000 000 шаблонов каркасов, наборов пользовательского интерфейса, наборов значков, веб-шаблонов, тем и многого другого!

Движение ящика

Демонстрация того, как панель приложения заполняется движением в Android Lollipop. Химатея и Джови Бретт.

Анимированные плитки

Прототип анимированных плиток Material Design на основе CSS. Сергей Куплецкий.

Морфинг иконок

Коллекция воссозданных «трансформирующихся» иконок в стиле материального дизайна.Альберто Бонвицин.

Тонкая анимация

Воспроизведение безупречной и утонченной анимации с использованием только CSS. Автор Michiel Bijl.

Непорочные переходы

Безупречные примеры переходов в материальном дизайне. Эндрю Таннеклифф.

Предварительный загрузчик

Javascript (плагин jQuery), воссоздающий предварительный загрузчик Material Design. Автор Аарон Ламсден.

Масштабирование взаимодействия

Простое воссоздание масштабируемых взаимодействий в Material Design.Деннис Гэбель.

Ввод формы

Примеры ввода в форме материального дизайна. Автор Сергей.

Анимация смахивания

Пример интуитивно понятной анимации прокрутки карточек в Material Design на чистом CSS. Автор Michiel Bijl.

Чистая навигация

Система меню материального дизайна, которая перемещает страницу, обеспечивая понятную и простую навигацию. Автор Леви Хасси.

Гамбургерное меню

Гамбургер-меню CSS (с небольшим количеством JS), которое было анимировано в стиле материального дизайна.Крис Уитли.

Погрузочно-разгрузочное устройство

CSS и SVG воссоздание спиннеров загрузки Material Design. Автор Fran Pérez.

Адресная строка UI

CSS-макет адресной строки Chrome Material Design (включая значимые переходы). Дэвид Хуршид.

Слайд-вкладки

Сенсорная система вкладок с боковой прокруткой, имитирующая ящик стандартных приложений Android Lollipop. Автор Адам Крокетт.

Заключительный

Что вы думаете о материальном дизайне? Вы использовали его в каких-либо своих проектах? Кроме того, если вы знаете какие-либо другие анимированные примеры материального дизайна, поделитесь ими.

10 лучших фреймворков материального дизайна

Material Design - это язык дизайна, разработанный Google. Google анонсировал материальный дизайн 25 июня 2014 года. С тех пор он был принят в большинстве продуктов Google и принимается многими другими крупными компаниями и веб-сайтами. В материальном дизайне используется подход, ориентированный на мобильные устройства, и эта практика широко используется в таких продуктах Google, как Android.

Дизайн

Google Material основан на том, как объект физически выглядит и ведет себя в реальном мире.Материальный дизайн можно описать как то, как бумага будет выглядеть на поверхности. Материальный дизайн следует свойствам материала, в основном сосредотачиваясь на свете, тени, движении, глубине и текстуре.

Согласно Google, цель материального дизайна - «разработать единую базовую систему, которая обеспечивает унифицированный опыт для всех платформ и размеров устройств».

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

Materialize - это мобильная платформа, основанная на материальном дизайне. С фреймворком очень легко работать, и в нем есть примеры кода, которые могут помочь любому быстро и легко начать работу.

Materialize поставляется в двух разных версиях: стандартная версия Materialize, содержащая файлы CSS и JavaScript и подходящая для людей, которым неудобно работать с Sass, и версия Sass, содержащая исходные файлы SCSS.

Поставляется с подробной документацией, которая поможет вам легко реализовать дизайн под рукой.Документация поможет вам настроить фреймворк и начать с ним работать. Документация очень полезна и описательна, она может помочь вам реализовать свой проект с помощью Google Material Design .


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

Также читайте: 11 лучших бесплатных и премиальных административных шаблонов Bootstrap с материальным дизайном

Фреймворк упрощает создание всех компонентов Bootstrap в Material Design. Документация по фреймворку очень хороша для начала работы. Если вы уже используете Bootstrap, то использовать Material Design для Bootstrap будет очень просто. В нем есть примеры кода для всех компонентов Bootstrap и материалов.


Компоненты материалов для Интернета - это структура для материального дизайна, разработанная инженерами и дизайнерами Google.Компоненты материалов для Интернета - это преемник Material Lite. Material Lite больше не разрабатывается и не поддерживается Google. Однако вы можете получить поддержку сообщества по поводу фреймворка.

Поскольку компоненты материалов для Интернета разрабатываются Google, можно ожидать, что фреймворк будет полностью соответствовать рекомендациям по дизайну материалов. Фреймворк регулярно и часто обновляется, а документация поможет вам следовать рекомендациям по проектированию. Кроме того, компоненты материалов для Интернета легко интегрируются с такими библиотеками, как Angular, React и рендеринг на стороне сервера.


Angular Material - это фреймворк для проектирования материалов, созданный командой Angular, поэтому вы можете быть уверены, что он может без проблем работать с Angular. Эта структура предоставляет вам повторно используемые компоненты на основе Angular для реализации Google Material Design . В документации по Angular Material есть множество рабочих примеров для различных компонентов, которые вы можете просто скопировать и вставить в свой проект. Кроме того, Angular Material поставляется с огромным набором компонентов, которые помогут вам легко реализовать Material Design в вашем приложении Angular.


Material - это еще один фреймворк Material Design, который построен на основе интерфейсного фреймворка Bootstrap. Фреймворк использует последнюю версию интерфейсного фреймворка, Bootstrap 4. Фреймворк следует руководству по материальному дизайну для реализации взглядов материального дизайна на компоненты Bootstrap. В документации описываются все аспекты фреймворка, а примеры таковы, что вы можете их реализовать. Примеры в документации помогут вам без проблем создать свой проект без необходимости начинать с нуля.


Как видно из названия, Material Foundation - это фреймворк Material Design , который помогает вам создавать веб-приложения с использованием интерфейсного фреймворка Foundation в сочетании с языком дизайна Google, Material Design. Фреймворк - это работа создателей фреймворка Foundation. Это поможет вам включить компоненты Foundation, которые соответствуют рекомендациям по материальному дизайну.

В отличие от Bootstrap, Foundation не предоставляет готовых и отполированных компонентов.Вместо этого он дает вам основу, на которую можно опираться. Это дает вам место для бесконечных возможностей настройки. То же самое и с фреймворком Material Foundation. Это дает вам основу, которая сочетает в себе структуру Foundation и Material Design, так что вам не нужно создавать что-либо с нуля, в то же время дает вам больше гибкости и возможностей настройки.


Если вы используете фреймворк Facebook React и хотите использовать Material Design в качестве языка дизайна, Material-UI - это фреймворк, на который нужно перейти.Material UI - это фреймворк с открытым исходным кодом, который можно легко интегрировать в ваш проект.


MUI - это облегченная структура CSS для создания веб-приложений, соответствующих рекомендациям по материальному дизайну. Будучи очень легким, он обеспечивает очень быструю загрузку приложения. Общий размер минифицированного файла CSS и JS составляет до 12 КБ. Фреймворк не имеет внешних зависимостей и поддерживает React. Для фреймворка доступны файлы Sass, что упрощает настройку фреймворка.

MUI является кроссбраузерным и работает безупречно независимо от платформы. Кроме того, это среда с открытым исходным кодом под лицензией MIT.


Surface - это чрезвычайно легкий фреймворк CSS, основанный на Google Material Design. Surface - это чисто CSS-фреймворк. Он не включает JavaScript. Многие из компонентов пользовательского интерфейса материала созданы без какого-либо JavaScript. Таким образом, есть только один минифицированный файл размером 5,7 КБ. Это делает его очень быстро загружаемым фреймворком.Платформа поддерживает большинство основных популярных веб-браузеров, а также обладает широкими возможностями настройки.


Этот фреймворк, который помогает вам реализовать Material Design, полностью основан на Angular JS. Фреймворк также зависит от jQuery, но для повышения производительности ни один из его плагинов не используется. Lumix построен с использованием Sass и Bourbon, что упрощает настройку, а с помощью Gulp вы можете автоматически оптимизировать файлы Sass и javascript. В документации фреймворка приведены примеры кода, которые можно использовать как есть.

Материальный дизайн Google покорил мир дизайна. Существует множество великолепно разработанных приложений, в которых вы можете почерпнуть вдохновение. Список одних из лучших админских шаблонов на основе Material Design и Bootstrap. Кроме того, фреймворк материального дизайна - это бесплатный шаблон администратора, полностью основанный на фреймворке Material Components for the Web от Google.

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

Создание веб-сайтов с материальным дизайном с помощью Materialise CSS Framework - Scotch.io

Materialize - это адаптивный CSS-фреймворк, основанный на языке дизайна материалов Google. В этом уроке я объясню, что такое материальный дизайн, а затем мы создадим веб-сайт-портфолио, используя Materialize. Я также сравню Materialize с другими популярными фреймворками CSS, такими как Foundation и Bootstrap.

Что такое материальный дизайн?

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

Другими конкурирующими языками дизайна являются плоский дизайн, дизайн метро, ​​реализм и т. Д. Материал отличается от них основами цветовых схем, форм, узоров, текстур или макетов. Материал - единственный язык дизайна, который добавляет элементам движения и глубины.

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

По мере того, как пользователь взаимодействует с дизайном, из-за движения дизайн трансформируется и реорганизуется по принципу непрерывности.

Что такое материализация?

Согласно официальному сайту, «Materialize - это современный адаптивный интерфейсный фреймворк, основанный на материальном дизайне». Так что это всего лишь один из многих фреймворков CSS, таких как Bootstrap, Foundation и т. Д.

Разница между Materialise, Bootstrap и Foundation заключается в том, что Materialize основан на языке материального дизайна Google, где в качестве начальной загрузки и основы используются язык первого мобильного дизайна и язык плоского дизайна соответственно.

Изучите Tailwind CSS с нуля

Materialize предоставляет все компоненты CSS и JS, которые предоставляются bootstrap и foundation.

Настройка базового шаблона материализации

Вы можете загрузить файлы Materialize CSS и JS со страницы загрузки Materialize. Теперь создайте файлы index.html и css / style.css . И, наконец, создайте каталог изображений , в котором будут храниться изображения для нашего проекта.

Вот как будет выглядеть каталог нашего проекта:

 
----- css /
---------- материализоваться.min.css
---------- style.css
----- js /
---------- materialize.min.js
----- изображений/
- index.html
  

Вот начальный код в нашем файле index.html . Здесь мы загружаем библиотеку Materialize CSS и JS, а также наш собственный файл style.css .

 



   Демонстрация материализации CSS Framework 
  

  
  




  
  
  
  



  

Материализовать цвета

Material Design основан на некоторых предопределенных цветах.Materialize предоставляет классы для предоставления этих цветов шрифту и фону.

Вот пример:

 
ФОНОВЫЙ ЦВЕТ

Это картонная панель с классом светло-бирюзового цвета-2
ЦВЕТ ТЕКСТА
Это карточная панель с темно-синим текстом

Смотрите Pen yyMjVO Нараяна Прусти (@qnimate) на CodePen.

Сетка материализации

Materialize использует стандартную 12-колоночную систему динамической сетки.

.container Класс не является строго частью сетки, но он важен при компоновке содержимого. Это позволяет центрировать содержимое страницы. Класс контейнера установлен на ~ 70% ширины окна. Это помогает центрировать и удерживать содержимое страницы. Мы используем контейнер для содержания нашего тела.

.row класс содержит сетку. Классы .s , .m и .l используются для определения ширины столбцов для малых, средних и больших экранов.

Вот пример:

 
1
1
1
2
2
2

См. Pen xbqjrP Нараяна Прусти (@qnimate) на CodePen.

Полная палитра цветов Materialize

Материал SideNav

SideNav - это навигация, работающая на любой ширине. Он переключается с левой / правой стороны области просмотра.

Вот пример:

 



   

  

См. Pen zxZLGg от Narayan Prusty (@qnimate) на CodePen.

Вертикальное выравнивание с использованием Materialize

Вы можете легко центрировать объекты по вертикали, добавив в контейнер класс valign-wrapper , содержащий элементы, которые вы хотите выровнять по вертикали.

 
Вертикально

Смотрите Pen rayvgp Нараяна Прусти (@qnimate) на CodePen.

Глубина с использованием Materialize

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

Вы можете легко применить этот эффект тени, добавив к тегу HTML.

 

z-глубина-1

z-глубина-2

z-depth-3

z-depth-4

z-depth-5

Смотрите Pen vExrBq Нараяна Прусти (@qnimate) на CodePen.

Кнопки материализации

В Material Design описаны два основных типа кнопок. Выпуклая кнопка - это стандартная кнопка, обозначающая действия и призванная придать глубину почти плоской странице. Плавающая круглая кнопка действия предназначена для выполнения очень важных функций.

 
 Материал 
   кнопка 
   кнопка 
   
  

См. Pen GgWGJg от Narayan Prusty (@qnimate) на CodePen.

Формы материализации

Формы

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

Текстовые поля позволяют вводить данные пользователем. Граница должна светиться просто и четко, указывая, какое поле в данный момент редактирует пользователь. У вас должен быть div .input-field , который обертывает ваш ввод и метку. Это помогает нашему jQuery анимировать метку.Это используется только в наших Input и Textarea для формирования элементов.

Если вам не нужны зеленые и красные состояния проверки, просто удалите класс validate из ваших входных данных.

 
<форма>

См. Перо PwpabN Нараяна Прусти (@qnimate) на CodePen.

Материализовать иконки

Materialize включает 740 иконок Material Design, любезно предоставленных Google. Файл шрифта значков встроен в файл Materialize CSS в форме URI данных. Классы значков используют псевдоэлементы для выбора элемента HTML и используют сгенерированный контент для заполнения его значками с помощью UNICODE значка.

Чтобы использовать эти значки, просто поместите имя значка в класс тега HTML

Чтобы управлять размером значка, измените свойство font-size своего значка.При желании вы можете использовать small , large и medium .

 
       

       

       
  

См. Pen ByWVRQ от Narayan Prusty (@qnimate) на CodePen.

Вкладки материализации

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

 
 
    
Тест 1
Тест 2
Тест 3
Тест 4

См. Pen LEWrQw Нараяна Прусти (@qnimate) на CodePen.

Ящик с материалами Materialize

Material box - это реализация плагина Lightbox в материальном дизайне, когда пользователь нажимает на изображение, которое можно увеличить. Поле материала центрирует изображение и увеличивает его плавно, без резких движений. Чтобы закрыть изображение, пользователь может либо снова щелкнуть изображение, либо прокрутить его, либо нажать клавишу ESC.

Добавить короткую подпись к фотографии очень просто. Просто добавьте заголовок как атрибут data-caption.

 
     
  

См. Pen PwpaRb от Narayan Prusty (@qnimate) на CodePen.

Раскрывающийся список материализации

Добавьте раскрывающийся список к любой кнопке. Убедитесь, что атрибут data-activates совпадает с идентификатором в теге

    .

    Вы можете добавить разделитель с помощью тега

  • .

     
      
       Брось меня! 
    
      
      
      

    Смотрите Pen bNqKKr Нараяна Прусти (@qnimate) на CodePen.

    Создание сайта-портфолио

    Мы рассмотрели некоторые из наиболее важных компонентов Materialize CSS Framework. Пришло время собрать их вместе и создать сайт-портфолио. Полная демонстрация сайта-портфолио, который мы будем создавать в этом уроке.

    Вводный баннер

    На сайте нашего портфолио сначала будет большой горизонтальный баннер, на котором будут указаны ваше имя и профессия. Мы можем создать это, используя теги форматирования текста Materialize и немного CSS.

     
    

    нарайан заросший

    веб-разработчик и разработчик мобильных приложений

    См. Pen vExrvG Нараяна Прусти (@qnimate) на CodePen.

    Подробная информация

    Нам нужно отображать биографические данные, профиль и текущие статусы вакансий в нашем портфолио. Для этого мы можем создать сетку из 3 столбцов. Эта сетка состоит из 3 столбцов среднего и большого экрана, но на мобильных телефонах она сложена.

     
    
    обо мне
    позвольте мне представиться

    История

    Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Concequat.

    Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Профиль

    Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

    текущие вакансии
    • Дизайнер

      Lorem ipsum dolor sit amet.

    • Разработчик

      Lorem ipsum dolor sit amet.

    • Видеоредактор

      Lorem ipsum dolor sit amet.

    • Поддержка ассистента

      Lorem ipsum dolor sit amet.

    См. Pen WbpyPM от Narayan Prusty (@qnimate) на CodePen.

    Мы использовали карты Материализации в средней колонке. Карточки - это удобное средство отображения контента, состоящего из различных типов объектов. Они также хорошо подходят для представления похожих объектов, размер или поддерживаемые действия которых могут значительно различаться, например фотографии с подписями переменной длины.

    В последнем столбце мы использовали складной материал. Разборные - это элементы-гармошки, которые расширяются при нажатии. Они позволяют скрыть контент, не имеющий непосредственного отношения к пользователю.

    Отображение проектов

    Вам также необходимо разместить некоторые из ваших замечательных работ в своем портфолио. Вам понадобится изображение вашей работы и заголовок / ссылка.

    Мы будем отображать проекты через плавающие ящики с материалами.

     
    
    портфолио
    МОИ ПОСЛЕДНИЕ ПРОЕКТЫ

    См. Pen GgWGLr от Narayan Prusty (@qnimate) на CodePen.

    Отображение контактной информации

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

    Мы можем построить форму, используя классы форм Материала.

     
    
    связаться
    свяжитесь со мной

    <форма>
    Адрес

    №6, 21 Awesome Street, Лондон, Великобритания

    Номер телефона

    +91 9

  • 6151

    Веб-сайт

    qnimate. com

  • Смотрите Pen vExrwX Нараяна Прусти (@qnimate) на CodePen.

    Отображение нижнего колонтитула

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

     
    <нижний колонтитул>
      
    © 2014 Авторские права Ссылка

    Смотрите Pen WbpKbJ Нараяна Прусти (@qnimate) на CodePen.

    Последние мысли

    Мы рассмотрели некоторые функции и компоненты материального дизайна. Materialize предлагает гораздо больше компонентов, чтобы вы могли создавать любой интерфейс веб-сайта.

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

    Лучшие 7 информационных панелей по дизайну материалов

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

    Итак, что такое материальный дизайн? Материальный дизайн (под кодовым названием Quantum Paper) - это язык дизайна, разработанный Google в 2014 году.Материальный дизайн - это про освещение и тени.

    Критерии оценки приборных панелей материалов

    Основываясь на нашем опыте разработки материальных информационных панелей / шаблонов администрирования, мы используем следующие критерии при их оценке:

    • Качество дизайна
    • Качество кода
    • Простота установки
    • Качество документации
    • Количество уникальных страниц
    • Как часто обновляется проект
    • Качество поддержки
    • Цена
    • Опыт компании и команды
    • Клиенты
    900 Информационные панели материалов верхнего уровня

    React Material Администрирует Flatlogic

    React Material Admin - это шаблон панели управления React, созданный на основе UI-фреймворка Material. Это бесплатный jQuery и Bootstrap. Этот шаблон реакции станет отличным началом для создания интерфейса для SAAS, электронной коммерции, панели управления IoT или любого другого веб-приложения, которое вам нравится.

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

    Код имеет минимум дополнительных зависимостей и хорошо обслуживается. Это хорошо протестировано и задокументировано. Вы можете установить панель управления через менеджеры пакетов.

    Шаблон в целом хорошо документирован.Существует краткое руководство с объяснением, как настроить приборную панель. Также объясняются и описываются все конструкции и компоненты.

    Панель управления материалами состоит из более чем 10 компонентов. На панели инструментов представлены аналитические диаграммы, электронные письма, компоненты чата.

    В Flatlogic мы создаем шаблоны веб-приложений и мобильных приложений, созданные с помощью React, Vue, Angular и Bootstrap, чтобы помочь вам быстрее разрабатывать веб-приложения и мобильные приложения. Пойдите и проверьте себя!
    Смотрите наши темы!

    Компания занимается разработкой и продажей шаблонов 5 лет.Наряду с разработкой шаблонов Flatlogic имеет большой опыт в разработке пользовательских коммерческих приложений. Он включает в себя веб-сайты электронной коммерции и системы управления встречами. Flatlogic продала шаблоны администратора таким компаниям, как Samsung, Cisco, Doculife, Walmart.

    Эта панель управления материалами полностью бесплатна и имеет открытый исходный код.

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

    Подробнее
    Демонстрация

    Шаблон материального дизайна

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

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

    Шаблон основан на Angular, bootstrap, SaSS. Есть поддержка всех современных браузеров, включая IE10 +. Чтобы настроить шаблон, вам нужно использовать команды Gulp, но можно использовать сразу же созданную версию.

    Панель администратора содержит базовую документацию. Он может помочь установить приборную панель и описывает структуру шаблона.

    Продукт содержит более 20 уникальных компонентов, включая таблицы данных, карты, календарь, хлебные крошки и т. Д.

    Мы не нашли никакой информации о том, как часто он обновляется и каково качество поддержки.

    Цена варьируется от 25 долларов за один сайт до 249 долларов за расширенную лицензию. Он включает в себя 1 год поддержки и бесплатные обновления.

    Подробнее
    Демонстрация

    Панель управления Material Pro

    Material Pro - это шаблон административной панели управления материальным дизайном премиум-класса с плоским дизайном.Это полностью адаптивный шаблон панели администратора, созданный с помощью Bootstrap Framework, HTML5 и CSS3, Media Query.

    Дизайн соответствует канонам материалов, но выглядит немного любительским. Не совсем сбалансирован. Некоторые изображения в шаблоне неуместны. Некоторое несоответствие цвета. Если бы мне пришлось поставить ему оценку, то было бы 3 из 5. На мой взгляд, это слабая сторона этого шаблона.

    Это простой статический HTML-шаблон, поэтому его легко установить. У шаблона очень хорошая документация.Подробно описан процесс установки, а также описана структура и все компоненты. Документация сделана красиво, очень удобно и профессионально.

    В шаблоне администратора более 120 компонентов пользовательского интерфейса. Описание довольно красочное, но мы не уверены, что количество страниц и компонентов соответствует действительности.

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

    Цена варьируется от 39 долларов за одноразовое использование до 79 долларов за многократное использование и 499 долларов за расширенную лицензию. В эту стоимость входит 1 год бесплатной поддержки и обновлений.

    Компания на рынке более 3 лет. Публичной информации о количестве продаж мы не обнаружили, но среди клиентов компании есть такие имена, как Forbes, Huffington Post и другие.

    Подробнее
    Демонстрация

    Шаблон материала Vue

    Vue Material Template - это бесплатная панель управления материалами премиум-класса на основе Vue и Vuetify со свежим современным дизайном, вдохновленным Material Design от Google.

    Качество кода отличное, потому что у Flatlogic есть внутренняя команда первоклассных инженеров.

    Эта панель управления материалами устанавливается с помощью npm или пряжи.

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

    Панель управления материалами содержит множество компонентов и примеров страниц. Компоненты и страницы включают следующие элементы уведомлений, карты, таблицы и другие элементы.

    Цена продукта зависит от лицензии и варьируется от бесплатной версии до 599 долларов США за расширенную лицензию. Если вы покупаете платную версию продукта, то вам предоставляется 3 месяца бесплатной поддержки. Вы также можете продлить его до 6 или 12 месяцев за отдельную плату. Поддержка предоставляется по электронной почте.

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

    Подробнее
    Демонстрация

    Панель управления материалами Mdbootstrap

    MDBootstrap - это шаблон панели администратора материалов, содержащий различные стили, представления данных и ряд компонентов. Он построен с использованием новейших Bootstrap 4, Angular CLI и Material Design и поставляется по лицензии MIT - бесплатно для личного и коммерческого использования.

    Шаблон полностью адаптивный. Дизайн, подобный инструментам от Google, дает вам четкое представление о ваших данных.Стиль интуитивно понятный и информативный. Каждая информация связана с соответствующей категорией.

    Код чистый и имеет хорошо продуманную структуру. Эта версия вообще не использует jQuery. Весь сценарий Bootstrap был переписан на простой TypeScript и скомпилирован в чистый JavaScript.

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

    Проект имеет хорошую полную документацию, в которой описаны все компоненты.

    Этот шаблон построен с помощью MDBootstrap и содержит более 400 элементов пользовательского интерфейса материалов, более 600 значков материалов и 74 анимации CSS.

    Обновление проекта 1-2 раза в месяц.

    Компания имеет базу знаний по вопросам поддержки. Сообщество также готово помочь пользователям с вопросами. Бесплатная поддержка также включена в коммерческие лицензии.

    Цена за коммерческое использование продукта варьируется от 599 евро до 3449 евро.

    У этого шаблона хорошее качество и опытная команда.Качество поддержки находится на хорошем уровне, многие ответы от сообщества. Обновления бывают довольно часто. Но материальный дизайн - это не то, что все предпочли бы. К тому же, относительно высокая цена и небольшое количество компонентов в бесплатной версии обескураживают.

    Подробнее
    Демонстрация

    Угловой администратор материалов

    Если вы собираетесь создать веб-приложение, такое как CMS, приложение для визуализации данных или SAAS, с помощью Angular Material Admin вы справитесь с этим успешно.Этот шаблон Angular Material универсален в плане адаптивного макета, поэтому он подойдет для любого устройства. Angular Material Admin создан командой Flatlogic с использованием Angular 8, Material Design и Typescript (вы также можете увидеть другие образцы административного шаблона материального дизайна от Flatlogic).

    Этот красиво оформленный шаблон никого не оставит равнодушным. Он содержит несколько панелей мониторинга, четырехцветные темы, сотни страниц и компонентов. Левая боковая панель сделана не только статичной, но вы также можете навести на нее курсор для вашего удобства.У шаблона есть демонстрационная версия и документированная кодовая база.

    Подробнее
    Демонстрация

    Администратор материалов Vue Шаблон администратора

    Vue Material основан на Vue и использует Vuetify Framework. Есть множество компонентов макета, средств выбора, виджетов и других необходимых разделов. Этого шаблона материала достаточно для создания сложной панели инструментов или приложения: в нем есть все возможности, необходимые для настройки сложного приложения.

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

    Шаблон полностью бесплатный. Внутри вы найдете все необходимые компоненты:

    Социальные сети, трафик сайта, местоположения, продажи, мероприятия, проекты и некоторые другие компоненты размещаются на панели управления, чтобы выглядеть привлекательно. Layout включает в себя еще несколько компонентов, которым нужно время, чтобы организовать APP или Dashboard. Некоторые другие разделы, такие как Jumbotrons, Списки, Меню, Вкладки, Временная шкала, Панели инструментов, также доступны здесь.

    Теперь о самом важном разделе для любого типа панели администратора. Он содержит параметры «Редакторы», «Выборки», «Шаговые программы», «Текстовые поля», «Общие» и «Выбор». Они необходимы для получения данных от пользователей или участников.

    Подробнее
    Live Demo

    Резюме и заключение

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

    Мы также подготовили сравнительную таблицу, чтобы вам было проще выбирать товары:

    React Material Admin от Flatlogic Шаблон Material Design Material Pro Material Dashboard от Creative Tim Mdbootstrap Vue Material Admin
    Тип установки Диспетчер пакетов Диспетчер пакетов Загрузка готового шаблона Диспетчер пакетов
    Загрузка готового шаблона Загрузка готового шаблона
    Документация Полная документация Основная документация Полная документация Полная документация Полная документация Нет
    Количество уникальных страниц / компонентов Более 10 компонентов Более 20 уникальных страниц и компонентов 120 компонентов пользовательского интерфейса 60 компонентов, 27 примеров страниц 400+ материалов элементов пользовательского интерфейса 30+ компонентов
    Как часто обновляется проект Один - два раза в месяц Информация недоступна Информация недоступна Один - два раза в месяц Один - два раза в месяц Редко
    Качество поддержки 5 дней в неделю, базовая поддержка бесплатна, время ответа - 24 часа Поддержка сообщества 1 год специальной поддержки 2 типа поддержки: сообщество и посвященная. 6 месяцев бесплатной поддержки Поддержка сообщества Поддержка сообщества
    Цена 99, 149, 449 долларов Бесплатно 39, 79, 299 и 499 долларов От 79 до 799 долларов за расширенную лицензию От 599 до 3449 евро Бесплатно
    Опыт компании и команды Более 5 лет разработки пользовательских приложений и продажи шаблонов администрирования Относительно новый Продается через WrapPixel.Информация о компании недоступна Более 5 лет разработки пользовательских приложений и продажи шаблонов администрирования Информация недоступна Информация отсутствует
    Клиенты Cisco, Samsung, Walmart Информация недоступна Информация недоступна Информация недоступна Информация недоступна Информация недоступна
    Сообщество Хорошо развито Информация отсутствует Информация отсутствует Хорошо развита Хорошо развита Развитая

    О компании Flatlogic

    В Flatlogic мы разрабатываем шаблоны панели администратора и шаблоны React Native.Мы входим в ТОП-20 компаний по веб-разработке из Беларуси и Литвы. За последние 6 лет мы успешно реализовали более 30 крупных проектов для небольших стартапов и крупных предприятий. Как команда, у нас всегда есть глубокое желание помочь нашим клиентам.

    лучших адаптивных CSS-фреймворков: Materialize, Bootstrap, Foundation, Pure и др.

    Время чтения: 12 минут

    Сегодня более 50 процентов интернет-трафика исходит от мобильных браузеров.Многие из начальных проблем мобильного просмотра связаны со скоростью, производительностью, модульностью и отзывчивостью. Это привело к созданию фреймворков CSS, которые решили эти проблемы.

    Фреймворки

    CSS - это наборы файлов CSS и HTML по умолчанию, которые обеспечивают удобную платформу для дизайна веб-сайтов, принося следующие преимущества рабочему процессу внешнего интерфейса:

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

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

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

    Эта статья проведет вас через наиболее проверенные фреймворки CSS в 2018 году, классифицирует и сравнивает их, чтобы помочь вам решить, какая из них лучше всего подойдет для вашего проекта.

    Самые популярные CSS-фреймворки

    Наш выбор фреймворков основан на отзывах пользователей из следующих надежных источников:

    Ниже вы видите выбранные фреймворки CSS, ранжированные в соответствии с StackShare Stacks.Рейтинг также включает информацию о звездах Git, форках Github и дате последней фиксации, а также вопросы о переполнении стека, Reddit и Hacker News. Учитывая отсутствие информации о Bulma на StackShare, мы собрали материал о самой Bulma из вышеперечисленных источников.

    Самые популярные фреймворки CSS на основе рейтинга GitHub, StackShare, Stack Overflow, Reddit и Hacker News

    Глядя на список фреймворков CSS, мы подумали, что было бы полезно распределить их по категориям для дальнейшего сравнения.Следовательно, мы разделили CSS-фреймворки на три категории:

    1. Полнофункциональные: Bootstrap, Foundation, Semantic UI, UIkit и Bulma

    2. На основе системы Material Design: Materialise и Material Design Lite

    3. Очень легкий (менее ~ 10 КБ): Pure

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

    CSS-фреймворков, классифицированных и сопоставленных в соответствии с заданными критериями

    Полнофункциональные CSS-фреймворки

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

    Bootstrap: ведущий адаптивный CSS-фреймворк

    Когда дело доходит до фреймворков CSS, Bootstrap у всех на слуху.Этот набор инструментов, несомненно, является самой популярной полностью проработанной средой HTML, CSS и JS для разработки адаптивных, мобильных проектов в Интернете. Bootstrap предлагает широчайший выбор тем и лучшие возможности браузера. В последней версии, Bootstrap 4, представлены новые компоненты, служебные классы и более модульная архитектура, а также значительные улучшения для легкой настройки.

    Веб-сайты, использующие Bootstrap: Newsweek, Vogue, Indeed, Walmart, Codecademy.

    Преимущества:

    • Будучи чрезвычайно популярным, Bootstrap имеет огромное сообщество, у которого можно учиться.В результате в Интернете можно найти ответы на гораздо больше вопросов. Обилие документации делает работу с Bootstrap еще проще.
    • Bootstrap предлагает обширные готовые компоненты пользовательского интерфейса: модальные окна, кнопки раскрывающегося списка, ScrollSpy, всплывающие окна, динамические всплывающие подсказки, карусели и многое другое. Среди новых - компонент карты, который можно использовать для отображения всех типов контента, и отзывчивая навигационная панель, которая позволяет полностью настраивать больше стилей компонентов навигации. Также существует уникальный гибкий компонент Jumbotron, предназначенный для демонстрации ключевых сообщений на веб-сайте.Кроме того, компоненты Bootstrap хорошо адаптированы к популярным фреймворкам JS MVC.
    • Bootstrap, встроенный в SASS, позволяет пользователям быстро настраивать свои проекты. Используя миксины и переменные, дизайнеры и разработчики могут изменить нестандартную структуру в пользу более индивидуального дизайна.
    • Визитная карточка
    • Bootstrap - его адаптивная сеточная система. Он позволяет размещать до 12 столбцов на странице и меняет их порядок в зависимости от размера экрана. В сеточной системе Bootstrap есть четыре класса (для телефонов, планшетов, небольших ноутбуков, ноутбуков и настольных компьютеров), которые можно комбинировать для создания более динамичных и гибких макетов.Bootstrap 4 построен с использованием макета Flexbox.

    Bootstrap 12-столбцовая сеточная система

    • Bootstrap не включает в себя никаких дополнительных функций, но есть мощные плагины, построенные на jQuery, которые могут добавить взаимодействие с вашим сайтом.

    Слабые стороны. Двумя наиболее распространенными жалобами на Bootstrap всегда были раздувание кода и чрезмерно подробное оформление компонентов. Bootstrap 3 включал в себя множество дополнительного кода, который оставался неиспользованным, а компоненты, оформленные во всех деталях, вызвали проблемы при переопределении некоторых правил CSS.Однако обе критические замечания рассыпаются, начиная с последней версии, которая представляет собой серьезную переработку всего проекта. В Bootstrap 4 пользователи могут создавать собственные сборки и включать только нужные компоненты. Изменения, которые необходимо внести для перехода на версию 4, обычно представляют собой просто переименование классов и некоторую настройку.

    Варианты использования. Bootstrap создает проекты с использованием стандартных инструментов, которые легко понять и поддерживать, что упрощает привлечение новых специалистов.

    Идеально для:

    • внутренний разработчик, которому нужно внести некоторые изменения в пользовательский интерфейс, но он плохо знает HTML и CSS.
    • - стажер, который только изучает CSS, так как он или она уже могут использовать возможности Bootstrap.
    • разработчик с небольшим знанием JavaScript, который все еще может использовать компоненты Bootstrap, не написав ни строчки на JS.

    Фундамент: комплексный и профессиональный

    Будучи гибкой CSS-фреймворком для мобильных устройств того же типа, что и Bootstrap, Foundation имеет некоторые заметные отличия. Его интерфейс считается самым продвинутым среди интерфейсных фреймворков.Будучи довольно сложным, Foundation поощряет создание уникальных и нестандартных веб-сайтов. Это действительно профессиональный CSS-фреймворк с дополнительными платными услугами, такими как поддержка бизнеса, консультации и обучение, предлагаемые не только отдельным лицам, но и целым компаниям.

    Веб-сайты, использующие Foundation: Facebook, Mozilla, Adobe, Amazon, eBay, National Geographic и другие.

    Преимущества:

    • Одним из главных достоинств Foundation является его гибкое функциональное меню, которое легко стилизовать.Таким образом, фреймворк позволяет дизайнерам и разработчикам создавать элегантные веб-сайты с использованием подхода «дизайн сам», используя широкие параметры настройки Foundation.
    • Foundation дает вам возможность создавать сложные макеты, не требующие большого количества настраиваемых элементов, в то время как платформа имеет все необходимые компоненты, включая надежную гибкую сетку, библиотеки JavaScript и простые в использовании шаблоны, доступные для загрузки. Среди замечательных компонентов - функция плавной прокрутки.Встроенный код JS, он может быть добавлен к любой ссылке внутри страницы.

    Адаптивный шаблон магазина от Foundation доступен для загрузки

    • Foundation хорошо оптимизирована для портативных устройств и является одной из первых платформ, принявших философию «сначала мобильные».
    • Фреймворк имеет встроенную функциональность, ускоряющую процесс создания прототипа.

    Слабые стороны. При попытке настроить Foundation кажется более сложным, что не совсем подходит для новичков.

    Варианты использования. Foundation можно использовать для различных целей: создание веб-сайтов, мобильных и веб-приложений, создание шаблонов электронной почты и т. Д.

    Идеально подходит для более продвинутых разработчиков и дизайнеров, которые стремятся создать уникальный веб-сайт и хотят настроить фреймворк.

    Семантический интерфейс: естественный язык, который имеет смысл

    Semantic UI построен вокруг уникальной цели создания общего словаря вокруг UI. Основанная на принципах естественного языка, Semantic расширяет возможности дизайнеров и разработчиков, делая код более читаемым и легким для понимания.Пользователи говорят, что с семантическим пользовательским интерфейсом легко работать и он имеет смысл.

    Semantic UI отличается функциональностью, которая выходит за рамки CSS-фреймворка и включает упрощенную отладку, а также возможность определять элементы, коллекции, представления, модули и поведение элементов пользовательского интерфейса.

    Веб-сайты, использующие семантический интерфейс: Snapchat, ESPN, Avira Lingo.

    Преимущества:

    • Semantic UI предлагает очень хорошо организованную документацию. Кроме того, у фреймворка есть отдельный веб-сайт с руководствами по началу работы, настройке и созданию тем.
    • Все классы семантического пользовательского интерфейса - это человеческие слова, и кодирование похоже на написание обычного текста. Этот удобный подход упрощает понимание и понимание структуры даже для новичков.

    Семантический класс CSS пользовательского интерфейса для создания блока из 3 столбцов. Пример из Twitter Bootstrap vs. Semantic UI от Игоря Чишкалы

    • Многие подчеркивают сильные особенности дизайна Semantic UI. Он выглядит очень чистым и современным, а его элементы настройки выходят далеко за рамки Bootstrap.Более 3000 переменных могут быть настроены, чтобы полностью адаптировать конечный результат.
    • Фреймворк имеет официальные реализации для популярных сторонних разработчиков, таких как Angular и WordPress.

    Слабые стороны:

    • Общий размер пакета Semantic намного больше, чем у Bootstrap или Foundation. Из-за его размера некоторые рекомендуют использовать определенные модули и компоненты вместо всего фреймворка.
    • Чтобы получить максимальную отдачу от семантического пользовательского интерфейса, вам лучше ознакомиться с JS, поскольку многие функции в семантическом пользовательском интерфейсе используют JavaScript для поведения и настройки.Напротив, Bootstrap не требует навыков JS.

    Сценарии использования. Семантическая разработка страницы поддерживает вложение сеток для гораздо более сложных случаев использования. Какими бы ни были ваши требования к макету, Semantic UI в конечном итоге подойдет и поможет вам в дизайне.

    Сетка внутри столбца сетки делит этот столбец на несколько столбцов. Источник изображения - семантический интерфейс

    Идеально для продвинутых разработчиков, хорошо знающих JavaScript.

    UIkit: CSS-фреймворк для iOS

    Разработанный специально для разработки под iOS, UIkit определяет основные компоненты приложений iOS от контроллеров навигации до ярлыков и кнопок. Хотя чаще всего UIkit используется для приложений для телефонов, существуют системы точек останова, доступные для планшетов, настольных компьютеров, ноутбуков и больших настольных систем. UIkit помогает создавать быстрые и мощные веб-интерфейсы и часто считается лучшей инфраструктурой пользовательского интерфейса, имея при этом один из самых широких диапазонов компонентов пользовательского интерфейса и интерактивности на рынке.

    Использование UIkit: PHP CMS Pagekit, темы WordPress и Joomla YOOtheme Pro, темы с тегом «UIkit» на Themeforest.

    Преимущества:

    • С акцентом на стилизацию только структуры, можно легко изменить UIkit в соответствии с вашим приложением, без переменных препроцессора, используя только необработанную структуру CSS.
    • UIkit предлагает краткую коллекцию простых в использовании и легко настраиваемых компонентов, которые помогают создать совершенно новый внешний вид, соответствующий потребностям дизайнера.Это очень привлекает современных разработчиков, которые хотят выделить свои творения. Кроме того, благодаря гибкому управлению элементами веб-сайта / приложения UIkit позволяет быстро вносить существенные изменения в стиль вашего веб-сайта.
    • UIkit выглядит стильно прямо из коробки и может не нуждаться в дополнительной настройке. Доступно множество готовых тем. Загрузив тему с официального сайта, вы можете выбрать основные файлы в CSS, SCSS или LESS.
    • UIkit имеет широкий спектр встроенных функций анимации, которые можно использовать для улучшения взаимодействия пользователя с компонентами веб-сайта.

    Слабые стороны:

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

    Примеры использования: UIkit успешно используется в разработке iOS и многих темах WordPress.Он отлично подходит как для простых, так и для сложных проектов.

    Идеально подходит для опытных разработчиков в связи с отсутствием доступных учебных ресурсов.

    Bulma: простой в освоении фреймворк CSS

    Bulma - это довольно новый фреймворк CSS, который появился в 2016 году, но набирает довольно большую популярность из-за простоты и легкой кривой обучения. Bulma не включает какие-либо параметры JS и, сосредоточившись только на CSS, предоставляет легкие решения, которые можно легко реализовать в любом контексте разработки.

    Использование Bulma: Сказки на ночь, Mod API, Pollygot.

    Преимущества:

    • Имея всего несколько хорошо продуманных компонентов пользовательского интерфейса и стили по умолчанию, Bulma - отличный вариант с точки зрения экономии вашего времени и энергии.
    • Bulma имеет очень читаемый синтаксис, что может быть значительным преимуществом для некоторых разработчиков. Фреймворк предлагает почти декларативный опыт с простыми именами классов, такими как .button или .title , и простой системой модификаторов, например.is-primary или .is-large.
    • В дополнение ко всем удобным функциям Bulma имеет простую систему сеток на основе Flexbox, значительно упрощающую горизонтальное и вертикальное центрирование. Чтобы построить сетку Bulma, вам нужен только один контейнер .columns, чтобы обернуть столько элементов .column, сколько вы хотите.
    • Bulma поставляется с более чем 100 помощниками CSS, которые можно применить практически к любому элементу, чтобы указать его цвет, отображение и интервал.

    Слабые стороны. Несмотря на то, что Bulma по-прежнему является довольно новым фреймворком CSS, у него гораздо меньшее сообщество, чтобы способствовать лучшему пониманию и дальнейшему развитию продукта.

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

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

    CSS-фреймворки на основе материалов

    Разработанный Google в 2014 году, Material Design родился из необходимости обеспечить единообразие взаимодействия на нескольких платформах. Этот язык дизайна устанавливает новые стандарты для Интернета, синтезируя классические принципы с новыми визуальными подходами.

    Material Design основан на концепции бумаги и чернил, а его стиль основан на физике: кроме ширины и высоты, каждый элемент имеет определенную глубину, которая определяет его положение на веб-странице. Дизайнер должен стремиться создать что-то, что выглядит и функционирует так же, как и в физическом мире. Тенденция к материальному дизайну растет, и большое количество анимаций, тем и пользовательских интерфейсов, использующих фреймворки на основе материалов, широко доступны.

    Витрина дизайна материалов от Google

    Material Design Lite: официальный фреймворк Google

    Это широкая библиотека компонентов для веб-разработчиков, которая позволяет пользователям добавлять внешний вид материального дизайна на свои веб-сайты.MDL - это независимый фреймворк для проектирования, поскольку он не полагается на какие-либо библиотеки или фреймворки JavaScript. «Облегченная» часть MDL исходит из нескольких ключевых целей дизайна:

    • простота установки и использования
    • не зависит от фреймворка, что означает, что MDL совместим со всеми технологиями.
    • размер светового кода (~ 27 КБ в сжатом виде)
    • узкая направленность: стиль материального дизайна для веб-сайтов

    Использование MDL: Google Wallet, Google Project Sunproof, переговоры в Google.

    Преимущества:

    • Созданный Google, MDL обновлен, прост в использовании, имеет широкий спектр функций и не имеет внешних зависимостей.
    • MDL обеспечивает отличный внешний вид, который может не нуждаться в настройке.
    • Важным преимуществом является то, что MDL можно использовать с Elm, языком графических пользовательских интерфейсов.
    • MDL предоставляет богатый набор компонентов, включая кнопки материального дизайна, текстовые поля, всплывающие подсказки, счетчики и многое другое.
    • Благодаря своим шаблонам для ведения блога, Material Design Lite позволяет вам начать вести блог за считанные минуты.

    Слабые стороны:

    • В настоящее время MDL имеет ограниченную поддержку, и дальнейшего развития не происходит.
    • Material Design Lite может быть сложно настроить. Следовательно, сайты рискуют выглядеть очень похожими.

    Сценарии использования. MDL оптимален для веб-сайтов с большим количеством текстового контента, таких как маркетинговые страницы, текстовые статьи и блоги.

    Идеально подходит для каждого, поскольку MDL, по сути, делает концепцию доступной для быстрого и легкого использования.

    Materialize: отличный вариант для стартового каркаса

    С отметкой около 37 тыс. Звезд на GitHub, Materialize - самая популярная CSS-фреймворк на основе материалов. Он бывает двух разных форм. Первая - это типичная стандартная версия с минимизированными и неминифицированными файлами CSS и JS. Вторая версия основана на SASS и дает вам больше контроля над выбором компонентов.

    Веб-сайты, использующие Materialize: RSJoomla !, Closeheat, Post Planner, Fuddruckers.

    Преимущества:

    • В соответствии с рекомендациями Google по материальному дизайну, Materialize не зависит от устройства, а это значит, что он хорошо смотрится на любом устройстве.
    • Многие предпочитают Materialise другим более популярным альтернативам, таким как Bootstrap, из-за его дизайна, который очень категоричен в отношении того, как элементы должны вести себя и выглядеть. Это создает единообразное ощущение, при этом все продукты не выглядят одинаково.Кроме того, этот фреймворк улучшает анимацию для более плавного просмотра.
    • Materialize также предоставляет различные компоненты и варианты поведения, которые обычно не встречаются в других интерфейсных фреймворках. Например, компоненты CSS: значки, scrollFire, scrollSpy, поведение волн и специфичные для мобильных устройств: выдвижные меню и всплывающие подсказки.

    Слабые стороны:

    • Materialize отказался от использования Flexbox, что привело к снижению совместимости с Internet Explorer 10+ и потенциальному отсутствию кроссбраузерности в будущем.
    • Большой размер файла делает Materialise громоздким фреймворком для работы.

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

    Идеально подходит для менее опытных разработчиков, которым требуется подробное введение в спецификации материального дизайна.

    Pure: очень легкий, простой и быстрый фреймворк CSS

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

    Pure - это набор небольших адаптивных модулей CSS для всех ваших нужд. Имея все общие функции, необходимые для стандартной среды веб-дизайна, Pure имеет невероятно маленький размер - всего 3,8 КБ. А если вы решите использовать только подмножество доступных модулей, вы сэкономите еще больше трафика. Pure, созданный на основе Normalize.css, обеспечивает макет и стиль для собственных элементов HTML, а также наиболее распространенные компоненты пользовательского интерфейса.Его минимальные стили побуждают вас писать стили приложения поверх него.

    Веб-сайты, использующие чистый CSS: Yahoo, LastPass, Flickr, CanYouSeeMe.org.

    Преимущества:

    • Pure позволяет легко переопределить стили. Его минималистичный вид дает дизайнерам основу, на которой они могут строить свой дизайн. Тем не менее, Pure очень легко настроить.
    • Каркас очень простой. Имена классов легко запоминать, расширять и поддерживать.

    Слабые стороны. Некоторые называют Pure «простыми стилями» и подчеркивают, что этот фреймворк многое упускает. В Pure отсутствуют некоторые компоненты пользовательского интерфейса, такие как вкладки или аккордеонное меню, и подход «сначала мобильные» иногда может сбивать с толку. Однако плохая функциональность может быть легко решена, если у вас есть опыт программирования на JavaScript или интеграции сторонних плагинов.

    Варианты использования. Если вы создаете тему для WordPress или собственный веб-сайт, Pure может быть хорошим вариантом.

    Идеально подходит для людей, которым не нужен полнофункциональный фреймворк, а нужны только определенные компоненты для включения в свою работу.

    Переход на фреймворк CSS

    Для начала вот следующий отказ от ответственности: Использование стороннего CSS никогда не должно означать меньшего беспокойства о собственном коде CSS.

    Еще один важный момент, который следует отметить: модный и модный никогда не означает, что он лучше всего подходит для работы. Другими словами, необходимо углубить понимание того, почему один инструмент лучше подходит для конкретного случая, чем другой.

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

    Подводя итог, можно сказать, что правильная структура для вас будет зависеть от требований вашего проекта, где вам нужна помощь в программировании: дизайн или функциональность кодирования и ваша личная философия кодирования.