Семантические CSS с интеллектуальными селекторами.

Overthinking how a functional thing should look.

“Форма всегда вытекает из функциональности. Это закон”. Так говорил знаменитый архитектор и “отец небоскребов” Луи Салливан. Архитекторы не желая раздавить сотни невинных людей под тяжестью колоссального здания, беспрекословно выполняют это правило. В дизайне, вы должны всегда начинать с функциональности, а форма должна возникать в результате. Вы можете попробовать создать небоскреб в первую очередь акцентируя внимание на создании привлекательного внешнего вида, но в этом случае могут появиться разного рода опасности.

Существует множество различных видов архитекторов. А как насчет интерфейсных архитекторов — или как мы их иногда ещё называем “не настоящих архитекторов”? Должны ли они безоговорочно соблюдать этот закон, или им все сойдет с рук?

Читать далее

Представление желеподобного меню навигации: когда холст совмещен с PaperJS.

Мы с большим удовольствием поддерживаем активных членов веб-дизайн сообщества и разработчиков. Сегодня мы с гордостью представляем желеподобное меню навигации, которое демонстрирует грандиозные возможности PaperJS и TweenJS при совместном использовании. Эта статья является еще одной золотой крупицей в нашей серии публикаций о различных инструментальных средствах, библиотеках и методах, которые были опубликованы на Smashing Magazine: LiveStyle, PrefixFree, Foundation, Sisyphus.js, GuideGuide, Gridpak, JS Bin и CSSComb. — Ред.
Читать далее

Backbone.js советы и шаблоны.

Austin, Texas in autumn

Backbone.js — это популярный общедоступный JavaScript “MV *” фреймворк, который получил огромное распространение с момента своего официального выхода немногим более, чем три года назад. Хотя Backbone.js и помогает создать подходящую структуру для приложений JavaScript, разработчику все равно приходится сталкиваться со многими обычными проблемами при выборе шаблонов и решений. В этой статье, мы проанализируем различные проектные шаблоны, которые вы можете использовать в своих Backbone.js приложениях. Также мы постараемся рассмотреть многие общие понятия, которые сбивают с толку разработчиков.

Austin, Texas in autumn

Приложения, также как и здания, лучше всего создавать на основе известных образцов. (Изображение: Мэтью Ратледж). Читать далее

Абсолютное горизонтальное и вертикальное центрирование в CSS.

Все мы когда-нибудь видели и использовали команду margin: 0 auto; для центрирования по горизонтали, но команда margin: auto; не работает для вертикального центрирования… до сих пор! Но на самом деле (внимание, спойлер!) абсолютное центрирование требует объявления (переменных) высоты и соответствующего стиля:

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Читать далее

Знакомство с LiveStyle: более надежная и умная CSS перезагрузка.

В прошлом выпуске мы познакомились с некоторыми интересными инструментами и библиотеками: PrefixFree, Foundation, Sisyphus.js, GuideGuide, Gridpak, JS Bin и CSSComb. Все они были разработаны и выпущены активными членами веб-дизайн сообщества в качестве проектов с открытым исходным кодом. Сегодня мы представляем LiveStyle плагин нового поколения для двунаправленного (редактор ↔ браузер) редактирования CSS! – Ред.

В наши дни инструментальные средства для редактирования CSS не являются чем-то новым. Возможно, вы уже знакомы с программами типа LiveReload, CodeKit и Brackets. Так почему бы не создать еще один инструмент и не дать ему громкое название «CSS редактор нового поколения»?

Инструмент, который я хотел бы вам сегодня представить, называется Emmet LiveStyle. В основе этого плагина лежит совершенно иной подход к обновлению CSS. В отличие от других редакторов, этот не просто заменяет весь CSS-файл в браузере или окне редактирования, а скорее позволяет переместить изменения из одного CSS-файла в другой.

Читать далее

«Другой» интерфейс: элементарный дизайн с Sass.

atoms-500_mini

Мы, как разработчики и дизайнеры программ пользовательского интерфейса, постоянно совершенствуем два типа интерфейсов: один для посетителей, которые пользуются веб-сайтом, другой для разработчиков, которым приходится заниматься кодированием, корректировками или полномасштабной реконструкцией в случае необходимости. Но мы, как правило, уделяем больше внимания первой группе, часто забывая о том, что разработчикам также нужны аналогичные условия работы. Мы не должны забывать, что разработчики в какой-то степени также являются пользователи.
Читать далее

Как настроить интернет: малоизвестные бэк-энд методы и секреты (2 часть).

New Perspectives on Coding

New Perspectives on Coding

Примечание редактора: сегодня мы рады представить вам вторую часть статьи, созданной на основе одной из глав предстоящего печатного выпуска Smashing Book #4: новые взгляды на кодирование, написанной Полом Теро. Вы также можете прочитать первую часть этой статьи, которая вышла ранее. Также вы можете скачать полный вариант статьи из электронной Smashing библиотеки.

Прежде чем вы начнете читать эту статью, хотелось бы сделать маленькое напоминание: в 1 части мы изучали инфраструктуру интернета и веб-сервера. Мы остановились на этапе диагностики программного обеспечения веб-сервера и убедились в его работоспособности, выполнив проверку с помощью HTTP-запроса, и получили положительный ответ. Настало время для…
Читать далее

Как настроить интернет: малоизвестные бэк-энд методы и секреты (1 часть).

New Perspectives on Coding

New Perspectives on Coding

Мы очень рады представить вам главу из предстоящего печатного выпуска Smashing Book #4: Новые взгляды на кодирование, написанную Полом Теро. Обратите внимание, что вторая часть этой главы будет опубликована на следующей неделе. Если вы не можете ждать до тех пор, то не стесняйтесь и загружайте полную версию этой главы, которая доступна в электронной Smashing библиотеке демонстрационных материалов.— Ред.
Читать далее

Информационные запросы — это не выход: polyfill скрипт для модульного запроса.

Адаптивный веб-дизайн превратился в особый способ проектирования и построения веб-сайтов. Именно благодаря этому направлению дизайна мы начали думать о классификации устройств и использовании информационных запросов для адаптации шаблона сайта под размер экрана браузера. Этот процесс, однако, отличается от иерархического структурирования CSS и характеризует элементы относительно окна, а не их контейнера.

Широкое использование информационных запросов может быть ответом на ряд существующих на сегодняшний день проблем, но этот подход не является настолько эффективным и долгосрочным решением. Информационные запросы нельзя использовать для многоразовых модулей, которые адаптируются в зависимости от размера своих контейнеров.

Читать далее

Метод «автомобиль клоуна»: применение адаптивных изображений в веб-дизайне.

Возможность использования адаптивных изображений является довольно популярной темой в обсуждениях об адаптивном веб-дизайне. Почему? Потому что никто до сих пор так и не нашел подходящего решения. Новые элементы и атрибуты, которые обсуждаются в качестве решения, не обладают достаточной универсальностью. Многие разработчики испытывают настоящую головную боль, ведь для каждого пользователя необходимо обеспечить оптимизацию изображения под соответствующий размер экрана и разрешение, без потери времени, памяти или пропускной способности со стороны клиента.

В нашем распоряжении находятся изображения для переднего плана и фоновые изображения. У нас есть большие и маленькие дисплеи. Мы используем стандартные дисплеи и дисплеи с высоким разрешением. У нас есть соединения с высокой и низкой пропускной способностью. Мы можем использовать портретную и пейзажную ориентации.

Читать далее