andculturecode-scss-grid
v3.0.0
Published
Sass (scss) based grid system
Downloads
7
Readme
AndcultureCode.Scss.Grid
A Sass (scss) based grid library inspired by bourbon neat and flexbox.
Getting Started
#npm
npm install --save-dev andculturecode-scss-grid
# yarn
yarn add andculturecode-scss-grid --dev
@import andculturecode-scss-grid;
Usage
<div class="o-grid__container">
<div class="o-grid__row -space-above"></div>
<div class="o-grid__row -space-between"></div>
<div class="o-grid__row -border-bottom"></div>
<div class="o-grid__row">... More to come</div>
<div class="o-grid__row">
<div class="o-grid__col -span-one"></div>
<div class="o-grid__col -span-two"></div>
<div class="o-grid__col -span-twelve"></div>
</div>
<div class="o-grid__row">
<div class="o-grid__col -push-one"></div>
<div class="o-grid__col -push-eleven"></div>
</div>
<div class="o-grid__row">
<div class="o-grid__col -span-one -y-align-top"></div>
<div class="o-grid__col -span-one -y-align-center"></div>
<div class="o-grid__col -span-one -y-align-bottom"></div>
<div class="o-grid__col -span-one -justify-right"></div>
<div class="o-grid__col -span-one -justify-center"></div>
</div>
</div>
Add a Custom grid!
$my-custom-grid: (
columns: 12,
gutter: 20px
)
.c-row-of-stuff {
&__column {
@include span-col(8, $my-custom-grid);
}
}
Add your own breakpoints
$breakpoints: (
"phone": 480px,
"tablet": 768px,
"desktop": 1180px
)
.c-row-of-stuff {
&__column {
@include span-col(8, $my-custom-grid);
@include respond-to("phone") {
@include span-col(12, $my-custom-grid);
}
}
}
Development
npm install
npm run watch # automatically builds as changes are made
Documentation
Contributing
Information on contributing to this repo is in the Contributing Guide
Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!