В этой статье мы собрали для вас коллекцию из 15 удивительных библиотек на JavaScript и CSS, с которыми нам довелось работать в июне. Каждая из них представляет различные решения фронтенд-задач и может быть большим подспорьем для начинающих и продвинутых разработчиков.
Используйте Bideo, чтобы сделать ваши лендинги круче, добавив полноэкранное видео в фоновом режиме. Эта библиотека может быть использована на любой HTML-странице, но убедитесь, что ваше видео адаптивно и корректно отображается. Bideo также предлагает автоматическое воспроизведение, а также показывает статическое изображение (превью) пока загружается медиа-файл.
Push-уведомления имеют хорошую браузерную поддержку, но страдают отсутствием рабочего кросс-браузерного API. Push.js - это библиотека, которая решает эту проблему и предлагает универсальный способ управления оповещениями на рабочем столе, которые работают одинаково хорошо в Chrome, Firefox, Safari и IE.
Cutestrap - CSS фреймворк, который является более компактной альтернативой Bootstrap. В этой библиотеке (размером всего 8kb) много хорошо стилизованных компонентов пользовательского интерфейса, продвинутая адаптивная сетка, а также куча полезных классов модификаторов. Благодаря своей простоте Cutestrap очень легко настроить с помощью перезаписи дефолтных стилей или с помощью Sass.
Timedropper - это jQuery-плагин для создания необычного поля ввода времени с превосходным дизайном и плавной анимацией. Планин может быть инициализирован на любом поле ввода с помощью простого вызова: $('#some-input').timeDropper();
. Мы также рекомендуем брата Timedropper в – Datedropper.
CSSgram - это библиотека, которая предлагает более 20 фильтров из Instagram, созданных с помощью CSS свойства-filter и свойства blend. Он не полагается на JavaScript, чтобы достичь желаемого эффекта, поэтому чрезвычайно прост в использовании. CSSgram работает во всех настольных и мобильных браузерах, за исключением IE, который не поддерживает CSS фильтров.
Библиотека на чистом CSS для создания адаптивных сеток. Как подсказывает название, Flexbox Grid основана исключительно на flexible boxes модели, которая является самым современным и надежным способом для создания макетов в HTML. Сетки, созданные с помощью свойства flexbox, адаптивны и легко могут быть выровнены и спозиционированы.
Красивая программа просмотра изображений, которая позволяет пользователям увеличить картинки в полный экран. Библиотека выглядит великолепно, очень легко настраивается и адаптируется к вашим потребностям. Intense Images не имеет внешних зависимостей и работает во всех современных браузерах.
Picnic - CSS фреймворк, который выделяется на фоне остальных библиотек с помощью своей инвазивности. Что это значит, так это то, что пользователю Picnic CSS не обязательно добавлять классы каждому элементу, т.к. данный фреймворк самостоятельно захватывает уже существующие стили со страницы и добавляет их настройки ко всем HTML-элементам, оставляя код красивым и коротким.
JavaScript-плагин для встраивания смайлов, медиа, карт, и всевозможный интересный материал в HTML текст. При инициализации на элементе, Embed.js возьмет этот внутренний текст и заменит специфическую разметку на строку со специальным содержанием: ссылки YouTube превращаются в видео, Twitter ссылки в твики, Spotify ссылки в аудиоплееры и т.д. Поддерживаются Github, SoundCloud, Codepen, Instagram и др.
Trianglify - JavaScript библиотека для создания геометрических градиентных изображений. После настройки размеров вашего градиента и как он должен выглядеть (цвет, размер ячеек и т.д.) можно сделать конечный результат непосредственно в холст, как DOM узел SVG, или экспортировть в качестве base64 данных URI. Online генератор также доступен.
Замените дефолтные всплывающие окна с помощью JavaScript-команд alert и prompt на красочные, анимированные диалоговые окна. Есть пять различных типов сообщений, множество вариантов настройки, и все методы, которые вам когда-нибудь понадобятся. SweetAlert2 имеет большую браузерную совместимость и в результате вы получите всплывающие окна, которые выглядят так же, как во всех операционных системах и веб-браузерах, включая IE 10+ и Edge.
Этот Jquery-плагин анализирует изображения и выясняет какой цвет является их самым распространенным. Первичный цвет затем извлекается и может быть применен в качестве фона любого выбранного HTML элемента. С помощи небольшого творчества эта библиотека может быть использована для создания удивительного веб-дизайна и демок.
С Typed.js вы можете заменить скучные плейсхолдеры в полях ввода на анимированные. Просто перепишите одну или несколько строк, и этот jQuery-плагин отобразит их в виде, будто они были впечатаны с клавиатуры. В качестве настроек предлагаются различные курсоры, настройка скорости, зацикливание и многое другое.
JQuery-плагин для создания контента с вкладками, который также может быть использован для изготовления каруселей и пагинации. Tabslet очень легкий, но, несмотря на это, предлагает тонну полезных опций, таких как анимация, различные слушателей событий, а также с IE7+.
ContentTools - мощная JavaScript библиотека, которая может преобразовать любую HTML страницу в WYSIWYG редактор. На сайте проекта есть подробные пошаговые инструкции, которые помогут с установкой и запуском. Сразу после установки вам откроется огромный потенциал ContentTools и многочисленные возможности для создания чудесных интерактивных приложений и сервисов.