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

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

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

Читать далее

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

Austin, Texas in autumn

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

Austin, Texas in autumn

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

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

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

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

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

Читать далее

Обзор самых красивых примеров типографики в веб-дизайне.

Matt Luckhurst

Первые впечатления – это самые устойчивые впечатления. Создание правильной типографики позволяет привлечь внимание пользователей даже до того, как они прочитают хотя бы одно слово или кликнут по кнопке. Типографика используется не просто для того, чтобы украсить повествование – она показывает пользователю кто стоит за веб-сайтом и какие цели преследует данный сайт.

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

Читать далее

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

atoms-500_mini

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

Обои для рабочего стола Календари: Август 2013

Agosto ketchup

Мы всегда стараемся, чтобы сразиться со своими артистическими способностями и производить некоторые интересные, красивые и творческие произведения искусства.
Читать далее

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

New Perspectives on Coding

New Perspectives on Coding

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

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

Не все то золото, что блестит: распространенное заблуждение касательно проектирования с использованием статистических данных.

infographicx3

Очень часто при работе в сфере информационного дизайна приходится слышать вопрос: “А вы можете заставить эти данные выглядеть как можно круче?”. В этом случае слово “круче” имеет довольно неоднозначную трактовку и для различных людей будет означать абсолютно разные вещи. К сожалению, при работе с данными, термин “круто” зачастую ассоциируется с различными типами графиков, такими как линия, бар и круговая диаграмма, которые в большинстве случаев отходят на второй план и списываются как “скучные”.

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

Мотив — как средство создания успешных продуктов.

Definition of Motif

Что нужно для создания отличного продукта? Для тех из нас, кто занимается проектированием и созданием приложений, веб-сайтов и программного обеспечения, отличный продукт означает только одно -  продукт, которым восхищаются пользователи. Разработка цифрового продукта — это комплексная задача.
Читать далее

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

New Perspectives on Coding

New Perspectives on Coding

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