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

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

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

• Github;

• Завантажити останню версію;

• Встановити з Bower:

  bower install lemonade

Починаємо

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

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

Також ви можете використовувати готовий 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% і віднімаємо число.