Заметил, в последнее время на любое упоминание Twitter Bootstrap, минимум один человек отмечает, что «слишком много его стало». Большинство все устраивает, но некоторым он уже приелся и они хотят чего-то нового. Поэтому решил написать статью со сборником css-фреймворков, думаю каждый сможет найти что-нибудь для себя. Заодно сделаем интернет разнообразнее.
Рубрика «адаптивная вёрстка» - 4
30 CSS-фреймворков для адаптивного веб-дизайна
2012-10-30 в 20:46, admin, рубрики: css, css-фреймворк, адаптивная вёрстка, веб-дизайн, Веб-разработка, метки: css-фреймворк, адаптивная вёрсткаSCSS: пара полезных техник
2012-09-18 в 8:20, admin, рубрики: css, scss, web-разработка, адаптивная вёрстка, Веб-разработка, итераторы, Отзывчивый веб-дизайн, препроцессор, метки: scss, web-разработка, адаптивная вёрстка, итераторы, Отзывчивый веб-дизайн, препроцессор CSS – препроцессоры все популярнее среди веб – разработчиков. Почему?
Потому что они позволяют:
- Сэкономить время
- Применять принцип DRY в CSS
- Сделать код более читаемым
На данный момент наиболее популярными препроцессорами являются SASS и LESS.
О том, почему SASS лучше LESS, можно почитать в этой статье. Лучше ли — вопрос спорный, однако, я перешел с LESS на SCSS хотя бы потому, что тут есть:
- Циклы
- Условные операторы
- Списки
О сравнении синтаксиса SCSS и SASS, можно почитать в этой статье. Лично я выбрал SCSS по причине обратной совместимости с CSS и, как следствие, возможности быстро включать старые CSS файлы в проект посредством директивы import.
Об основах SCSS уже писали faiwer1 и AbleBoy2, здесь же я хочу описать пару техник, которые мне действительно помогли.
Читать полностью »
Способы реализации адаптивных таблиц
2012-08-23 в 15:15, admin, рубрики: css, адаптивная вёрстка, адаптивный дизайн, веб-дизайн, Веб-разработка, метки: css, адаптивная вёрстка, адаптивный дизайн, веб-дизайн Одна из постоянных проблем верстальщиков адаптивных сайтов — это задача удобно представить обычные таблицы на мобильных устройствах. Вот как выглядят такие таблицы чаще всего:
Не очень удобно, правда? К счастью уже существует несколько хитрых способов решить такую проблему.Читать полностью »
Виды таблиц с данными в адаптивном дизайне
2012-08-23 в 15:15, admin, рубрики: css, адаптивная вёрстка, адаптивный дизайн, веб-дизайн, Веб-разработка, метки: css, адаптивная вёрстка, адаптивный дизайн, веб-дизайн Одна из постоянных проблем верстальщиков адаптивных сайтов — это задача удобно представить обычные таблицы на мобильных устройствах. Вот как выглядят такие таблицы чаще всего:
Не очень удобно, правда? К счастью уже существует несколько хитрых способов решить такую проблему.Читать полностью »
Таблицы с данными в адаптивном дизайне
2012-08-23 в 15:15, admin, рубрики: css, адаптивная вёрстка, адаптивный дизайн, веб-дизайн, Веб-разработка, метки: css, адаптивная вёрстка, адаптивный дизайн, веб-дизайн Одна из постоянных проблем верстальщиков адаптивных сайтов — это задача удобно представить обычные таблицы на мобильных устройствах. Вот как выглядят такие таблицы чаще всего:
Не очень удобно, правда? К счастью уже существует несколько хитрых способов решить такую проблему.Читать полностью »
HTML5 Адаптивные изображения
2012-06-06 в 22:02, admin, рубрики: html, html5, responsive web design, rwd, w3c, адаптивная вёрстка, адаптивная разметка, адаптивный дизайн, Веб-разработка, метки: html5, responsive web design, rwd, w3c, адаптивная вёрстка, адаптивная разметка, адаптивный дизайн 
Адаптивные изображения одна из проблем Responsive Web Design. Возможно вы начали использовать high-res изображения для дисплеев с высоким разрешением и уменьшать их размер для устройств с меньшим разрешением дисплея, что попросту съедает трафик без какой либо пользы для владельцев устройств с дисплеями с небольшим разрешением. Или все так же используете изображения невысокого разрешения, которые ужасно смотрятся на больших экранах и дисплеях с высоким разрешением.Читать полностью »
Адаптивная верстка: CSS&JS фреймворк Skeleton
2012-05-22 в 11:00, admin, рубрики: css, css3, html, javascript, адаптивная вёрстка, адаптивная разметка, адаптивный дизайн, Веб-разработка, метки: css, css3, javascript, адаптивная вёрстка, адаптивная разметка, адаптивный дизайн 
В продолжение недавней статьи про адаптивную верстку, хочется более полно раскрыть тему. В реалиях, чаще всего, для адаптивной верстки используют CSS-фреймворки. Об одном из них я хотел бы рассказать, а если точнее – перевести мануал по ее использованию. Называется он Skeleton.
Читать полностью »
Самые простые техники адаптивной верстки
2012-05-17 в 0:10, admin, рубрики: css, html, адаптивная вёрстка, веб-дизайнСайтов с адаптивной разметкой с каждым месяцем становится все больше, заказчики кроме кроссбраузерности все чаще требуют адаптивность, но многие разработчики не спешат обучаться новым техникам. Но адаптивный дизайн — это просто! В этой статье представлено 5 примеров адаптивной разметки различных элементов веб-страниц.
62 полезных инструмента для адаптивного дизайна (Responsive web design)
2012-04-16 в 7:42, admin, рубрики: css, css3, html, html5, media queries, responsive design, responsive web design, адаптивная вёрстка, адаптивная разметка, адаптивный дизайн, веб-дизайн, Веб-разработкаПеревод крайне ценной статьи «Responsive Web Design Techniques, Tools and Design Strategies» популярного интернет-издания для разработчиков Smashing Magazine.
Еще в январе мы опубликовали статью об адаптивном дизайне «Responsive Web Design: What It Is and How To Use It» (Адаптивный веб-дизайн: Что это такое и как им пользоваться). Адаптивный веб-дизайн продолжает привлекать к себе много внимания, но, учитывая, насколько он отличается от традиционных методов разработки сайтов, он может показаться заоблачно сложным для тех дизайнеров и разработчиков, которые его не пробовали.
По этой причине мы составили обзор ресурсов, полезных при создании адаптивных сайтов. В обзор вошли подробные руководства, подходы, инструменты, статьи, содержащие практические советы, необходимые для создания вашего собственного адаптивного сайта.
Техники Responsive web design
1. CSS Transitions and Media Queries
CSS Transitions и Media Queries
Elliot Jay Stocks подробно рассказывает о методе сочетания CSS Media Queries и CSS transitions. Основная идея в следующем: разрабатывая адаптивный сайт с помощью Media Queries, вы постоянно изменяете ширину вашего браузера, чтобы посмотреть, как сайт ведет себя при этом. Но каждый раз, когда отрабатывает один из ваших Media Queries, виден жесткий переход между стилями (первый, например, для десктопов, второй — для планшетов). Почему бы не использовать CSS transitions для сглаживания этих жестких переходов с помощью анимации?
.jpg "62 полезных инструмента для адаптивного дизайна (Responsive web design)")