11 материальных рамок дизайна

  1. 1. Угловой материал
  2. 2. Суть
  3. 3. LumX
  4. 4. Материал
  5. 5. Дизайн материала для Bootstrap
  6. 6. Материал Дизайн Лайт
  7. 7. Материальное основание
  8. 8. Материализация
  9. 9. MUI CSS
  10. 10. Фонон
  11. 11. Бумажная тема для Bootstrap
  12. Считаете это чтение полезным? Прочитайте больше:

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

Итак, вот они: наши лучшие 11 бесплатных подборок, которые должны помочь вам внедрить материал в ваш будущий веб-проект.

1. Угловой материал

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

2. Суть

Описанные как «связные, продуманные и смелые» и «сфокусированные на интуитивном и естественном взаимодействии», сущность это CSS-фреймворк, основанный на React, который позволяет вам реализовывать дизайн материалов и создавать быстрые и умные мобильные и веб-интерфейсы. Вы можете скачать его с Github или же NPM ,

3. LumX

Другой AngularJS-подобный фреймворк (одобрен и поддерживается Google), LumX предлагает «хорошо анимированные компоненты CSS и JavaScript». Он был создан с использованием Sass и Bourbon, чтобы помочь вам быстро настроить дизайн приложения, а его производительность была оптимизирована с помощью Gulp и «чуть-чуть jQuery» без каких-либо плагинов. Вы можете легко скачать его с Github ,

4. Материал

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

5. Дизайн материала для Bootstrap

Вот еще один интерфейс, который вы можете использовать, чтобы применить MD Google к Bootstrap. Он основан на JavaScript и содержит плагины jQuery, которые помогут вам в разработке. Скачать это отсюда или Github ,

6. Материал Дизайн Лайт

Материал Дизайн Лайт это естественная последовательность нового сайта Google о Material Design. Это должно помочь вам начать работу с MD, предлагая вам их шаблоны, компоненты, стили и другие полезные ресурсы для большего опыта работы с материалами.

7. Материальное основание

Вы можете найти Зурба Материальное основание на Github , Загрузив его, вы сможете создавать адаптивные веб-сайты и приложения, которые содержат значки материалов, типографику, кнопки, карточки, вкладки, меню и другие несущественные элементы MD.

8. Материализация

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

9. MUI CSS

Если вы хотите, чтобы сверхлегкий CSS-фреймворк реализовывал рекомендации Google по MD, MUI CSS это правильный выбор для вас и ваших кроссплатформенных проектов. Только 6,6 КБ для файлов mui.min.css и 5,4 КБ для файлов mui.min.js! Он не имеет внешних зависимостей и может быть настроен с помощью файлов Sass на Github ,

10. Фонон

Phonon это еще один легкий (60 МБ), масштабируемый и гибкий веб / гибридный фреймворк HTML5, который вы можете легко настроить для лучших интерфейсов Material Design. Проверьте это на Github ,

11. Бумажная тема для Bootstrap

Если вы привыкли к Bootstrap, вы можете попробовать Bootswatch's Бумажная тема который подражает MD. Название основано на первом кодовом названии Material Design - Quantum Paper.

Считаете это чтение полезным? Прочитайте больше:

Весна Савич

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

Последние сообщения от Весна Савич ( увидеть все )

Похожие

Абсолютно новое руководство по поддержке CSS в электронной почте
Интересный факт: с тех пор прошло более десяти лет Руководство по поддержке CSS в электронной почте было впервые выпущено , Не очень забавный факт: прошло почти 4 года с момента нашего последнего полного обновления результатов испытаний. Руководство по CSS всегда было одним из наших самых популярных ресурсов, помогая людям во всем мире, которые пишут электронные
Как использовать CSS3 Radial Gradient с примером
В предыдущей статье CSS3 Градиентная техника о CSS3-градиенте мы узнали основы техники градиента в CSS. В этой статье мы продолжим и узнаем больше о градиенте CSS3 и особенно о радиальном градиенте CSS3. Если вы обратились непосредственно к этой части руководства, мы рекомендуем вам взглянуть на первую часть статьи, а не на эту часть. Многоцветный градиент давайте продолжим с многоцветным градиентом.
50 отличных учебников по 3D иллюстратору
... дизайнерами и художниками в отрасли, которые достигают одних из лучших результатов в Интернете. В настоящее время одной из самых популярных тенденций являются 3D-эффекты. Итак, мы собрали несколько учебных пособий по 3D, чтобы дать вам представление о том, что предлагает Adobe Illustrator и как использовать его 3D-функции. Этот список смешивает учебники для начинающих и экспертов. [Ссылки проверены в феврале / 10/2017] Вот наш обзор 50 превосходных
IPad Pro - это отличная возможность стать настоящей заменой ПК
CNET / CBSi Если iPad Pro станет настоящей заменой ПК, Apple должна предоставить пользователям более широкий доступ к их собственным данным. Я понимаю, почему iOS изначально не поставлялась с файловым менеджером по типу Finder в OS X или Windows Explorer в Windows. Apple хотела, чтобы iOS была простой альтернативой ПК и Mac, и одним из способов достижения этой цели было блокирование
CSS Float Theory: вещи, которые вы должны знать
... для него ». [ Позиционирование поплавка ] «Когда вы перемещаете элемент, он становится блок-блоком . Затем этот блок можно сместить влево или вправо на текущей строке. Параметры разметки: float: left, float: right или float: none.» [ Floatutorial: Основы плавания ] «Вы всегда должны устанавливать
Градиенты с помощью CSS3 »perun.net
Использование CSS3 для реализации цветовых градиентов не является чем-то новым. Вот очень простой пример: .evolution {background: -moz-linear-Gradient (вверху, # 900, # 079); цвет: #fff; набивка: 2,5em 3em; } Этот пример выглядит в Mozilla Firefox следующим образом: Это не все, что возможно
Новый покемон для смартфонов. Pokemon Quest для Android и iPhone
Последняя игра с милыми существами в главной роли впервые дебютировала на консоли Nintendo Switch, но согласно анонсу Pokemon Quest приземлилась именно на смартфонах. Игру можно скачать из App Store и Google Play. Во время конференции, прямо перед выставкой E3, не было анонсировано ни одной, ни трех игр из серии Pokemon. Помимо первой RPG-игры на Nintendo Switch (Pokemon Let's GO в вариантах Pikachu и Eevee) и первой полноценной игры из основной серии,
Постоянная детская комната на чердаке - спланируйте все на стадии проектирования
Отличной идеей является помещение для ребенка, расположенное на чердаке, при условии, что мы тщательно продумываем его окончательный вид уже на стадии проектирования нашего дома. Адаптация мансарды к детской комнате может оказаться довольно головокружительной задачей. Однако, если мы подойдем к этому со спокойствием и полной головой идей, то получится, что казалось бы скосы и уголки низкого уровня станут активом комнаты.
60+ красивых учебников и ресурсов по логотипу Photoshop
Когда мы говорим об известном бренде, первое, что приходит на ум, это его логотип . Логотип является самым важным компонентом любого личного бренда, а также самой сложной частью исполнения. Логотип должен быть соответствующим, эстетичным и отражающим доверие к компании. Кроме того, логотип должен быть синонимом компании или продукта, который он представляет, и должен проникать в сознание людей как торгового агента. Когда мы говорим об известном бренде, первое, что приходит
13-дюймовый тест Apple MacBook Air (2015): наше мнение
... для ноутбуков, доступных в настоящее время на рынке. Одной из областей, где MacBook Air потребуется обновление, является экран. Определение остается на уровне 1440 x 900 пикселей, тогда как ноутбуки среднего класса с Windows предлагают Full HD с разрешением 1920 x 1080 пикселей. Некоторые высококлассные ноутбуки того же ценового диапазона, что и MacBook Air, даже
Microsoft Lumia 550
Спасибо нашим друзьям из Сплита HGspot Мой тест пройден и является лучшим из новой Windows 10 Mobile Lumia от Microsoft. Это модель Lumia

Комментарии

7. Но это поднимает два вопроса: можете ли вы удалить IE7, и если вы можете, как вы это делаете?
7. Но это поднимает два вопроса: можете ли вы удалить IE7, и если вы можете, как вы это делаете? Ответы: да, вы можете и вот как. Этот блог также доступен в формате PDF в TechRepublic Скачать , Удалить IE7 Если ваша установка IE7 прошла успешно и без происшествий, то удаление - это относительно простой процесс. Следующие шаги будут удалить IE7 и восстановить IE 6.
Или это похоже на то, что это было быстро собрано одним человеком?
Или это похоже на то, что это было быстро собрано одним человеком? Информация о компании - принадлежит ли сайт компании с названием компании в нижнем колонтитуле? Условия использования и политика конфиденциальности - есть ли у них условия обслуживания и политика конфиденциальности? Контактная информация - предоставляют ли они физический контактный адрес на странице контактов или в своих условиях обслуживания? Поиск домена - Google доменное имя в кавычках,
Может быть, это не Nikon, но это, безусловно, хорошая вспышка, она отлично справляется со своей работой, и действительно, я упомянул цену в 81 доллар?
Может быть, это не Nikon, но это, безусловно, хорошая вспышка, она отлично справляется со своей работой, и действительно, я упомянул цену в 81 доллар? Незначительные вещи могут быть прощены из-за высокой мощности и хороших характеристик и невероятной цены. Может быть, одно слабое место. Эта фотография - моя (старая) батарейная дверь. На каждой стороне есть три одинаковых фиксирующих выступа, которые удерживают дверь закрытой. Два проушины (по обе стороны двери) со временем сломались
Png szymonk 2015-08-05 16:04:29 2018-07-04 10:47:11 Дизайн для детей - должен ли дизайн быть дорогим?
png szymonk 2015-08-05 16:04:29 2018-07-04 10:47:11 Дизайн для детей - должен ли дизайн быть дорогим? https://www.homesquare.pl/files/uploads/2014/06/Pokoj_dla_dziewczynki-w-pudrowym-rozu.jpg 604 900 szymonk https://www.homesquare.pl/files/uploads/2016/10/Logo- HomeSquare-PNG.png szymonk 2014-08-19 17:49:50 2017-12-15 14:39:37 Студенческая комната -
Прочитайте больше тогда почему бы не в вашем браузере?
png szymonk 2015-08-05 16:04:29 2018-07-04 10:47:11 Дизайн для детей - должен ли дизайн быть дорогим? https://www.homesquare.pl/files/uploads/2014/06/Pokoj_dla_dziewczynki-w-pudrowym-rozu.jpg 604 900 szymonk https://www.homesquare.pl/files/uploads/2016/10/Logo- HomeSquare-PNG.png szymonk 2014-08-19 17:49:50 2017-12-15 14:39:37 Студенческая комната -
Новые обычно имеют больше дополнений, но означает ли это, что они будут лучше, чем их предшественники?
Новые обычно имеют больше дополнений, но означает ли это, что они будут лучше, чем их предшественники? Что если данная модель отличается только несколькими функциями, которые мы не рассматривали ранее? Нам действительно нужно 15 приложений и доступ в интернет когда мы ищем приемник только для просмотра ТВ и фильмов? Зачем переплачивать?
Как это - дать гостям мыло?
Как это - дать гостям мыло? Но он действительно не имеет никакой негативной символики и красиво упакован, например, в серую бумагу с бантиком или с прикрепленной ветвью лаванды или розмарина - он может быть уникальным. 11. Домашнее варенье И теперь все бабушки приступают к работе! Стоит использовать сезон и делать такие джемы, например, в баночках после томатного пюре. Это трудоемкий и трудоемкий процесс, но если у вас много времени на подготовку к свадьбе, вам следует
Постоянный чердак - возможно ли это вообще?
Постоянный чердак - возможно ли это вообще? Видимо, идеальная комната, в которой мы функционально расположили пространство, должна иметь квадратную форму. В такой комнате окна хорошо освещают вся комната и мебель могут быть свободно перемещены. На чердаке обустройство комнаты может быть немного сложнее, но максимально возможным. Стоит сделать наши чердачные
И стоит ли это того?
И стоит ли это того? его цена ? Мы приглашаем вас прочитать. Poduszka do masażu shiatsu / Фото agdManiaK.pl
Так что, если у нас есть место для нее, именно она стала королевой нашей ванной - почему бы не сделать это?
Так что, если у нас есть место для нее, именно она стала королевой нашей ванной - почему бы не сделать это? Прямоугольная ванна Отлично Призма Это модель ванны, которая является одной из наиболее часто покупаемых в нашем магазине. Это связано с несколькими факторами. Прежде всего, эти ванны можно приобрести различной длины. Таким образом, они впишутся в маленькие и большие ванные комнаты. Эти ванны были сделаны из акрила. Этот материал имеет ряд
Как ты можешь это сделать?
Как ты можешь это сделать? Первый способ показать историю - это просто создать временную шкалу. Скриншоты сайтов, созданных агентством Krakweb: http://www.luqam.com/historia «Временная шкала - это довольно модный способ представления достижений компании в последнее время, с точки зрения удобства использования, это очень

Считаете это чтение полезным?
7. Но это поднимает два вопроса: можете ли вы удалить IE7, и если вы можете, как вы это делаете?
7. Но это поднимает два вопроса: можете ли вы удалить IE7, и если вы можете, как вы это делаете?
Или это похоже на то, что это было быстро собрано одним человеком?
Информация о компании - принадлежит ли сайт компании с названием компании в нижнем колонтитуле?
Условия использования и политика конфиденциальности - есть ли у них условия обслуживания и политика конфиденциальности?
Контактная информация - предоставляют ли они физический контактный адрес на странице контактов или в своих условиях обслуживания?
Может быть, это не Nikon, но это, безусловно, хорошая вспышка, она отлично справляется со своей работой, и действительно, я упомянул цену в 81 доллар?
Png szymonk 2015-08-05 16:04:29 2018-07-04 10:47:11 Дизайн для детей - должен ли дизайн быть дорогим?
Png szymonk 2015-08-05 16:04:29 2018-07-04 10:47:11 Дизайн для детей - должен ли дизайн быть дорогим?