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

Створюємо двійник Twitter з нуля: Дизайн

by
Difficulty:BeginnerLength:LongLanguages:

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

Поля для вводу форми для входу

Додайте цю форму для входу в 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» і трохи статистики про ваш акаунт. Знову-таки, починаємо з базового щаблону.Знову-таки, починаємо з базового шаблону. На цій сторінці, як і на інших, буде показано кнопку для виходу із застосунку замість форми для входу у заголовку:

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

Скільки селектор цього правила – 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 (* сторінка з публічними ribbits)

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

Також змініть заголовок "Public Ribbits". Нижче наведено прев'ю цієї сторінки:


Public Profiles Page (* сторінка для публічних профілів)

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

Пошук профілів

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

Список профілів

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

Ця сторінка повинна виглядати як показано нижче:


Компілювання CSS

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

Як я згадував раніше, для етапу публічного доступу додатка ви можете скомпілювати ваш LESS до 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.