Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.
С помощью данного сервиса вы сможете сверстать кроссбраузерный отзывчивый макет за 55 минут. Очень красивый и удобный интерфейс. Идеальное решение для веб-дизайнеров, 26 000 из которых уже используют Webflow. Для создания двух проектов сервис бесплатный, а в дальнейшей перспективе вас ждут вполне демократичные цены. Инструмент реально «крутой».
Если Вам GUI для верстки не комильфо сам по себекак для меня, все равно рекомендую зарегистрироваться и экспортировать парочку responsive макетов. А еще есть простой генератор отзывчивого лэйаута и Responsive Patterns.
Функциональный и простой инструмент для создания параллакс эффекта.
Для всех элементов на которых будет применяться эффект указываем класс
После чего передаем родительский элемент в Parallax конструктор:
Небольшая, но полезная библиотека, которая упрощает процесс разработки именно адаптивного, а не отзывчивого дизайна. Все очень просто. Принцип работы наглядно иллюстрируется на следующем изображении.
Cкрипт по принципу Modernizr присваивает тегу HTML классы
Говоря о «кроссдевайсности» хочется также упомянуть про Risizer — Bookmark для для тестирования отзывчивого дизайна. Все мы знаем про множество подобных сервисов, но мне кажется, этот способ самый удобный.
GistBox синхронизируется с вашим GitHub профилем и в нужном виде отображает Gist лист. Все ваши сниппеты отсортированы по меткам и всегда под рукой. Доступен как расширение для Chrome.
Начну с того, что проект создан одним из членов команды Boilerplate. CSS Modal — самый простой способ добавить в своей проект адаптивное модальное окно:
И нужно всего лишь подключить сам скрипт перед закрывающим тегом body, после чего данная разметка станет модальным окном.
Недавно мне понадобилось сокращать абзацы многоточием. Но стандартный
Uikit — плюс один к существующим веб фреймворкам со своими особенностями.
HTML2PDF. Сервис написан на основе Phantom.js. Возможно, пригодится для оформления портфолио в .pdf.
Большое спасибо всем за внимание.
Следующая подборка (Выпуск 3) Предыдущая подборка (Выпуск 1)
Webflow
С помощью данного сервиса вы сможете сверстать кроссбраузерный отзывчивый макет за 55 минут. Очень красивый и удобный интерфейс. Идеальное решение для веб-дизайнеров, 26 000 из которых уже используют Webflow. Для создания двух проектов сервис бесплатный, а в дальнейшей перспективе вас ждут вполне демократичные цены. Инструмент реально «крутой».
Если Вам GUI для верстки не комильфо сам по себе
Parallax.js
Функциональный и простой инструмент для создания параллакс эффекта.
Для всех элементов на которых будет применяться эффект указываем класс
layer
и устанавливаем значение скорости движения в аттрибуте data-depth
. В библиотеке есть ряд параметров:<ul id="scene"
data-calibrate-x="false" // Отключает калибровку по горизонтали
data-calibrate-y="true"
data-invert-x="false"
data-invert-y="true" // Устанавливает инверсию по вертикали
data-limit-x="false"
data-limit-y="10" // Устанавливает ограничение в 10 циклов для движения
data-scalar-x="2"
data-scalar-y="8" // Устанавливаем чувствительность движения
data-friction-x="0.2"
data-friction-y="0.8"> // Как я поннимаю это хаотичность движения элементов
<li class="layer" data-depth="0.00"><img src=""></li>
<li class="layer" data-depth="0.20"><img src=""></li>
<li class="layer" data-depth="0.40"><img src=""></li>
<li class="layer" data-depth="0.60"><img src=""></li>
<li class="layer" data-depth="0.80"><img src=""></li>
<li class="layer" data-depth="1.00"><img src=""></li>
</ul>
После чего передаем родительский элемент в Parallax конструктор:
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
Intention.js
Небольшая, но полезная библиотека, которая упрощает процесс разработки именно адаптивного, а не отзывчивого дизайна. Все очень просто. Принцип работы наглядно иллюстрируется на следующем изображении.
Device.js
Cкрипт по принципу Modernizr присваивает тегу HTML классы
ios/android/windows/blackberry phone/tablet landscape/portrait
, тем самым избавляет Вас от необходимости прописывать основные разрешения устройств в media queries. Говоря о «кроссдевайсности» хочется также упомянуть про Risizer — Bookmark для для тестирования отзывчивого дизайна. Все мы знаем про множество подобных сервисов, но мне кажется, этот способ самый удобный.
GistBox
GistBox синхронизируется с вашим GitHub профилем и в нужном виде отображает Gist лист. Все ваши сниппеты отсортированы по меткам и всегда под рукой. Доступен как расширение для Chrome.
CSS Modal
Начну с того, что проект создан одним из членов команды Boilerplate. CSS Modal — самый простой способ добавить в своей проект адаптивное модальное окно:
<section class="semantic-content" id="modal-text" tabindex="-1"
role="dialog" aria-labelledby="modal-label" aria-hidden="true">
<div class="modal-inner">
<header id="modal-label"><!-- Header --></header>
<div class="modal-content"><!-- The modals content --></div>
<footer><!-- Footer --></footer>
</div>
<a href="#!" class="modal-close" title="Close this modal" data-close="Close"
data-dismiss="modal">×</a>
</section>
И нужно всего лишь подключить сам скрипт перед закрывающим тегом body, после чего данная разметка станет модальным окном.
Dotdotdot.js, Uikit, HTML2PDF
Недавно мне понадобилось сокращать абзацы многоточием. Но стандартный
text-overflow
работает только на одной строке с no-wrap
. И на просторах интернета мне повстречался замечательный скрипт (dotdotdot.js), который отлично решает эту задачу. Uikit — плюс один к существующим веб фреймворкам со своими особенностями.
HTML2PDF. Сервис написан на основе Phantom.js. Возможно, пригодится для оформления портфолио в .pdf.
Большое спасибо всем за внимание.
Следующая подборка (Выпуск 3) Предыдущая подборка (Выпуск 1)
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Понравилась ли Вам подборка?
86.9% Да1267
13.1% Нет191
Проголосовали 1458 пользователей. Воздержался 381 пользователь.