neat-class-generator
v1.0.0
Published
A generator for dynamically creating classes from Neat 2.0
Downloads
7
Maintainers
Readme
Neat class generator
Generates css classes from Neat grids.
Installation
NPM
npm install --save neat-class-generator
Bower
bower install neat-class-generator
Documentation
@include grid-generate-classes()
will generate classes for a grid map that is
passed in to it.
Classes will be generated using the class:
property of the grid map.
This property is required and will be appended to the generated classes for
that grid. As an example defining the property as class: my-grid
, this would
result in a class name of .my-grid-column-2-of-12
, etc. This property must be
defined prior to the grid-generate-classes
mixin being called.
example SCSS
@include grid-generate-classes($neat-grid);
example CSS
.grid-column-1-of-12 {
width: calc(8.33333% - 21.66667px);
float: left;
margin-left: 20px; }
.grid-column-2-of-12 {
width: calc(16.66667% - 23.33333px);
float: left;
margin-left: 20px; }
.grid-column-3-of-12 {
width: calc(25% - 25px);
float: left;
margin-left: 20px; }
// etc…
example SCSS
$custom-neat-grid: (
class: custom,
columns: 12,
gutter: 50px,
media: 1000px,
);
@include grid-generate-classes($custom-neat-grid);
example CSS
@media only screen and (min-width: 1000px) {
.custom-column-1-of-12 {
width: calc(8.33333% - 54.16667px);
float: left;
margin-left: 50px; }
.custom-column-2-of-12 {
width: calc(16.66667% - 58.33333px);
float: left;
margin-left: 50px; }
.custom-column-3-of-12 {
width: calc(25% - 62.5px);
float: left;
margin-left: 50px; }
// etc…
}
Generated classes
Neat class generator will create classes for each of Neat's mixin properties
in the order in which they are generated. Since grid-container
does not change
it is only generated once, under the name .grid-container
.
The following is a manifest of all generated classes, with {class}
standing in
for the grid map's class:
property and {column}
standing in
for the grid map's column:
property. If the grid contains a media:
property,
the generated classes will automatically be wrapped in the appropriate
media query.
.{class}-column-1-of-{column}
to.{class}-column-{column}-of-{column}
.{class}-push-neg-{column}-of-{column}
(negative) to.{class}-push-{column}-of-{column}
.{class}-shift-neg-{column}-of-{column}
(negative) to.{class}-shift-{column}-of-{column}
.{class}-visual
.{class}-collapse
.grid-container