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

Ukrainian (українська мова) 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 ми додамо наступні змінні, в яких буде зберігатися колірна палітра (* діапазон (набір) кольорів та відтінків, які може відобразити пристрій і може використовувати художник-дизайнер) та сімейство шрифту для нашого веб-сайту.

Ми розміщуємо ці змінні в одному місці, що не тільки відповідає посібнику зі стильового оформлення (* набір стандартів (правил) написання та форматування документів – для забезпечення одноманітністі їх вигляду. Подібний набір правил для конкретної організації визначає те, що часто називають корпоративним стилем (house style). Деякі посібники зі стилів (особливо у графічних платформах) приділяють особливу увагу графічному дизайну. Посібники зі стилів для веб-сторінок містять вказівки не тільки з текстових, але й з візуальних та технічних аспектів реалізації) але й підвищує зручність супроводу наших стилів. Наприклад якщо ми хочемо щось змінити на нашому веб-сайті, то можемо просто змінити значення цих змінних. Це надійніший спосіб, ніж за допомогою виконання «пошуку та заміни».

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

Базове стильове оформлення елементів

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

Ми можемо реалізувати це за допомогою міксина .box-sizing бібліотеки LESSHat наступним чином:

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

62.5% порівнюється з використовуваним браузерами страндартним значенням 1em, що відповідає 16px; таким чином, 62.5% від 16px дорівнює 10. Завдяки цьому нам легко буде впоратися з конвертацією rem у px шляхом перемноження значення у em на 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" та іконки з 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.