Source

eggrid / example.less

@import 'grid'; // this imports the grid logic

.container{
  margin: 0px auto; // center the container
  width: @total_width; // variable provided by the grid config
  color: blue;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
}

.test_class{
  .grid(6); // the width of the element will be 6 grids wide
  .pre(5);  // as well as 5 grids of padding to the left
  .suf(5);  // and 5 grids of padding to the right
  // since this adds up to 16 total, it fills an entire row
  height: 50px;
  background: blue;
}
.test_nest_first{
  .grid_alpha(3); // our parent element is 6 wide, so this will take up half of it
    // special syntax is needed for the first nested child of any grid
  background: red;
  height: 50px;
}
.test_nest_last{
  .grid_omega(3); // we use the last 3 available grids here
    // special syntax is also needed for the LAST nested child of any grid
  background: red;
  height: 50px;
}
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.