The Axentix v2 will make you start using it.

You might have heard about 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">`

There is 4 layouts available and more will come out in the future.

Here is the current available layouts list.

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 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.

You can create really complex grix using all the features. Everything is detailed on the grix documentation page.

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

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 :