ossature v0.1.2

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

License

WTFPL