В первой части говорилось об основных проблемах с которыми пришлось столкнуться при изучении Gantry 5. Здесь я постараюсь рассказать о вещах на которые стоит обратить внимание перед написанием своего шаблона.
Рубрика «адаптивная разметка»
Переосмысление разметки. Первые шаги с Gantry 5. Часть 2
2017-05-16 в 14:08, admin, рубрики: cms, Gantry 5, grav, Joomla, wordpress, адаптивная вёрстка, адаптивная разметка, верстка сайтов, Разработка веб-сайтов, разработка сайтов, шаблоны сайтов
Переосмысление разметки. Первые шаги с Gantry 5
2017-04-07 в 19:00, admin, рубрики: cms, Gantry 5, grav, Joomla, wordpress, адаптивная вёрстка, адаптивная разметка, верстка, верстка сайтов, препроцессоры, Разработка веб-сайтов, шаблоны сайтов, метки: Gantry 5Грамотная посадка верстки на CMS WordPress – задача важная (после нескольких проектов мне стало ясно, что это занимает достаточно много времени). Чтобы ускорить процесс, начал искать фреймворк для написания тем WordPress. О Gantry 5 узнал от коллеги, который ведёт сайты на Joomla. Он рассказал, что есть движок, который может работать, как и на WordPress, так и на Joomla (а с некоторых пор и на Grav). Вот и решил узнать о нём побольше. Ведь согласитесь, — это хорошо: работать с одной системой и, перейдя на другую, продолжить пользоваться теми же инструментами.
В русской части интернета почти ничего не нашлось — ни отзывов, ни документации, а статьи оказались поверхностными. Единственно полная информация — только на официальном сайте.
Прочитав всё, что смог найти в русскоязычном интернете и частично документацию, решил изучить Gantry 5. Использование в качестве шаблонизатора twig, и хранение конфигов в yaml формате стало дополнительным плюсом (поскольку я давно присматривался к symfony, но времени не находил – получалось частичное изучение инструментов).
Читать полностью »
Практическое применение FlexBox
2014-11-07 в 7:09, admin, рубрики: css, css3, flexbox, responsive design, адаптивная разметка, Веб-разработкаПривет!
Одним прекрасным вечером, не предвещающим ничего интересного, в наш чатик поступило предложение от автора публикации «Переводим в код 5 действительно полезных шаблонов адаптивной разметки», написанной им весной 2012 года, написать статью-ремейк, но с применением FlexBox и сопутствующим пояснением что и как работает. После некоторой доли сомнений, интерес глубже разобраться в спецификации все таки победил и я благополучно сел верстать те самые примеры. В ходе погружения в эту область стало выясняться множество нюансов, что переросло в нечто большее чем просто переверстать макетики. В общем в данной статье хочу рассказать о такой чудесной спецификации, под названием «CSS Flexible Box Layout Module» и показать некоторые ее интересные особенности и примеры применения. Всех кому интересно, любезно приглашаю под хабракат.
Читать полностью »
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.
Читать полностью »
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)")
Переводим в код 5 действительно полезных шаблонов адаптивной разметки
2012-04-02 в 3:15, admin, рубрики: css, css3, media queries, responsive design, адаптивная разметка, веб-дизайн, Веб-разработка, метки: css3, media queries, responsive design, адаптивная разметкаПриветствую всех.
Недавно наш хабраколлега опубликовал интересную статью об адаптивной разметке.
Уже не далеко то время, когда мы будем уделять верстке под все разрешения намного больше внимания, нежели делаем это сейчас. Посему считаю нужным подходить к этому периоду подкованным в данном вопросе, ну или хотя бы иметь четкое представление, что это такое и с чем его едят. Запасаемся смартфонами и таблетками.
Читать полностью »