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 :
- Neumorphism design extension
- VueJs integration / framework
- VSCode components snippets extension
- Laravel preset pages
And... something like a learning platform with Axentix courses might be created soon... who knows ? 😏
Feel free to star the project to support it ! ⭐
Top comments (0)