Власна CSS-сітка для невеликих проектів

Наразі є такі варіанти для організації CSS-сітки сайту:
1. Завантажити та підключити Bootstrap (в даний час це версія 3.3.6)
Підключити необхідно буде такі файли.
bootstrap.min.css 118,4 Кб

bootstrap-theme.min.css 22,9 Кб

bootstrap.min.js 36 Кб

Разом: 177,3 Кб

 
2. Завантажити власний скомпільований Bootstrap, вибравши лише сітку (Bootstrap.grid) та вказавши необхідні налаштування

В цьому випадку розміри файлів будуть такими:

bootstrap-theme.min.css 23,8 Кб

bootstrap.min.css 12,4 Кб

Разом: 36,2 Кб

3. Придумати свою просту CSS-сітку, яку можна використовувати на не великих проектах.
Цим я і зайнявся.

Ідею позначення ширини стовпців я знайшов десь в Інтернет (наразі не можу знайти цей сайт). Потім я змінив цю ідею під власні задачі та власний стиль верстки. В результаті вийшов свій "велосипед", яким я і вирішив тут поділитися.

В основному при верстці адаптивних тем трапляється дві задачі:
1) поділити простір на стовпчики без проміжків
2) поділити простір на стовпчики з проміжками


Замість фіксованих від'ємних відступів рядків та відступів між стовпчиками (як це у Bootstrap) я використовую проценти.
Це відповідно класи .mpct--0, .mpct--half, .mpct--1 (margin percent x)
Рядок формується класом .row та класом, який задає від'ємні правий і лівий відступи .mpct--x

.row.mpct--0 {
  margin-left: 0;
  margin-right: 0;
}
.row.mpct--half {
  margin-left: -.5%;
  margin-right: -.5%;
}
.row.mpct--1 {
  margin-left: -1%;
  margin-right: -1%;
}

<div class="row mpct--half">

</div>

Стовпчики формуються класом .col, та класами які задають ширину стовпчика та відступи. Ширина стовпчиків формується класами, що починаються з символу w. Наприклад w1-3 значить, що ширина стовпчика буде 1/3 від ширини рядка. Таким чином я не прив'язуюсь до максимальної кількості стовпчиків як це у Bootstrap. 1/3 це те ж саме що 2/6 або 4/12. Але дані класи в css-файлі я не описував.
Ширина з приставками -t, -p діє тільки на планшетах і телефонах.

<div class="col w1-6 mpct--half w1-3-t w1-2-p">

</div>

Може показатися кількість класів надлишковим в коді html, але інколи необхідно саме щоб рядок мав від'ємні відступи (.mpct) для того щоб відповідати ширині іншого вмісту на сторінці, а стовпчики в цьому рядку не мали відступів між собою. Якщо необхідно різне відображення блоків на екранах, планшетах та мобільних - то і класів для задавання ширини буде також 3. В Bootstrap теж використовуються окремі класи для задавання ширини блока на кожному з типів пристроїв.

Класи .hide-t та .hide-p використовуються для приховування стовпчика на пристроях з відповідною шириною екрану.

Код Sass повністю представлений в наступному блоці.

/* Oleg Lyubchenko's CSS grid */
.row.mpct--0 {
  margin-left: 0;
  margin-right: 0;
}
.row.mpct--half {
  margin-left: -.5%;
  margin-right: -.5%;
}
.row.mpct--1 {
  margin-left: -1%;
  margin-right: -1%;
}
.col {
  float: left;
  @include box_sizing--border-box();
}
.col {
  &.w1-1 { width: 100%; float: none;}
  &.w11-12 { width: 91.6667%; }
  &.w7-8 { width: 87.5%; }
  &.w5-6 { width: 83.3333%; }
  &.w4-5 { width: 80%; }
  &.w3-4 { width: 75%; }
  &.w2-3 { width: 66.6667%; }
  &.w5-8 { width: 62.5%; }
  &.w3-5 { width: 60%; }
  &.w7-12 { width: 58.3333%; }
  &.w1-2 { width: 50%; }
  &.w5-12 { width: 41.6667%; }
  &.w2-5 { width: 40%; }
  &.w3-8 { width: 37.5%; }
  &.w1-3 { width: 33.3333%; }
  &.w1-4 { width: 25%; }
  &.w1-5 { width: 20%; }
  &.w1-6 { width: 16.6667%; }
  &.w1-8 { width: 12.5%; }
  &.w1-12 { width: 8.3333%; }
}

.col.mpct--half {
  padding: 0 .5%;
}
.col.mpct--1 {
  padding: 0 1%;
}


// t — tablets
@media (max-width: 768px) and (min-width: 480px) {
  .row.mpct--0-t { margin-left: 0; margin-right: 0;}
  .row.mpct--half-t { margin-left: -.5%; margin-right: -.5%;}
  .row.mpct--1-t { margin-left: -1%; margin-right: -1%; }
  .col {
    &.w0-t { display: none;}
    &.w1-1-t { width: 100%; float: none;}
    &.w7-8-t { width: 87.5%; }
    &.w5-6-t { width: 83.3333%; }
    &.w4-5-t { width: 80%; }
    &.w3-4-t { width: 75%; }
    &.w5-8-t { width: 62.5%; }
    &.w1-2-t { width: 50%; }
    &.w2-5-t { width: 40%; }
    &.w3-8-t { width: 37.5%; }
    &.w1-3-t { width: 33.3333%; }
    &.w1-4-t { width: 25%; }
    &.w1-6-t { width: 16.6667%; }
    &.w1-8-t { width: 12.5%; }
  }
  .col.mpct--0-t { padding: 0; }
  .col.mpct--half-t { padding: 0 .5%; }
  .col.mpct--1-t { padding: 0 1%; }
  .hide-t {display: none;}
}

// p — phones
@media (max-width: 480px) {
  .row.mpct--0-p { margin-left: 0; margin-right: 0;}
  .row.mpct--half-p { margin-left: -.5%; margin-right: -.5%;}
  .row.mpct--1-p { margin-left: -1%; margin-right: -1%; }
  .col {
    &.w0-p { display: none;}
    &.w1-1-p { width: 100%; float: none;}
    &.w5-6-p { width: 83.3333%; }
    &.w4-5-p { width: 80%; }
    &.w3-4-p { width: 75%; }
    &.w1-2-p { width: 50%; }
    &.w1-3-p { width: 33.3333%; }
    &.w1-6-p { width: 16.6667%; }
    &.w1-4-p { width: 25%; }
  }
  .col.mpct--0-p { padding: 0; }
  .col.mpct--half-p { padding: 0 .5%; }
  .col.mpct--1-p { padding: 0 1%; }
  .hide-p {display: none;}
}

Ось така сітка в пошуках балансу між розміром CSS-коду і HTML-коду.