Axentix : New front-end framework based on CSS-Grid
Tags: framework, axentix, css, javascript
Published: 2019-12-20 11:55:06


Our goal making [Axentix](https://useaxentix.com/) is to create the most easy to use and learn framework possible, by using the lightest markup possible.

One of the main features is the grid system called **grix** making reference to the framework name.

In this article, we are gonna get a look on some features/components, to make a preview of the framework possibilities.

## Grix

As you can see, the layout control is easy with only some classes. 

To create it, simply add some elements into a div with a class named "grix". 
This [grix](https://useaxentix.com/docs/general/grix) class needs a **breakpoint** and a number to show the number of columns you want on the specified screen width.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/7vggrxfzfbukyweqyqyt.PNG)
```html
<div class="grix xs4">
  <div>box 1</div>
  <div>box 2</div>
  <div>box 3</div>
  <div>box 4</div>
  <div>box 5</div>
</div>
```
*Here, <code>xs</code> means : "on the extra small screens"*.

Here is an example of the reaction of the grix on different screens width, so you can understand more :

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/e3n8rplwrtfms7fker74.png)
```html
<div class="grix xs1 md2 lg3">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
```
As you can see, the layout control is really predictible between the different screen sizes using the [breakpoints](https://useaxentix.com/docs/general/grix#responsive-breakpoints).
These breakpoints are really useful for some classes, like [hide](https://useaxentix.com/docs/utilities/others#hide-elements) who can help you to show or not some elements depending on the screen size.

There is a lot of possibilities using others classes. The <code>col</code>, <code>row</code>, <code>pos</code> or <code>gutter</code> classes make you able to create specific layouts, like the following one:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/k6ab5loqpejfovc5fv34.PNG)

## Colors
The framework has a large [color palette](https://useaxentix.com/docs/general/colors), we will take the **viride** color for the next example.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ymkbhm4fskzgej3q2zml.PNG)

As you can see, every color is generated with 4 lighten and 5 darken variants.
All these variants are created dynamically with a scss function.

This way you add your own colors, who will automatically get their lighten and darken variants. You just have to get our sources files, and put your own colors inside the colors list :

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/k73nd1uunqtaupj5rg82.PNG)

You can use any of these colors on any component just by adding the color name as a class, and adding the <code>dark-X</code> or <code>light-X</code> variant as a class if you want to.
The text color will automatically change to white or black, **trying to respect the accessibility the more possible**, but you can change it at any time using the text color classes inside our color palette.

## Layout

The layout feature is really interesting. 
Adding simple classes inside your <code>body</code> will change your entire layout. Here are the 4 actual disponible layouts. 
You can get these examples on [the demo page](https://useaxentix.com/docs/general/layouts/example).

| Basic layout | Sidenav layout |
|:---------:|:-----:|
| ![Layout 1](https://thepracticaldev.s3.amazonaws.com/i/hsjxoshsniqkqoz9nmqw.PNG)| ![Layout 2](https://thepracticaldev.s3.amazonaws.com/i/womhhk78xspzolock6ha.png)|

|Fixed sidenav layout| Under navbar layout |
|:-----------:|:-------:|
|![Layout 3](https://thepracticaldev.s3.amazonaws.com/i/ukrj8ojsp3u7ec31f33r.PNG)| ![Layout 4](https://thepracticaldev.s3.amazonaws.com/i/g0jad1nxtwrjunqu2qkg.PNG)|


All these layouts are really useful to quickly create a page layout and concentrate yourself on the specific content you're writing.

## Material forms

The material design being loved, and wanted by a lot of developers, we made some nice-loocking inputs to create material design forms. This helps a lot to create a modern website.
The [materials forms](https://useaxentix.com/docs/forms/material) are disponible on the website, with all the explanations to know how to use them.

  ![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/acfy12hk2vlgftxi8k09.PNG)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/sbibbrj8ju2yvhfuuvuw.PNG)

As you can see, the label goes up when you are interacting with it.
A transition has been made on the line under the input, to see it, get a look on the [docs page](https://useaxentix.com/docs/forms/material). 

## JavaScript Init

Any component using JavaScript has to be initialized before using it. You can initialize them with three methods :

1) By initializing the elements one by one

```js
var sidenav = new Sidenav('#example-sidenav');
```
*This way, you have to declare all your sidenav instances.*

2) By initializing all the elements by initializing only the component type

```js
var axentixSidenav = new Axentix('sidenav');
```
*This way, all your components of this type (here sidenav) are initialized, using the specified parameters.*

3) By initializing all the differents components in one line

```js
var axentix = new Axentix('all');
```
*This way, all your components are automatically initialized, but you can't change their parameters.*

As you can see, we let you the choice to initialize your components the way you want. The specific ways are useful if you want different options, like changing the transition duration, or anything else to make your website looking the way you prefer.

All these methods are explained on [the JavaScript initialization page](https://useaxentix.com/docs/general/js-init).

We already recieved some good feedbacks and would love to get more. This way, we can improve our work and work on some good ideas we recieve from you !
Since the first released was made during the beginning of October, we know there is still components to add. We are working on the next components, and try to make new releases the most frequently possible to make the framework the most good as we can !
If you want to try [Axentix](https://useaxentix.com/), know that you can contact us for any help.