Introduction

Asterix is a lightweight, consistent and flexible sass framework.

💪 Rely on Asterix's functions and mixins to implement the design system you want.

⚡ Compose your screens with the powerful Asterix's layout system.

👆 Extend with css3 variable exposure, responsive specifiers and selector creation.

Asterix is a layout framework

When it comes to css, we believe there is two kind of style.

• The component style, being very specific to the app itself, as it creates a design system.

• The layout style, being very more generic as it generally enables a set of display/flex/grid properties to match UI/UX expectations.

We believe in developers, and we want them to code the way they want. That's why, as a css framework, Asterix does NOT provide component style. You'll not find any margins, paddings, colors or any specific rules already set.

On the other hand, you can rely on built-in mixins and functions to access variables, quickly build consistent mobile-first media queries, extend layouts in a glimpse and expose some vars as css3 variables.

// Your main scss file.
@import '@digivorefr/asterix-scss';
@include asterix();

// Load colors into css variables.
@include --set-css-variables((
  clr: --var(colors),
));

// Your custom code starts here.
footer{
    padding: 1rem;
    color: var(--clr-light);
    background: var(--clr-bg-dark);
    @include --mq(m){
        padding: 2rem;
    }
}

Asterix provides a pixel perfect layout system. You can use it as HTML custom attributes or by extending it on the scss side.

<!-- Build your layout directly into HTML -->
<div class="page" data-layout="--grid" data-cols="--m3--xl4" data-gap="--2">
    <aside>
        Leftside menu, always 1 column witdth.
    </aside>
    <main data-col="--m2--xl3">
        Main block, fullwith, then 2/3, then 3/4.
    </main>
    <footer data-col="--m3--xl4">
        Footer, always fullwidth
    </footer>
</div>

// Or extend layouts rules...
.page{
    @include extends((data-layout:--grid, data-cols:--m3--xl4, data-gap:--2));
    main{
        @include --extends((data-col: --m2 --xl3));
    }
    footer{
        @include --extends((data-col: --m3--xl4));
    }
}

Asterix can be locally scoped

Asterix can be initialized and updated in any scope. It prevents unwanted inheritance issues with other libraries and allows to surgically change elements.

Asterix is lightweight

Asterix uses a core logic which writes a very few css per selector. Its size is oftenly less than 10kb when minified.

Asterix is also a french comics hero and the first french satellite sent in space.