Как вы строите адаптированый grid?

Question

[LEXX1304]

Всем привет,

Появилась мысль создать нормальную адаптированную сетку для сайта (на 12 колонок).
Сейчас использую библиотеки по нужде проекта (PureCSS, Bootstrap, Semantic, Foundation и т.д.). У каждого свои плюсы и минусы, речь не об этом.

Что требуется, почистить HTML (избавиться от всяких col/column/cols/и т.д.) на больших проектах изменения занимают много времени да и поддержка многих медиа требует дополнительных классов. К примеру у 4-го Bootstrap-а например (xs,sm,md,kg,xl) и это только 1200, есть ведь и резолюции повыше.

В принципе я вижу 2 крайности:

1. тот же принцип что и многие фреймворки сегодня, для каждого экрана свой класс - основная проблема засорение HTML
   
2. более консервативный подход, задавать каждому блоку определенный класс и в каждом экране задавать свои параметры - не знаю насколько правильный подход, на маленьком проекте может и подойдет, но вот на большом сомневаюсь
   

Первый вариант

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3">Icon 1<</div>
    <div class="col-xs-12 col-sm-6 col-md-3">Icon 2<</div>
    <div class="col-xs-12 col-sm-6 col-md-3">Icon 3<</div>
    <div class="col-xs-12 col-sm-6 col-md-3">Icon 4<</div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4">Gallery Image 1<</div>
    <div class="col-xs-12 col-sm-6 col-md-4">Gallery Image 2<</div>
    <div class="col-xs-12 col-sm-6 col-md-4">Gallery Image 3<</div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-md-6">Inner Link</div>
    <div class="col-xs-12 col-md-6">Inner Link</div>
  </div>
</div>

Второй вариант

<div class="container">
  <div class="row">
    <div class="icon">Icon 1<</div>
    <div class="icon">Icon 2<</div>
    <div class="icon">Icon 3<</div>
    <div class="icon">Icon 4<</div>
  </div>
  <div class="row">
    <div class="gallery">Gallery Image 1<</div>
    <div class="gallery">Gallery Image 2<</div>
    <div class="gallery">Gallery Image 3<</div>
  </div>
  <div class="row">
    <div class="link">Inner Link</div>
    <div class="link">Inner Link</div>
  </div>
</div>

@media (min-width: 768px) {
   icon{width:100%;}
   gallery{width:100%;}
   link{width:100%;}
}
@media (min-width: 992px) {
   icon{width:25%;}
   gallery{width:33%;}
   link{width:50%;}
}

А как вы верстаете?

Comments

[LEXX1304]

Ну я знаю что нет идеальных вариантов, но стремиться никто не запрещает. до susy руки не доходят.

Answer 1

[Serj-One]

Использую сетку Bootstrap, но классы бутстрапа присваиваю не в html, а в scss через extend, придерживаясь БЭМ. Изобретать велосипед смысла не вижу. Bootstrap-сетка на сегодняшний день лучшая.

.about{
  &__item{
    @extend .col-md-3;  
    @extend .col-sm-2;  
    @extend .col-xs-6;  
  }
}

Comments

[LEXX1304]

т.е. по принципу в каждой медиа описание класса?

[Serj-One]

LEXX1304: Нет, по принципу

.about{
  &__item{
    @extend .col-md-3;  
    @extend .col-sm-2;  
    @extend .col-xs-6;  
  }
}

[LEXX1304]

интересный подход, попробую, спасибо.

Answer 2

[Игорь Павленко]

Susy

Answer 3

[Oversec]

Я пользовался первым вариантом делая так: вначале отступы, потом экраны начиная с маленького, т.е.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3">Icon 1<</div>
    <div class="col-xs-12 col-sm-6  col-md-offset-1 col-md-2">Icon 2<</div>
    <div class="col-xs-12 col-sm-6  col-md-offset-1 col-md-2">Icon 3<</div>
    <div class="col-xs-12 col-sm-6  col-md-offset-1 col-md-2">Icon 4<</div>
  </div>
</div>

Но Serj-One в этом плане делает более правильно и не засоряет html (сам когда писал не маленький проект поплатился за использования сетки прямо в html). Так что почитайте как использовать bootstrap grid + sass(препроцессор css) и очистите ваш html!

На офф сайте в доках к альфе 4 версии bootstrap есть пример v4-alpha.getbootstrap.com/layout/grid

Comments

[LEXX1304]

Я с Bootstrap уже больше 2-х лет, знаю все нюансы, и поэтому ищу удобное решение. 4-я версия добавляет еще пару классов что усугубляет проблему. отсюда и появился вопрос.