Lemonade - сітка на базі Sass

Lemonade - це проста, гнучка грід-система, яка легко налаштовується. Вона створена для того, щоб допомогти дизайнерам і розробникам з їх проектами. На даний момент підтримуються Chrome, Firefox, Safari, Opera & IE 9+, а також основні телефонні апарати.

Інсталювання

• Github; 
• Завантажити останню версію;
• Встановити з Bower: 

bower install lemonade

Починаємо

Після установки, Вам необхідно додати lemonade.min.css в свій HTML-файл:

<link rel="stylesheet" href="css/lemonade.min.css">

Також ви можете використовувати готовий HTML-файл, який присутній у v2.zip.

Основні способи використання

В даний час є два способи використання. Ви можете або використовувати готові 12 стовпців або створювати свої власні стовпці. Розглянемо як користуватись обома варіаціями.

Lemonade досить простий інструмент і розібратися в ньому доволі легко. Давайте створимо галерею із трьох стовпців:

<div class="frame"> 
    <div class="bit-3">
        <img src="http://placehold.it/500x500" />
    </div>
    <div class="bit-3">
        <img src="http://placehold.it/500x500" />
    </div>
    <div class="bit-3">
        <img src="http://placehold.it/500x500" />
    </div>
</div>

Готові стовпці

Розглянемо кожен рядок цього фрагмента. Ви можете бути в курсі того, що таке clearfix (або CSS хак), який видаляє плаваючі елементи і вирівнює їх правильно. Лимонад використовує clearfix, клас якого називається .frame. Щоб створити колонки, Ви завжди повинні мати .frame клас, обгорнутий навколо Вашої сітки колонок.

Наступний рядок - це .bit-3. Це стовпець з шириною 33,33%, що дозволяє вбудувати три стовпці. Завжди намагатися уникати додавання назв класу до стовпців сітки.

Створення стовпців

Створення стовпців - це дійсно просто, особливо, якщо у Вас є базові знання з Sass, але якщо ні, сподіваюсь, Ви дізнаєтесь та навчитесь користуватись цим препроцесором для CSS.

.bit-75 {
    width: $full - 25%;
}
.bit-25 {
    width: $full - 75%;
}

 $full - це Sass змінна, що означає 100%, тому, створюючи ці користувальницькі стовпці, ми беремо 100% і віднімаємо число.