barecss-power/less/_grid.less

A classless CSS framework (power) http://barecss.com

@import (reference) "config";


// config
@columns: 12;
@cell-pad: 1rem;


// set width
.width(@x) {
  width: 100% / @columns * @x;
}


// row
row, .row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  & & { margin: -@cell-pad; }
}


// cell (column)
cell, .cell {
  display: inline-block;
  padding: @cell-pad;
  vertical-align: top;
}


// large view
@media @view-dp {
  .d1  { .width(1); }
  .d2  { .width(2); }
  .d3  { .width(3); }
  .d4  { .width(4); }
  .d6  { .width(6); }
  .d8  { .width(8); }
  .d9  { .width(9); }
  .d10 { .width(10); }
  .d12 { .width(12); }
  .d0  { display: none; }
  .dx  { visibility: hidden; }
}
@media @view-bn { .d1, .d2, .d3, .d4, .d6, .d8, .d9, .d12 { width: 100%; } }


// small view
.c1  { .width(1); }
.c2  { .width(2); }
.c3  { .width(3); }
.c4  { .width(4); }
.c6  { .width(6); }
.c8  { .width(8); }
.c9  { .width(9); }
.c10 { .width(10); }
.c12 { .width(12); }
.c0  { display: none; }
.cx  { visibility: hidden; }
@media @view-cn { .c1, .c2, .c3, .c4, .c6, .c8, .c9, .c10, .c12 { width: 100%; } }


// smaller view
@media @view-bp {
  .b1  { .width(1); }
  .b2  { .width(2); }
  .b3  { .width(3); }
  .b4  { .width(4); }
  .b6  { .width(6); }
  .b8  { .width(8); }
  .b9  { .width(9); }
  .b10 { .width(10); }
  .b12 { .width(12); }
  .b0  { display: none; }
  .bx  { visibility: hidden; }
}
@media @view-bn { .b1, .b2, .b3, .b4, .b6, .b8, .b9, .d12 { width: 100%; } }