Less-neat

A semantic and fluid grid framework on top of LESS

View project on GitHub

Basic

.outer-container();
.span-columns(6);
.span-columns(6);

Multiple rows

.outer-container();
(1)
.span-columns(11);
.omega();
.span-columns(2);
.span-columns(10);
.omega();
.span-columns(3);
.span-columns(9);
.omega();
.span-columns(4);
.span-columns(8);
.omega();
.span-columns(5);
.span-columns(7);
.omega();
.span-columns(6);
.span-columns(6);

Nesting columns

.outer-container();
.span-columns(4);
.span-columns(8);
.span-columns(4, 8);
.span-columns(4, 8);

Table grid

.outer-container();
.fill-parent();
.row(table);
.span-columns(4, 12, table);
.pad();
.span-columns(8, 12, table);
.pad();

Shifting columns

.outer-container();
.span-columns(6);
.shift(3);

Automatic rows

.outer-container();
  • li.item {
      .span-columns(3);
      .omega(4n);
    }
  • li.item
  • li.item
  • li.item
  • li.item
  • li.item
  • li.item
  • li.item
  • li.item
  • li.item
  • li.item
  • li.item

Mixed layout

.outer-container();
  • li.item {
      .span-columns(3);
      .omega(3n);

      &:nth-child(4) {
        .shift(3);
      }
    }
  • li.item
  • li.item
  • li.item
  • li.item
  • li.item
  • li.item
  • li.item
  • li.item

Media Queries

.outer-container();
.span-columns(4);

@media (max-width: 500px) {
  .span-columns(6);
}
.span-columns(8);

@media (max-width: 500px) {
  .span-columns(6);
}

Copyright © 2015 Alexandr Marinenko. LESS-Neat is free software, and may be redistributed under the terms specified in the license.