Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Complete Websites
Webdesign

Добавляем стилевое оформление для нашего веб-сайта с  портфолио при помощи LESS

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Build Your Own Behance-Powered Portfolio.
How to Use the Behance API to Build a Custom Portfolio Web Page
Bringing Our Behance Portfolio Alive With CSS Animation

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

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

Инструменты, которые будем использовать

Для начала мы подготовим наш набор инструментов:

Normalize

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

Библиотеки примесей LESS

(* примеси, миксины – класс, методы которого добавляются, или подмешиваются, к другому классу (базовому классу), и при этом этот класс не должен быть родительским для базового). Также мы будем использовать LESS для добавления стилевого оформления для нашего веб-сайта. Какой бы препроцессор вы не предпочитали, очень рекомендуется использовать их в вашем трудовом процессе. Мне очень нравится вместо подбора цвета при помощи цветоподборщика из отдельного приложения просто использовать для этой цели функции вроде lighten() и darken().

Чтобы еще больше упросить нам жизнь, мы воспользуемся библиотекой миксинов LESSHat, за счет которой у нас сократится количество кода. Также мы воспользуемся Remixins, разработанной Christopher Ramírez. Remixins – коллекция миксинов для преобразования px в rem (* единица измерения, согласно которой значения свойств определяются относительно корневого элемента). В этой коллекции содержатся миксины для указания следующих значений свойств CSS: font-size, margin, padding, width, height, left, right, bottom и top.

Также нам будет необходим инструмент для компиляции кода LESS в обычный код CSS. В этом руководстве мы воспользуемся приложением под названием Koala, которое доступно для Windows, OSX и Ubuntu. Вы, конечно же, можете использовать компилятор, который вам больше нравится, однако я надеюсь, что вы сможете продолжить работу с этим руководством независимо от используемой платформы.

За детальной информацией о LESS обращайтесь к этим руководствам:

Google Fonts

Системные шрифты по умолчанию вроде Arial мне в наши дни просто не подходят. Так что в этом руководстве я буду использовать вместо них библиотеку шрифтов Google Fonts. Я выбрал Cantata One для контента заголовка и Open Sans в качестве шрифта по умолчанию для текста тела документа. Это личные предпочтения, вы запросто можете исключить Google Fonts или воспользоваться альтернативными шрифтами этой библиотеки.

Foundation Icon Fonts

Также мы воспользуемся шрифтовым набором иконок, чтобы немного приукрасить наш веб-сайт. Сегодня у нас имеется огромный выбор шрифтовых наборов иконок. Однако, после ознакомления с ними я был довольно удивлен, что только некоторые из них содержат иконку Behance в свое составе. Как бы там ни было, в этом руководстве мы воспользуемся Foundation Icon Fonts 3, поскольку в его составе имеется иконка Behance и этот набор доступен с CDN (* content distribution network – сеть доставки (распространения) контента).

Подготавливаем наши ресурсы и инструменты

В корневой папке нашего проекта создайте папки под названием less и css (которая будет папкой, куда будет поступать результат компиляции файла LESS). Создайте новый файл под названием style.less и поместите его вместе с Remixins и LESShat в папку less. На данном этапе список фалов и папок в папке нашего проекта должен выглядеть следующим образом:

Затем добавьте Normalize, Foundation Icon Fonts и Google Fonts внутри тега head, а также style.css, который будет результирующим файлом style.less.

Также откройте приложение Koala (или любое другое решение для выполнения компиляции) и добавьте в него папку нашего проекта.

Папка проекта в Koala

Добавляем иконки

Перед написанием каких-либо стилей давайте добавим несколько иконок на наш веб-сайт. Для начала мы добавим значок месторасположения на карте рядом с элементом для отображения месторасположения пользователя при помощи класса fi-marker. Добавьте этот класс рядом с классом profile-location следующим образом:

За счет этого будет добавлен псевдо-элемент :before к элементу div, благодаря чему будет добавлена иконка значка из нашего набора Foundation Icons. Далее мы добавим логотип Behance в Подвале при помощи класса fi-social-behance.

Подготавливаем примеси и переменные

Давайте откроем style.less и импортируем файлы lesshat.less и remixins.less при помощи опции (reference).

Эта опция была представлена в LESS 1.5. Это значит, что LESS будет только использовать импортированные таким образом стили, но не компилировать и не добавлять их в качестве результата в файл. Это очень полезная опция, благодаря которой минимизируется количество копий и ненужных стилей.

Внутри style.less мы добавим следующие переменные, в которых будет храниться цветовая палитра (* диапазон (набор) цветов и оттенков, которые может отобразить устройство и может использовать художник-дизайнер. Различают физическую (реальную) и логическую цветовые палитры) и семейство шрифта для нашего сайта.

Мы размещаем эти переменные в одном месте, что не только  соответствует руководству по стилевому оформлению, но и повышает удобство сопровождения наших стилей. Например если мы хотим что-то изменить на нашем веб-сайте, то можем просто изменить значения этих переменных. Это более надежный способ, чем при помощи выполнения «поиска и замены».

Начинам добавлять стилевое оформление

Базовое стилевое оформление элементов

Не смотря на то что мы подключили Normalize, благодаря чему было добавлено единообразие в стилевое оформление наших элементов, нам по-прежнему необходимо подкорректировать несколько стилей для соответствия нашим особенным потребностям. Для начала мы изменим значение свойства box-sizing (* используется для изменения алгоритма расчета ширины и высоты элемента), устанавливая в качестве него border-box ( * свойства width и height включают в себя значения полей и границ, но не отступов (margin)) для всех элементов (включая псевдо-элементы). Благодаря этому с размерами наших элементов будет намного легче работать.

Мы можем реализовать это при помощи миксина .box-sizing библиотеки LESSHat следующим образом:

Далее мы установим в качестве значения размера шрифта для html 62.5%, что является одним из способов облегчения работы с относительными единицами измерения.

62.5% соизмеряется с используемым в браузерах стандартным значением 1em, которое соответствует 16px; таким образом, 62.5% от 16px составляет 10. Благодаря этому нам легко будет справиться с конвертацией rem в px путем перемножения значения в rem на 10. Например 1.2rem будет равняться 12px и т.д.  Кроме этого, если мы взглянем на исходный код remixins.less, то увидим, что в качестве значения размера базового шрифта переменной @base-font-size-px установлено 10.

Вы можете обратиться к этим статьям за подробностями об относительных единицах измерения значений свойств CSS:

Мы используем элемент figure для размещения изображений с эскизом наших проектов. Однако элемент figure унаследовал значения отступов от Normalize, из-за чего появляется непредусмотренный пробел между изображениями проектов. Так что в коде ниже мы удаляем отступы у элемента figure.

Хак Clearfix

Использование хака clearfix – популярный способ решения некоторых проблем с разметкой, обусловленных плавающими элементами, для дочерних элементов которых не отменено обтекание другими элементами. Так что здесь мы добавим код the clearfix tip by Nicolas Gallagher (* совет по решению проблемы с установлением обтекания для элементов), который мы преобразовали в код LESS.

Если вы взгляните на структуру нашего кода HTML, то увидите, что мы добавили класс clearfix к некоторым элементам.

Добавляем стилевое для тела документа

Переходим к тегу body. Мы зададим стилевое оформление для шрифта, который будем использовать для текста остальной части страницы. Оно включает в себя следующие свойства: font-size, font-color, font-weight, font-family, background-color. Здесь мы воспользуемся миксином .font-size() библиотеки Remixins для получения значения размера шрифта. Все миксины библиотеки Remixins выражают сгенерированные значения и в px, что полезно для браузеров, которые не поддерживают способ выражения в rem.

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

Добавляем стилевое оформление для Заголовка

Далее мы добавим стилевое оформление для Заголовка веб-сайта следующим образом:

Тут довольно много кода, так что давайте рассмотри его по частям. Для начала мы задали фоновый цвет для Заголовка при помощи значения переменной @bg-header. Мы используем миксин .padding() из Remixins для добавления полей снизу и сверху Заголовка, благодаря чему у него появляется больше пространства по вертикали. Также мы добавили text-align:center, за счет чего наш контент выглядит более корректно.

Мы установили размер аватара пользователя при помощи миксина .size() и округлили, установив в качестве значения свойства border-radius 50%. Вы видите, что мы объявляем эти стилевые правила в селекторе .profile-avatar img.

Ниже рассматриваются правила для имени пользователя. Здесь мы устанавливаем размер шрифта при помощи миксина .font-size(). Мы используем переменную @color-name для установления значения цвета шрифта и задаем семейство шрифта при помощи @font-family. И, наконец, мы добавили font-weight: 400; для того чтобы шрифт для текста имени выглядел более отчетливо, чем остальной.

Далее мы рассмотрим стилевые правила для области со списком сфер творческой деятельности, для обращения к которым мы используем селектор .profile-fields. В Behance вы можете добавить столько умений, сколько захотите. Это значит, что у пользователей может быть как короткий, так и очень длинный перечень умений. Поэтому я решил установить значение ширины при помощи  миксина max-width. Мы установили в качестве значения цвета шрифта такое, которое на 50% светлее фона Заголовка, при помощи lighten(@bg-header, 50%).

Также каждый элемент списка с умениями отделен при помощи запятой, которую мы добавляем при помощи псевдо-элемента :after. Однако логично, что последний элемент не должен иметь запятой, так что мы выбираем его при помощи селектора :last-child и устанавливаем в качестве значения свойства content пустую строку ' '.

Далее идут стили для оформления месторасположения пользователя. Здесь мы делаем цвет шрифта немного светлее цвета фона, а именно на 30%. И мы также немного увеличили пробел между текстом и иконкой месторасположения из Foundation Icon Fonts при помощи добавления значения свойства margin-right для псевдо-элемента :before.

После добавления этих стилевых правил Заголовок должен выглядеть следующим образом:

Добавляем стилевое оформление для раздела с портфолио

В следующем фрагменте кода содержатся стилевые правила для оформления нашего портфолио.

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

Для начала мы задали в качестве значения ширины .portfolio-area 100%, однако установили в качестве ее максимума 960px. За счет этого ширина будет аккуратно подстраиваться под окна просмотра (* видимая для пользователя область веб-страницы) меньших размеров. Также вы видите, что мы установили в качестве значения ширины .portfolio-item 33,33333333333333%. Это так, поскольку мы будем отображать три проекта в каждом ряду. Это число получается в результате деления 100% на 3.

В качестве значения ширины .portfolio-cover установлено 100%, благодаря чему ширина этого элемента достигнет ширины родительского элемента. Для .portfolio-image в качестве значения свойства max-width задано значение 100%, за счет чего изображение не будет выходить за пределы родительского элемента в независимо от размера. Все эти настройки ширины помогут нам сделать наш веб-сайт отзывчивым.

Теперь раздел с портфолио должен выглядеть следующим образом:

Добавляем стилевое оформление для Подвала

Далее мы добавим стилевое оформление для Подвала. Подвал очень прост; он состоит всего лишь из текста "Powered by" и иконки Behance из Foundation Icon Fonts. Ниже представлены все стилевые правила для Подвала.

Как и в случае с разделом для портфолио мы задали в качестве значения ширины Подвала 100% и выровняли его по центру окна браузера при помощи margin: 0 auto;. Также мы выровняли весь контент этого задела по центру, чтобы он выглядел аккуратно. Затем мы скрываем текст внутри .power-logo при помощи the Kellum Method и отображаем только логотип Behance фирменным цветом – #1769ff (синий).

Обратите внимание: на Behance имеется целый раздел для разработчиков в Branding Guidelines, если вас это интересует.

Раздел Подвал теперь вполне завершен:

Делаем так, чтобы наш веб-сайт отвечал требованиям отзывчивого веб-дизайна

У нас имеется «резиновый» макет, а теперь мы седлаем нашу веб-страницу отзывчивой. К счастью, наш веб-сайт – сайт, состоящий только из одной  страницы с очень простым макетом. Так что для того чтобы сделать его отзывчивым не потребуется никакого большого количества кода. Для начала мы добавим (чрезвычайно важный) метатег viewport в теге head.

Далее мы добавим некоторые Медиа-запросы следующий образом:

Благодаря им в ряду будут отображаться два проекта в случае, если значение ширины окна просмотра находится в диапазоне 959px-768px, и один, если это значение составляет 767px и менее

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

В следующий раз ...

Разобравшись со стилевым оформлением для нашей страницы, все что нам осталось – добавить немного шика. В следующей и заключительной части этой серии мы реализуем возможность, за счет которой пользователи после нажатия по любому контрольном изображении (* свернутое (в пиктограмму) изображение (обеспечивающее доступ к полному изображению)) увидят версию большего размера, а также мы добавим некоторые анимации, реализуемые при помощи кода CSS, для улучшения удобства использования.

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.