адаптивный дизайн


Адаптивная верстка: CSS&JS фреймворк Wirefy

Wirefy - новый CSS&JS фреймворк - соединил в себе все лучшее, что было в предыдущих решениях: Skeleton, 320 and Up, HTML5 Boilerplate, Frameless grid и Bootstrap. Разработчик - Chris Da Sie. Адаптивная верстка на Wirefy очень удобна.

Фреймворк также основан на технологии mobile first. Выгодно отличается простой и удобной поддержкой новейших моделей мобильных устройств и широкоформатных мониторов. От громоздкой структуры своих предшественников фреймворк отличается гибкой структурой, которая содержит все необходимые для дизайна элементы и в то же время легко адаптируется под авторский макет, чего не скажешь, например, о Bootstrap. Построенные на нем макеты можно узнать за версту, что, конечно, не добавляет преимуществ юзабилити сайта.

Адаптивная верстка на Wirefy.

В основе фреймворка - разновидность 960-пиксельной сетки.

Media Queries

320px
640px
720px
888px
984px
1200px

Обратите внимание, что Wirefy учитывает рекомендации google для смартфонов.

@media only screen and (max-width: 640px) {...}

и позаботился о дизайне для стандартных расширений экрана для laptop и iPad Landscape Mode - 1200px.

Wirefy включает удобную типографику и современный дизайн стилей для меню, переключателей, кнопок, слайдеров, таблиц, форм, иконки, фавиконы и т.д.

Подробнее об адаптивных слайдерах для Wirefy смотрите здесь.

В состав Wirefy входят также файлы robots. txt и human.txt

Разработчики уточняют, что фреймворк поддерживается новыми версиями браузеров

Latest Chrome (Mac/PC)
Latest Safari

но это не должно пугать.

Адаптивная верстка на Wirefy отлично работает вместе с хаком для старых браузеров. Подробности в статье адаптивный дизайн.

3 августа 2012 г.
Подготовила Ольга Мараева.
При использовании статьи ссылка на сайт автора обязательна.

Google