No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
test
README.md
index.js
package.json

README.md

autogrid

Automatic CSS grid generator

npm install autogrid
var fs = require('fs');
var autogrid = require('autogrid');
var css = autogrid({
  columns: 16,
  gutter: '20px',
  container: '960px'
});
fs.writeFileSync('grid.css', css);

Options

columns

default: 12 Number of columns used to generate the grid.

gutter

default: 32px Gutter width for columns.

container

default: 1024px Max width for the container style.

containerPadding

default: false Adds left and right padding to the container style.

row

default: true Creates a row style for containing columns.

customMedia

default: true Create CSS custom media declarations and uses them in @media rules. The result can be compiled to CSS3 with Cssnext, Postcss, or Rework.

customProperties

default: true Creates CSS custom properties (variables) and uses them as values. The result can be compiled to CSS3 with Cssnext, Postcss, or Rework.

breakpoints

default:

[
  {},
  { name: 'sm', value: '(min-width: 40em)' },
  { name: 'md', value: '(min-width: 52em)' },
  { name: 'lg', value: '(min-width: 64em)' }
],

method

default: float Determines the method (float, inline-block, or flexbox) to used for generating the grid. (Currently not implemented)

noCollapse

default: true Sets min-height 1px to prevent empty columns from collapsing.

mixedColumns

default: false Mixes float and gutter declarations into every column style. If set to false, each breakpoint with generate a column float class that can be used without setting width, and each column width class can be used independently of the grid system.

/* Mixed */
.col-1 {
  float: left;
  box-sizing: border-box;
  padding-left: 32px;
  padding-right: 32px;
  min-height: 1px
  width: 8.333333333333332%
}

/* Not Mixed */
.col {
  float: left;
  box-sizing: border-box;
  padding-left: 32px;
  padding-right: 32px;
  min-height: 1px
}
.col-1 {
  width: 8.333333333333332%
}

offset

default: false Creates column offset (margin-left) utilities.

prefix

default '' Prefixes each class, custom property, and custom media name with a given string.

containerName

default: container Class name for container style.

rowName

default: row Class name for row style.

columnName

default: BB-col-NN-MM Class name for columns and column modifiers, where BB is breakpoint.name, NN is column width number, and MM is modifier.

// Example
options.columnName: 'col-BB-MM-NN'
// Results in Bootstrap style naming convention
// e.g. .col-sm-6, .col-sm-offset-3

MIT License