Отобранные фреймворки и библиотеки для веб-дизайна
Когда дело доходит до разработки, очень легко отвлечься от фактической разработки веб-приложения. Излишнее внимание к деталям иногда приводит к ненужным затратам времени и энергии. Решение проблемы – настраиваемые библиотеки CSS.
Работайте с умом, а не усердно!
В наши дни адаптивные веб-сайты являются необходимостью, и чтобы победить, у нас есть такие фреймворки, как Bootstrap, Foundations и т.д. Но эти фреймворки слишком распространены, и мы так привыкли к ним.
Переопределение тонких переходов наверняка выполнит свою работу, но для некоторых их кодирование может быть обременительным. Здесь на Templatetoaster сайте строителя являются некоторыми основами CSS и библиотек, которые могут реально помочь украсить ваш сайт.
Крупные игроки
Бутстрап
Самый популярный в мире фреймворк для адаптивного веб-дизайна от Twitter для разработки адаптивных мобильных проектов в Интернете. Включение файлов CSS и JavaScript должно помочь вам. Эта структура имеет сетку из 12 столбцов, которая упрощает разработку для мобильных устройств, планшетов и настольных компьютеров одновременно.
Загрузите его здесь :
http://getbootstrap.com/getting-started/
Создавайте адаптивные и кроссбраузерные веб-сайты с помощью конструктора TemplateToaster Bootstrap.
Фонд
Foundation – это наиболее продвинутая адаптивная интерфейсная среда для разработки адаптивных веб-сайтов. Все, что вам нужно сделать, это включить файлы CSS и JavaScript, и все готово. Foundation также предлагает набор шаблонов, которые помогут вам начать работу.
Foundation, как и bootstrap, основан на сетке из 12 столбцов, что упрощает разработку для мобильных устройств, планшетов и настольных компьютеров одновременно.
Загрузите его здесь :
Материализовать
Полноценный фреймворк материализованного великолепия представлен в двух разных формах: в форме CSS и JavaScript, а также в форме SASS.
Наряду со стартовым шаблоном также включен шаблон параллакса, который дает эффект параллакса для прокрутки.
Загрузите его здесь :
http://materializecss.com/getting-started.html
Украсьте свои страницы сайта этими эффектами!
Effeckt.css
С помощью этой библиотеки вы можете анимировать практически все, от модальных и позиционных модальных анимаций до кнопок, списков и даже вкладок. Некоторые из функций включают – минималистичную анимацию, 60 кадров в секунду без рывков, работает практически во всех браузерах без проблем.
Смотрите трейлер здесь:
Найдите GitHub здесь :
https://github.com/h5bp/Effeckt.css
animate.css
CSS-файл настолько мощный, что его можно использовать для добавления кучи анимации в ваши div или любые другие элементы, если на то пошло. Чтобы использовать animate.css в своем проекте, все, что вам нужно сделать, это включить «animate.css» в свой проект.
скачать здесь :
https://github.com/animate-css/animate.css
Смотрите использование здесь :
shake.css
Речь идет не всегда о тонкой и минималистичной анимации, иногда речь идет также о поиске анимации с сумасшедшими встряхиваниями, чтобы добавить этот «BUZZ» и дать пользователю понять, что вы серьезно относитесь к делу.
На практике shake.css используется для уведомления пользователя о чем-то очень важном, например о важном текстовом поле, которое пользователь забыл заполнить или, возможно, он нажал кнопку отправки перед заполнением обязательных полей. Эти анимации создают отличный пользовательский опыт, потому что они держат пользователя в курсе того, что происходит и что только что пошло не так.
Загрузите его здесь :
https://elrumordelaluz.github.io/csshake/
hint.css
Иногда формы могут быть сложными, и люди боятся нажимать без подтверждения. Да, большинство кнопок говорят сами за себя, но иногда у них есть багаж. Решение – «#Tooltips».
Всплывающие подсказки существуют уже давно, и «hint.css» добавляет этот намек на анимацию к этим подсказкам, поощряя их большее использование.
Это миниатюрный файл размером 1,5 КБ, не требующий настройки и работающий с большинством современных браузеров.
Загрузите его здесь :
http://kushagragour.in/lab/hint/
Трещотка
Ratchet – это полноценный фреймворк для создания мобильных приложений с простыми компонентами HTML, CSS и JS. От всевозможных заголовков и табличных представлений до кнопок, всплывающих окон и ratchicons, храповик включает в себя все компоненты, характерные как для iOS, так и для Android.
Загрузите полный zip-архив с документацией здесь :
Вот что вам нужно для начала :
http://goratchet.com/getting-started/
Плоский интерфейс
Плоский дизайн, одним из первых создателей был Windows 8 Metro UI, и с тех пор он процветал. Плоский дизайн чище, цвета приятнее для глаз и создают ощущение простора.
«Flat UI» – это прекрасное сочетание Bootstrap и плоского дизайна. Он состоит из плоского макета для компонентов платформы Bootstrap.
Загрузите его здесь :
http://designmodo.github.io/Flat-UI/
Маленький, но заслуживающий внимания
Анимированные заголовки
Анимированные заголовки, как следует из названия, представляют собой крошечную библиотеку, которая включает CSS и JavaScript, чтобы сделать акцент на определенной части заголовка.
Загрузите его здесь :
https://codyhouse.co/gem/css-animated-headlines/
hover.css
Множество эффектов наведения для ссылок, кнопок, логотипов, SVG, избранных изображений и т.д. Просто включите .css.
Загрузите его здесь :
http://ianlunn.github.io/Hover/
Введи это
TypeIt – это универсальный плагин jQuery для анимированной печати.
Загрузите его здесь :
Анимированные эффекты перехода
Анимированные эффекты перехода – это полноэкранная библиотека эффектов перехода со скоростью 60 кадров в секунду, основанная на анимации CSS.
Загрузите его здесь :
https://codyhouse.co/gem/animated-transition-effects/
клиенты
Это, безусловно, лучшее место для поиска идеального градиента. Вы можете сразу взять .css.
http://uigradients.com/
Гарнир
http://tympanus.net/Tutorials/CaptionHoverEffects/index.html
http://tympanus.net/Development/TextStylesHoverEffects/
Встроенные стили привязки
http://tympanus.net/Development/InlineAnchorStyles/
Анимированные письма
http://tympanus.net/Development/AnimatedLetters/index.html
PS: Веб-сайт, который поднял адаптивный дизайн на новый уровень. Найдите вдохновение здесь: http://www.dieseljoggjeans.com/
Источник записи: https://blog.templatetoaster.com