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

() translation by (you can also view the original English article)

Це – перший посібник із серії посібників, створених персоналом Nettuts+, в якій описується проектування та створення веб-додатків з нуля – на декількох мовах. Ми будемо використовувати вигаданий двійник Twitter під назвою Ribbit у якості основи для цієї серії посібників.

У цьому посібнику нас необхідно зосередитися на UI (* user interface – користувальницький інтерфейс. Тут і надалі примітка перекладача). Ми будемо використовувати препроцесор LESS (* препроцесор CSS, що дозволяє використовувати змінні, функції, цикли та інші технології для полегшення роботи зі стилями) для максимально можливого полегшення роботи з CSS.

Вступ

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

Цей посібник поділено на п'ять частин, у яких роз'яснюється створення стильового оформлення різних сторінок макета Ribbit. Я буду звертатися до елементів HTML за допомогою селекторів CSS для полегшення розуміння. Проте перед роботою з макетом давайте коротко обговоримо наслідування.

Наслідування

У CSS при звертанні до вкладених елементів можуть виходити громіздкі селектори. Наприклад:


someId {
  /* ... */
}

someId div.someClass {
  /* ... */
}

someId div.someClass p.someOtherClass {
  /* ... */
}

someId div.someClass p.someOtherClass target {
  /* ... */
}

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

1
2	someId {
3	/* ... */
4	div.someClass {
5	/* ... */
6	p.someOtherClass {
7	/* ... */
8	target {
9	/* ... */
10	}
11	}
12	}
13	}

Змінні та міксини (* домішки; дозволяють визначити стилі, що можуть бути використані повторно у будь-якому місці документа)

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

1
2	@text-color: #3F3E3D;
3	@border-color: #D2D2D2;
4	@content-width: 860px;

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


.antialiased (@color) {
    color: @color;
    text-shadow: @color 0 0 1px;
}

Прийом тут полягає в тому, щоб створити тінь під текстом того ж кольору та радіусу розмиття в один піксель, завдяки чому браузер буде відображувати незначну тінь навколо тексту.

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

1
2	.gradient4f (@p1, @c1, @p2, @c2, @p3, @c3, @p4, @c4) {
3	background: @c1;
4	background: -moz-linear-gradient(top, @c1 @p1, @c2 @p2, @c3 @p3, @c4 @p4);
5	background: -webkit-gradient(linear, left top, left bottom, color-stop(@p1, @c1), color-stop(@p2, @c2), color-stop(@p3, @c3), color-stop(@p4, @c4));
6	background: -webkit-linear-gradient(top, @c1 @p1, @c2 @p2, @c3 @p3, @c4 @p4);
7	background: -o-linear-gradient(top, @c1 @p1, @c2 @p2, @c3 @p3, @c4 @p4);
8	background: -ms-linear-gradient(top, @c1 @p1, @c2 @p2, @c3 @p3, @c4 @p4);
9	background: linear-gradient(to bottom, @c1 @p1, @c2 @p2, @c3 @p3, @c4 @p4);
10	}

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

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

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


* {
    font-family: sans-serif;
    color: @text-color;
}

Тіло

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


body {
    background: white url(gfx/bg.png);
    margin: 0;
    padding: 0;
}

Поля для вводу

Також ми визначимо стиль за налаштуванням для всіх елементів <input/> на сторінці:


input {
    width: 236px;
    height: 38px;
    border: 1px solid @border-color;
    padding: 0 10px;
    outline: none;
    font-size: 17px;

    &:focus {
        background: #FFFDF2;
    }
}

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

1
2	&:focus {
3	background: #FFFDF2;
4	}

Завдяки цьому поля для вводу будуть мати жовтий фон при фокусуванні.

Кнопки для відправлення форми

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


input[type="submit"] {
    height: 36px;
    border: 1px solid #7BC574;
    border-radius: 2px;
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 0 20px;
    cursor: pointer;
    .gradient4f(0%, #8CD585, 23%, #82CD7A, 86%, #55AD4C, 100%, #4FA945);
}

Посилання

Для посилань необхідний колір, що відрізняється від кольору тексту. Також ми задаємо підкреслювання при наведенні на них курсору миші:


a {
    text-decoration: none;
    .antialiased(#58B84E);
    &:hover {
        text-decoration: underline;
    }
}

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

Ми почнемо з частини макету, що залишається незмінною для кожної сторінки. Ось код HTML, що я поясню нижче:


<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet/less" href="style.less">
    <script src="less.js"></script>
</head>
<body>
    <header>
        <div class="wrapper">
            <img src="gfx/logo.png">
            <span>Twitter Clone</span></p>

    </div>
  </header>
  <div id="content">
    <div class="wrapper">

    </div>
  </div>
  <footer>
    <div class="wrapper">
      Ribbit - A Twitter Clone Tutorial<img src="gfx/logo-nettuts.png">
    </div>
  </footer>
</body>
</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 (* розмір відступів буде автоматично розраховано браузером).


.wrapper {
    width: @content-width;
    margin: auto;
}

Висота самого header складає 85px, а ширина – на всю ширину сторінки.


header {
  background: url(gfx/bg-header.png);
  height: 85px;
  width: 100%;
}

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

1
2	div.wrapper {
3	padding: 11px 0;
4	}

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


header {
    background: url(gfx/bg-header.png);
    height: 85px;
    width: 100%;

    div.wrapper {
        padding: 11px 0;
    }

Зображення в обгортці повинні знаходитися на 10px нижче, щоб їх було гарно відцентровано:


img {
    position: relative;
    top: 10px;
    margin: 0 15px 0 0;
}

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


span {
    font-size: 18px;
    margin: 0 42px 0 0;
}

Нижче показано, як повинен виглядати наш дизайн на цей час:

Контент

На цей час ми небагато що можемо зробити з #content. МИ додамо невеликий margin знизу та мінімально можливу довжину; макет буде виглядати різко, якщо він має недостатню висоту:


#content {
  margin-bottom: 15px;
  min-height: 560px;
}

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

1
2	div.wrapper {
3	margin: 38px auto;
4	}

Footer (* підвал)

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


footer {
  background: url(gfx/bg-footer.png);
  height: 251px;
  font-size: 14px;
  clear: both;
}

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


div.wrapper {
    padding: 15px;

    img {
        float: right;
    }
}

Нижче наведено footer:

Домашня сторінка

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

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

Додайте цю форму для входу в div.wrapper header після елементу <span/>:


<form>
    <input type="text">
    <input type="password">
</form>

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


form {
    display: inline;

    input {
        margin: 0 0 0 14px;
    }
}

Форма для реєстрації

Нижче наведено код HTML для форми реєстрації:


<img src="gfx/frog.jpg">
<div class="panel right">
    <h1>New to Ribbit?</h1>
    <form>
        <input name="email" type="text">
        <input name="password" type="text">
        <input name="password2" type="password">
        <input type="submit" value="Create Account">
    </form>
</div>

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


img {
    border-radius: 6px;
    float: left;
}

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


div.panel {
    border: 1px solid @border-color;
    background: white;
    margin: 0;
    margin-bottom: 29px;
    border-radius: 6px;
    font-size: 14px;
}

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


&.right {
    width: 303px;
    height: 313px;
    float: right;
}

Також нам необхідно потурбуватися про заголовок та вміст панелі. Ми будемо використовувати елементи <h1/> для заголовку та елементи <p/> для вмісту. Зверніть увагу, що ви можете використовувати * (* груповий символ; використовується для представлення будь-якого символу або групи символів) усередині іншого елементу.


* {
    margin: 6px 0;
}
form {
    padding: 0 23px;
}
h1 {
    border-bottom: 1px solid @border-color;
    margin: 5px 0;
    font-weight: normal;
    font-size: 18px;
    padding: 13px 23px;
    height: 23px;
}
p {
    padding: 0 24px;
    margin: 18px 0;
}

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


div.panel {
    border: 1px solid @border-color;
    background: white;
    margin: 0;
    margin-bottom: 29px;
    border-radius: 6px;
    font-size: 14px;

    &.right {
        width: 303px;
        height: 313px;
        float: right;
    }
    
    * {
    margin: 6px 0;
  }
  h1 {
    border-bottom: 1px solid @border-color;
    margin: 5px 0;
    font-weight: normal;
    font-size: 18px;
    padding: 13px 23px;
    height: 23px;
  }
  p {
    padding: 0 24px;
    margin: 18px 0;
  }
}

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

Сторінка для приятелів

Сторінка для приятелів повинно бути показано після входу користувача до застосування. На ній буде показано список останніх "Ribbits» і трохи статистики про ваш акаунт. Знову-таки, починаємо з базового щаблону.Знову-таки, починаємо з базового шаблону. На цій сторінці, як і на інших, буде показано кнопку для виходу із застосунку замість форми для входу у заголовку:

1
2	<form>
3	<input type="submit" id="btnLogOut" value="Log Out">
4	</form>

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


#btnLogOut {
  float: right;
  margin: 14px 0 0 0;
}

Скільки селектор цього правила – ID елемента, то ви можете його розмістити як самостійно, так і усередині div.wrapper заголовка. Вибір за вами, проте пам'ятайте, що якщо ви вирішите розмістити його усередині іншого елементу, то скомпільований CSS буде мати більш довгий селектор (header div.wrapper #btnLogOut).

Вікно "Create a Ribbit"

Для початку додайте цей код для панелі у div.wrapper #content:


<div id="createRibbit" class="panel right">
    <h1>Create a Ribbit</h1>
    <p>
        <form>
            <textarea name="text" class="ribbitText"></textarea>
            <input type="submit" value="Ribbit!">
        </form>
    </p>
</div>

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


textarea.ribbitText {
    width: 249px;
    height: 160px;
    border: 1px solid @border-color;
}

Додайте цей код до визначення стилів для правої панелі.

Інформація для користувачів

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


<div id="ribbits" class="panel left">
    <h1>Your Ribbit Profile</h1>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user1.png">
        <span class="name">Frogger</span> @username
        <p>
            567 Ribbits<span class="spacing">45 Followers</span><span class="spacing">32 Following</span><br>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
</div>

Код може здатися громіздким, проте його структура виявляється дуже простою, якщо ви видалите вміст:


<div id="ribbits" class="panel left">
  <h1>Your Ribbit Profile</h1>
  <div class="ribbitWrapper">
    <img class="avatar" src="gfx/user1.png">
    <span class="name"> </span>
    <p>
       <span class="spacing"> </span><span class="spacing"> </span><br>
    </p>
  </div>
</div>

Як би там не було, у нас є ще одна панель; так що нам необхідно спочатку визначити стилі для неї:


&.left {
    width: @content-width - 327;
    float: left;
}

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

1
2	div.ribbitWrapper {
3	padding: 15px 0;
4	}

Усередині цього елементу міститься два елемента <span/> з різними значеннями кольору та розміру шрифту. Їх класи – .name и .time:


span {
    &.name {
        font-size: 18px;
        color: #58B84E;
    }

    &.time {
        font-size: 12px;
        color: #CCC;
    }
}

Також нам необхідно визначити положення автора біля лівої границі. Додайте наступний код:


img.avatar {
    margin: 0 19px 0 20px;
    float: left;
}

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


p {
    margin: 5px 50px 0 90px;
    padding: 0;
    text-align: justify;
    line-height: 1.5;
    .antialiased(@text-color);
}

У цьому параграфі є елементи <span/> з вертикальними лініями, що візуально їх розділяють. Цей ефект досягається за допомогою границі, поля та відступу.


span.spacing {
    padding-left: 9px;
    margin-left: 9px;
    height: 10px;
    border-left: 1px solid @border-color;
}

Ribbits приятелів

На цій панелі перелічуються останні ribbits людей, на яких користувач підписався. Додайте наступний код після панелі з інформацією про користувача.


<div class="panel left">
    <h1>Your Ribbit Buddies</h1>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user2.png">
        <span class="name">Kermit</span> @username <span class="time">15m</span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user1.png">
        <span class="name">Frogger</span> @username <span class="time">15m</span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user2.png">
        <span class="name">Kermit</span> @username <span class="time">15m</span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user3.png">
        <span class="name">Hypnotoad</span> @username <span class="time">15m</span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user2.png">
        <span class="name">Kermit</span> @username <span class="time">15m</span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user3.png">
        <span class="name">Hypnotoad</span> @username <span class="time">15m</span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
</div>

У ній є декілька прикладів ribbits, щоб подивитися на її вигляд. Ми додамо деякі границі для їх візуального розділення. Додайте цей код до div.ribbitWrapper:


border-bottom: 1px solid @border-color;
&:last-child {
    border: none;
}

У цьому правилі додається нижня границя та видаляється границя в останнього div.ribbitWrapper – границя вже існує у панелі.

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

Public Ribbits Page (* сторінка з публічними ribbits)

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


<div id="ribbits" class="panel left">
    <h1>Your Ribbit Profile</h1>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user1.png">
        <span class="name">Frogger</span> @username
        <p>
            567 Ribbits<span class="spacing">45 Followers</span><span class="spacing">32 Following</span><br>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
</div>

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

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

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

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

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


<div class="panel right">
    <h1>Search for profiles</h1>
    <p>
        <form>
            <input name="query" type="text">
            <input type="submit" value="Ribbit!">
        </form>
    </p>
</div>

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

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


<div id="ribbits" class="panel left">
    <h1>Public Profiles</h1>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user2.png">
        <span class="name">Kermit</span> @username <span class="time">625 followers <a href="#">follow</a></span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user1.png">
        <span class="name">Frogger</span> @username <span class="time">329 followers <a href="#">follow</a></span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user3.png">
        <span class="name">Hypnotoad</span> @username <span class="time">129 followers <a href="#">follow</a></span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
</div>

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

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

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

Як я згадував раніше, для етапу публічного доступу додатка ви можете скомпілювати ваш LESS до CSS (і я рекомендував вам це через кращу продуктивність). Існує декілька доступних онлайн компіляторів:

Також є декілька автономних компіляторів:

Crunch! (що є повноцінним редактором для LESS)
WinLess (надає можливість автоматичної компіляції при зміні файлів Less)
SimpLESS (є можливість мініфікації CSS)

Якщо жоден із цих компіляторів для вас не працює, то скористайтеся пошуком Google; їх безліч! Також ви можете використовувати lessc с сайту LESS, проте набагато простіше буде скомпілювати ваші файли LESS за допомогою інших компіляторів. Звісно ж, нічого страшного, якщо ви використовуєте бібліотеку less.js для динамічного компілювання макету; нові браузери кешують отриманий у результаті CSS.

Завершення

Як ви бачите, LESS – потужний інструмент, що дозволяє легше та швидше створювати стильове оформлення для макетів, ніж при використанні простого CSS.

Проте, це тільки початок. Будьте готові до реалізації серверної частини Ribbit на декількох мовах та платформах у наступній подальший посубнирків!