ossature
v0.1.2
Published
A strong ossature to start your next project.
Downloads
7
Readme
Ossature
A strong ossature to start your next project.
Installation
npm install ossature --save
Usage
With placeholders for clean HTML
@import "path/to/ossature";
.articles {
@extend %grid;
}
.article {
@extend %grid__item;
@extend %grid__item--12;
@extend %medium--grid__item--6;
@extend %large--grid__item--4;
}
With real classes
$ossature-use-classes: true;
@import "path/to/ossature";
//
<section class="grid articles">
<article class="grid__item grid__item--12 medium--grid__item--6 large--grid__item--4 article">
...
</article>
...
</section>
Custom breakpoints
$ossature-breakpoints: (
"until-pichu": (
"condition": "max-width",
"width": 567px,
),
"pichu": (
"condition": "min-width",
"width": 568px,
"generate": true
),
"until-pikachu": (
"condition": "max-width",
"width": 767px,
),
"pikachu": (
"condition": "min-width",
"width": 768px,
"generate": true
),
"until-raichu": (
"condition": "max-width",
"width": 1023px,
),
"raichu": (
"condition": "min-width",
"width": 1024px,
"generate": true
"centrable": true,
),
);
@import "path/to/ossature";
.articles {
@extend %grid;
}
.article {
@extend %grid__item;
@extend %grid__item--12;
@extend %pikachu--grid__item--6;
@extend %raichu--grid__item--4;
}
If you're using real classes, you can control which breakpoint should be generated:
$ossature-breakpoints: (
...
"until-pikachu": (
"condition": "max-width",
"width": 767px,
"generate": true
),
...
);
$ossature-use-classes: true;
@import "path/to/ossature";
Responsive layout
You can also use your breakpoints with the ossature-respond-to()
mixin just like so:
body {
background: gray;
@include ossature-respond-to(pikachu) {
background: yellow;
}
@include ossature-respond-to(raichu) {
background: orange;
}
}
Centering
Ossature provides a handy %center
placeholder (or a .center
class) to help you center elements starting at the breakpoint of your choice. Just define it as centrable
.
$ossature-breakpoints: (
...
'raichu': (
'condition': 'min-width',
'width': 1024px,
'centrable': true,
),
...
);
.content {
@extend %center;
}
Development
cd /path/to/ossature/folder
npm install
npm run watch