> For the complete documentation index, see [llms.txt](https://digivore.gitbook.io/asterix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://digivore.gitbook.io/asterix/introduction.md).

# Introduction

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

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

:point\_up\_2: 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.

```scss
// 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.

```html
<!-- 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>
```

```scss
// 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.

{% hint style="info" %}
Asterix is also a french comics hero and the first french satellite sent in space.&#x20;
{% endhint %}