> 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 %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://digivore.gitbook.io/asterix/introduction.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.