amazeui/less/block-grid.less

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

// Name:            AVG Grid
//
// Description:     Used to make average columns with ul(ol)
//
// =============================================================================

// AVG Grid mixin
// http://lesscss.org/features/#loops-feature
.make-avg-grid(@point: sm, @counter: @grid-columns, @i: 1) when (@i =< @counter) {
  .@{ns}avg-@{point}-@{i} > li {
    width: (100% / @i);

    &:nth-of-type(n) {
      clear: none;
    }

    &:nth-of-type(@{i}n+1) {
      clear: both;
    }
  }

  .make-avg-grid(@point, @counter, (@i + 1));
}

/* ==========================================================================
   Component: AVG Grid
 ============================================================================ */

[class*="@{ns}avg-"] {
  display: block;
  padding: 0;
  margin: 0;
  list-style: none;
  .clearfix();

  > li {
    display: block;
    height: auto;
    float: left;
  }
}

@media @screen {
  .make-avg-grid(sm);
}

@media @medium-up {
  .make-avg-grid(md);
}

@media @large-up {
  .make-avg-grid(lg);
}