Простая сетка на CSS/Stylus/Less/Sass

30 апреля 2018

Написали простую сетку, так сказать для себя. Мы используем stylus, но ее можно подстроить под свой препроцессор или CSS с его глобальными переменными и момента полной поддержкой браузерами.

Код сетки:

/************Grid****************/
grid()
  display flex
  flex-flow row wrap
  margin -15px

grid_item(arguments)
  flex-basis "calc(%s - (15px * 2))" % arguments
  margin 15px

Далее можно использовать с стилях:

/************Project tags*********/
.row
  grid()
  
.row__element
  grid_item(25%)