@avalanche/object-grid
v4.0.0-alpha.17
Published
Fluid width, responsive grid system
Downloads
162
Readme
@avalanche/object-grid
Fluid width, responsive grid system.
- [Documentation](https://avalanche.oberlehner.net/documentation/#object: grid)
Install
npm install @avalanche/object-grid --save-dev
Basic usage
// Import the main file.
@import 'node_modules/@avalanche/object-grid/scss/index.scss';
Usage with node-sass-magic-importer
Using node-sass (or a plugin for Grunt, gulp or webpack which is using node-sass) in combination with the node-sass-magic-importer custom importer, can make importing CSS dependencies from node_modules
a much nicer experience.
// Import the main file.
@import '~@avalanche/object-grid';
// Import just the classes you need.
@import '{ .o-grid } from ~@avalanche/object-grid';
// Not a fan of the "o-" prefix?
@import '{ .o-grid as .grid, > .o-grid__item as > .grid__item } from ~@avalanche/object-grid';
Demo
Default gutter sizes
<div class="o-grid">
<div class="o-grid__item">
<div>Grid item 1</div>
</div>
<div class="o-grid__item">
<div>Grid item 2</div>
</div>
<div class="o-grid__item">
<div>Grid item 3</div>
</div>
<div class="o-grid__item">
<div>Grid item 4</div>
</div>
</div>
X-large gutter size
<div class="o-grid o-grid--xl">
<div class="o-grid__item">
<div>Grid item 1</div>
</div>
<div class="o-grid__item">
<div>Grid item 2</div>
</div>
<div class="o-grid__item">
<div>Grid item 3</div>
</div>
<div class="o-grid__item">
<div>Grid item 4</div>
</div>
</div>
Default horizontal gutter with x-large vertical gutter size
<div class="o-grid o-grid--xl-vertical">
<div class="o-grid__item">
<div>Grid item 1</div>
</div>
<div class="o-grid__item">
<div>Grid item 2</div>
</div>
<div class="o-grid__item">
<div>Grid item 3</div>
</div>
<div class="o-grid__item">
<div>Grid item 4</div>
</div>
</div>
Clear negative margin
To compensate for the vertical spacing of the grid items, the base grid block element (.o-grid
) uses a negative value for margin top. If the grid is the first element inside a wrapping element, this can lead to an odd behavior where the negative margin is carried over by the wrapping element. You need to clear the negative margin by adding a clearfix to the wrapping element. See the following CodePen for an example of the problem and how to solve it: http://codepen.io/maoberlehner/pen/BpJVGO.
Mixins
@import 'node_modules/@avalanche/object-grid/scss/mixins';
// Usage.
.grid {
@include o-grid();
}
.grid__item {
@include o-grid-item();
}
Settings
/// Default horizontal gutter.
/// @type String
$o-grid-gutter-horizontal-default: m !default;
/// Default vertical gutter.
/// @type String
$o-grid-gutter-vertical-default: m !default;
About
Author
Markus Oberlehner
Website: https://markus.oberlehner.net
Twitter: https://twitter.com/MaOberlehner
PayPal.me: https://paypal.me/maoberlehner
License
MIT