Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

Создаем двойник Twitter с нуля:

by
Difficulty:BeginnerLength:LongLanguages:

Russian (Pусский) translation by Nadia Gonzales (you can also view the original English article)

Это – первое руководство из серии руководств, созданных персоналом Nettuts+, в которых описывается проектирование и создание веб-приложения с нуля – на нескольких языках! Мы будем использовать вымышленный двойник Twitter под названием Ribbit в качестве основы для этой серии руководств.

В данном руководстве нам необходимо сосредоточиться на UI (* user interface – пользовательский интерфейс. Здесь и далее прим. пер.). Мы будем использовать препроцессор LESS (*  препроцессор CSS, позволяющий использовать переменные, функции, циклы и другие технологии для упрощения работы со стилями) для максимально возможного облегчения работы с CSS.


Введение

Загрузите ресурсы к этому руководству, если хотите параллельно работать с кодом.

Данное руководство поделено на пять частей, в которых объясняется создание стилевого оформления различных страниц макета Ribbit. Я буду обращаться к элементам HTML при помощи селекторов CSS для облегчения понимания. Однако перед погружением в макет давайте кратко обсудим наследование.

Наследование

В CSS при обращении к вложенным элементам могут получаться громоздкие селекторы. Например:

Бывают еще длиннее! При использовании LESS вы можете вкладывать один элемент в другой, благодаря чему код будет легче читать.


Переменные и миксины (* примеси; позволяют определить стили, которые могут быть использованы повторно в любом месте документа)

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

Теперь давайте создадим две примеси. Благодаря первой будет создана иллюзия сглаженного (* устранение контурных неровностей) текста, а благодаря второй – градиенты, поддерживаемые основными браузерами. Первую реализовать довольно просто:

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

Теперь переходим к градиенту; его реализовать намного сложнее, чем сглаженный текст, поскольку каждый браузер отображает градиент по-разному. Ниже приводится код с учетом различных вендорных  префиксов (* префиксы создателей браузеров):

У каждого браузера имеется префикс:  -moz- – для Firefox, -webkit- – для Chrome и т.д. В последней строке используется рекомендованная W3C (* World Wide Web Consortium – Консорциум World-Wide Web) версия записи для градиента. Если браузер поддерживает ее, то будет использовать  эту запись, а не предыдущие, поскольку это – последнее свойство background в правиле. Функция linear-gradient принимает восемь параметров: четыре пары значений цвета, указанных в процентах. В этой функции создается градиент с четырьмя шагами цветов.


Стилевое оформление глобальных элементов

Давайте теперь определим стили для некоторых глобальных элементов, таких как кнопки и ссылки. Мы хотим, чтобы для всех элементов использовался шрифт Helvetica или Arial и цвет текста, определенный  ранее:

Тело

Правила стилей для тела довольно просты; нам необходим белый фон с повторением фонового изображения. Убираем margin (* пространство от границы текущего элемента до внутренней границы его родительского элемента) и padding (* расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое).

Поля для ввода

Также мы определим стиль по умолчанию для всех элементов <input/> на странице:

Мы устанавливаем размер по умолчанию и padding, а также мы используем переменную @border-color, чтобы убрать надоедливый синий контур, который появляется при фокусировке элемента. Вы должны были бы заметить еще пример синтаксического сахара LESS: мы можем добавлять псевдоклассы (и обычные классы тоже) при помощи символа & (ссылка на родителя) как показано ниже:

Благодаря этому поля для ввода будут иметь желтый фон при фокусировке.

Кнопки для отправки формы

Для кнопок для отправки формы мы будем использовать как ранее определенный миксин, так и свойство border-radius для создания эффекта:

Ссылки

Для ссылок необходим цвет, отличный от цвета текста. Также мы устанавливаем подчеркивание при наведении на них курсора мыши:


Базовый макет

Мы начнем с части макета, которая остается неизменной для каждой страницы. Вот код HTML, который я объясню ниже:

Мы начинаем с обычного определения doctype (* тип  документа) и head (* заголовок) документа. Вы можете использовать библиотеку less.js и подключить style.less на стадии разработки (как я сделал в этом коде). Позже вы можете скомпилировать файл LESS в CSS, если вы не хотите использовать less.js. Как вы, наверное, заметили, макет поделен на три части: header, #content и footer. Вам необходимо будет сохранить этот документ HTML, чтобы увидеть, для всех ли элементов вы задали правильные стили.

Header

Давайте возьмемся за header. В нем содержатся логотип Ribbit и два слова: 'Twitter Clone'. Они заключены в обертке, ширина которой определяется значением переменной @content-width. В макете имеется несколько оберток, у которых ширина определяется переменной @content-width, а свойство margin имеет значение auto (* размер отступов будет автоматически рассчитан браузером):

Высота самого header равна 85px, а ширина – на всю ширину страницы.

После ширины добавьте стиль для div.wrapper, где задается вертикальный отступ:

Таким образом, header должен выглядеть как показано ниже:

Изображения в обертке должны находиться на 10px ниже, чтобы они были красиво отцентрированы:

Также размер шрифта в элементах <span/> должен быть больше, чем его значение по умолчанию:

Ниже показано, как должен выглядеть наш дизайн на данный момент:

Header in basic template.

Контент

В данный момент мы мало что можем сделать с #content. Мы добавим небольшой margin снизу и минимально возможную длину; макет будет выглядеть броско, если он недостаточной высоты:

Для  обертки внутри необходим вертикальный margin и горизонтальный со значением auto.

Footer (* подвал)

Подобно header footer неизменен для всех страниц. Мы будем использовать фоновое изображение и меньший размер шрифта. Также нам необходимо правило clear: both, поскольку мы будем использовать выравнивания в content. Без него подвал может съехать на уровень content:

Давайте теперь добавим небольшой padding к обертке; изображения внутри него должны выравниваться по правому краю:

Ниже показан footer:


Домашняя страница

Эта страница показывается пользователям, которые не вошли в Ribbit. Поэтому необходимо будет предоставить форму для входа в заголовке и форму для регистрации вместе с большим изображением с лягушкой в content. Давайте начнем с базового шаблона.

Поля для ввода формы для входа

Добавьте эту форму для входа в div.wrapper  header после элемента <span/>:

Эти поля уже имеют стилевое оформление, однако нам  необходимо добавить отступы и установить значением свойства display   inline. Добавьте этот код после span в div.wrapper  header:

Форма для регистрации

Ниже представлен код HTML для формы регистрации:

Добавьте этот код HTML внутри div.wrapper #content. Нам необходимо, чтобы изображение было выровнено по левому краю и у него были скругленные уголки (добавьте этот код после margin в div.wrapper #content):

Теперь вы можете взяться за стилевое оформление формы для регистрации. Также у нас будет панель, которую будем использовать позже; поэтому мы зададим стилевое оформление для .panel:

Однако сейчас мы зададим правила только для панели с классом right. Она уже и перемещена к правому краю панели. Так что вставьте следующий код в div.panel:

Также нам необходимо позаботиться о заголовке и содержимом панели. Мы будем использовать элементы <h1/> для заголовка и элементы <p/> для содержимого. Обратите внимание, что вы можете использовать * (* групповой символ; используется для представления любого символа или группы символов) внутри другого элемента.

Ниже показано, как должны выглядеть стили для div.panel.

А вот показан скриншот, как должна будет выглядеть эта страница на данный момент (кликните, чтобы увидеть в натуральном размере):

Home page preview


Страница для приятелей

Страница для приятелей должна быть показана после входа пользователя в приложение. На ней будут показаны список последних "Ribbits" и немного статистики о вашей аккаунте. Опять-таки, начинаем с базового шаблона. На этой странице, как и на других, будет показана  кнопка для выхода из приложения вместо формы для входа в header:

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

Поскольку селектор этого правила является ID элемента, вы можете его разместить как самостоятельно, так и внутри div.wrapper заголовка. Выбор за вами, однако помните, что если вы решите разместить его внутри другого элемента, то скомпилированный CSS будет иметь более длинный селектор (header div.wrapper #btnLogOut).

Окно "Create a Ribbit"

Для начала добавьте этот код для панели в div.wrapper  #content:

Стили для класса .right были определены ранее, однако нам необходимо добавить некоторые стили для элемента <textarea/>. Мы зададим для него необходимые размер и границы:

Добавьте этот код в определении стилей для правой панели.

Информация о пользователе

Теперь давайте сосредоточим внимание на панели, в которой содержится информация об аккаунте пользователя. Мы временно разместим в ней определенный случайный контент, чтобы посмотреть на стилевое оформление:

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

Как бы там ни было, у нас имеется еще одна панель; так что нам необходимо сначала задать стили для нее:

Вы, вероятно, знаете, куда поместить данный код (обратите внимание, как легко вы можете выполнять арифметические операции в LESS) Эта панель содержит div.ribbitWrapper. Так что добавьте следующий код:

Внутри этого элемента содержится два элемента <span/> с разными значениями цвета и размера шрифта. Их классы – .name и .time:

Также нам необходимо задать положение аватара около левой границы. Добавьте следующий код:

Также текст Ribbit должен быть сглажен, выровнен по ширине (* что означает одновременное выравнивание по левому и правому краю) и перемещен вправо. Благодаря этому коду текст будет размещен после аватара, а не под ним:

В этом параграфе имеются элементы <span/> с вертикальными линиями, которые визуально их разделяют. Этот эффект достигается при помощи границы, поля и отступа:

Ribbits приятелей

На этой панели перечисляются последние ribbits людей, на которых пользователь подписался. Вставьте следующий код после панели с информацией о пользователе:

В ней имеется несколько примеров ribbits, чтобы посмотреть на ее вид. Мы добавим некоторые границы для их визуального разделения. Добавьте этот код в div.ribbitWrapper:

В этом правиле добавляется нижняя граница и убирается граница у последнего div.ribbitWrapper   – граница уже существует у панели.

Ниже показано, как должна выглядеть страница теперь:

Buddies page preview


Public Ribbits Page (* cтраница с публичными ribbits)

На странице "Public Ribbits" будут перечислены последние ribbits профилей, которые не отмечены как приватные, так что пользователи могут просматривать ribbits тех, кого у них нет в из списке приятелей. Немного неожиданно, но нам нет необходимости в задании стилей тут, однако нужно добавить немного кода HTML. Единственное отличие этой страницы от предыдущей в том, что на этой отсутствует панель с информацией о пользователе, однако на ней будет другой контент в финальной версии приложения. Так что можете смело копировать код страницы для приятелей, однако удалите эту панель:

Также измените заголовок "Public Ribbits". Ниже показано превью этой страницы:


Public Profiles Page (* страница для публичных профилей)

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

Поиск профилей

В окне для поиска будет использоваться панель .right вместе с элементом <input/> внутри.

Список профилей

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

Эта страница должна выглядеть как показано ниже:


Компилирование CSS

Результатом обращения к вложенным элементам могут  быть громоздкие селекторы.

Результатом обращения к вложенным элементам могут  быть громоздкие селекторы. Имеется несколько доступных онлайн компиляторов:

Также имеются несколько автономных компиляторов:

  • Crunch!  (который является полноценным редактором для LESS)
  • WinLess (обладает возможностью автоматической компиляции при изменении файлов Less)
  • SimpLESS (имеется возможность минификации CSS)

Если ни один из этих компиляторов для вас не работают, то воспользуйтесь поиском Google; их множество! Также вы можете использовать lessc с сайта LESS, однако намного проще будет скомпилировать ваши файлы LESS при помощи других компиляторов. Конечно же, ничего страшного, если вы используете библиотеку less.js для динамического компилирования макета; новые браузеры кешируют получающийся в результате CSS.


Заключение

Как вы видите, LESS – мощный инструмент, который позволяет легче и быстрее создать стилевое оформление для макетов, чем при использовании простого CSS.

Однако, это только начало. Будьте готовы к реализации серверной части Ribbit на нескольких языках и платформах в последующей серии руководств!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.