@LEXX1304

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

Всем привет,

Появилась мысль создать нормальную адаптированную сетку для сайта (на 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%;}
}

А как вы верстаете?
  • Вопрос задан
  • 763 просмотра
Пригласить эксперта
Ответы на вопрос 3
Serj-One
@Serj-One
i'm sexy and i know it
Использую сетку Bootstrap, но классы бутстрапа присваиваю не в html, а в scss через extend, придерживаясь БЭМ. Изобретать велосипед смысла не вижу. Bootstrap-сетка на сегодняшний день лучшая.
.about{
  &__item{
    @extend .col-md-3;  
    @extend .col-sm-2;  
    @extend .col-xs-6;  
  }
}
Ответ написан
MrSteep
@MrSteep
ленивый
Ответ написан
Комментировать
@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
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы