15 Интересных JavaScript и CSS библиотек за Апрель 2016

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


Office UI Fabric

Официальный проект с открытым исходным кодом от Microsoft, он является основой для создания веб-приложений, с внешним видом от MS Office. Он работает аналогично Bootstrap: HTML и CSS компоненты, адаптивная сетка, и большое количество jQuery дополнений.


Sticker.js

Данная библиотека позволяет разработчикам добавлять уникальные стикеры к своим веб-проектам. Любой элемент на странице может быть преобразован в виде наклейки, с дополнительными анимациями при наведении. Эта библиотека не имеет внешних зависимостей - используются только VanillaJS и CSS3 анимации.


Cash

Cash - легкая альтернатива jQuery. Она имеет тот же синтаксис, а также множество популярных методов и функций jQuery, переписанные с использованием современного JavaScript, в результате чего библиотека имеет размер всего 8kb (по сравнению с 32kb jQuery). Если вам не нужна поддержка старых IE, по моему мнению лучше использовать библиотеку Cash, вместо jQuery так как она стала слишком большой.


Popper.js

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


Bootstrap Material Datepicker

Datepicker в стиле Material Design, работает на jQuery и Momentjs. Для использования необходимо просто привязать его к выбранному полю ввода, установить нужные параметры, и выбрать вариант отображения (дата, время или оба варианта).


Material Kit

Бесплатный UI kit, который имеет знакомый Bootstrap синтаксис с современным взглядом Material Design от Google. Есть и другие подобные проекты, такие как Material Design для Bootstrap и Bootswatch Paper Theme, но Material Kit, будучи самым новым, стал известен благодаря старым фреймворкам и предлагает новый продукт с аккуратными стилями и большим количеством компонентов.


Skeleton

Skeleton - адаптивная CSS библиотека, которая придаст простому HTML проекту, стильный и интересный дизайн без особых усилий. В отличие от Bootstrap и других UI фреймворков, в которых вы должны добавить тонну классов в HTML разметку, для работы со Skeleton вам потребуется всего несколько классов и он автоматически стилизует все оставшиеся элементы. Библиотека очень легкая, содержит простую сетку из 12 столбцов и самые основные компоненты.


iCheck

Поскольку большинство веб-разработчиков знает, что стандартные HTML checkbox и radio-button выглядят ужасно и вызывают только головную боль когда пытаешься сделать так, чтобы они одинаково отображались во всех браузерах. Именно поэтому существует бесчисленное множество библиотек, которые помогут вам с этой не простой задачей, и iCheck вероятно, одна из самых крутых. Она предлагает несколько уникальных тем, полностью кастомизируется, и даже имеет поддержку IE6+ и мобильных браузеров.


Stylefmt

Stylefmt представляет собой PostCSS модуль, который автоматически форматирует CSS и SCSS таблицы стилей. Вы можете написать свои собственные правила форматирования или выбрать стандартные, для того чтобы весь CSS код вашего проекта выглядел полностью одинаково, независимо от того, кто его написал. Stylefmt доступен из CLI, в виде модуля node.js, и как плагин для популярных текстовых редакторов или таск раннеров.


InlineTweet.js

Благодаря этой библиотеке, вы сможете добавить кнопку Twitter к любому тексту на веб-странице. Просто добавьте span с нужными атрибутами и InlineTweet автоматически добавит выбранный текст в ссылку. При нажатии по тексту, он сгенерирует твит, вместе с хэштегами и URL.


SmoothState

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


Nanobar

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


Image Blur

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


TypeIt

С TypeIt можно создавать анимационные эффекты, которые будут отображать строку с эффектом набора. Библиотека предлагает все необходимые функции, такие как зацикливание анимации, контролирование скорости набора текста, замена строчек новыми, и другие.


Repaintless

CSS анимации намного эффективнее с точки зрения памяти, чем их JavaScript аналоги, но все еще могут привести к замедлению веб-страницы, если они сделаны не правильно. Добавление эффектов перехода к свойствам width, height, top или left элемента, вызывают перерисовку DOM и затрачивают GPU. И чтобы анимация была более гладкой и менее затратной, существует библиотека Repaintless которая берет всю работу на себя.

 

Перевод статьи 15 Interesting JavaScript and CSS Libraries for April 2016

Тэги: Frameworkanimatepluginlibrary

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.