The Axentix v2 will make you start using it.
Tags: javascript, webdev, css, productivity
Published: 2022-03-02 09:32:57

You might have heard about [Axentix](https://github.com/axentix/axentix) since the v1 release, but a lot of changes have been made since. So be aware that **reading this article** has a risk to make you **try it and stick with it** 😎.

First, this brand-new version is **centering the attention on the developer experience**. The main goal is to give **fully customizable components** & **utility-first classes**, leaving the **design choice** to the developer.

## Main features reminder  

### Layouts 

Axentix has been mainly used since 2019 because of the **one class** layout control. In fact, you can choose **your page layout** with the `body` class.

|  `<body class="layout">`   | `<body class="layout-under-navbar">` |
| :------------------------: | :----------------------------------: |
| ![Simple axentix layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2u7zurkwh7w4r8hh40e.png) | ![Sidenav axentix layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzoki1i2cyv69f37pfyp.png) |

There is **4 layouts available** and more will come out in the future.  
Here is the current [available layouts list](https://useaxentix.com/docs/general/layouts/).

### Grix - the grid system

The Axentix grid is based on **CSS Grid** making it the most advanced & developer friendly grid system.  
You might know about [breakpoints](https://useaxentix.com/docs/utilities/breakpoints/) allowing to create screen-width **responsive classes**.  

If you used another framework **grid system**, it could have been a real headache to get it working as intended.  
With the grix, just choose the **item amount per row and per breakpoints**, and here you go.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fn0fo4vxn2ha9htmnxsm.png)

You can create really complex grix using all the features. Everything is detailed on the [grix documentation page](https://useaxentix.com/docs/general/grix/).  

## The upgrade  

There are a plenty of cool main features to talk about like the **color palette** and the automatic accessible **color generation**, but the essential for today is the **v2 update** and it's improvements 🥳.

### Typescript refactor

One of the biggest part of this new version is the **complete TypeScript refactor**.  

This gives you a nice and updated **autocompletion** using our **JS components** and gives **more consistency** to the code itself.

### Advanced components

We completed the component list with the **community requests** :

- Waves (ripple effect)
- Custom form select component
- New material forms design variant
- Form validation
- Glassmorphism & claymorphism design trends

### Components styling

As said at the very beginning of this article, this new version is **centering the attention on the developer experience**.  
To achieve this, we added a `styling` part ✏ to all the components in the need of it.
This part adds a list of **css variables** available to **customize any component** specially for your website needs.

Here is an example of styling part : [Sidenav styling part](https://useaxentix.com/docs/components/sidenav/#styling)

## Axentix - The ecosystem  

We don't want **Axentix** to just be a framework. We want to create an **entire ecosystem** to make any developer able to **easily create any website/app** using Axentix.

That's why we created the following :

- Neumorphism design extension
- VueJs integration / framework
- VSCode components snippets extension
- Laravel preset pages


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3wax10gt8ihip6u1zn3.png)

And... something like a learning platform with Axentix courses might be created soon... who knows ? 😏

Feel free to **star the project** to support it ! ⭐

https://github.com/axentix/axentix
https://useaxentix.com/