DEV Community: Axentix

The Axentix v2 will make you start using it.

Axentix — Wed, 02 Mar 2022 09:32:57 +0000

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 ! ⭐

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

Axentix : new framework version ! (toasts, dropdowns and more)

Axentix — Fri, 03 Jan 2020 16:42:47 +0000

Hello and happy new year everyone !

For those who don't know Axentix, it is a front end framework which was launched during the beginning of October 2019.

Axentix started the year with a new release (0.4.0).
I'm gonna show you the new main components of this release, and how they work.

Toasts

The toasts are a useful component to display notifications to the users of your website.
Our toast version allows you to custom a lot of things.
You can :

Choose here they are placed (on the left or the right of the screen)
Specify if they are going to the top or bottom of the screen, which changes their animation direction
Specify their place on mobile view
Change their animation and display duration

You can try them on the toast page, and see their animation by clicking on the test buttons.

These examples are showing you how to change the style and the content of your toast.

Dropdowns

Dropdows are made to create a simple submenu. This component is commonly used inside a navbar, but can be used anywhere in a website.

They are pretty easy to use. You have to create a .dropdown container, and put your .dropdown-trigger button inside of it, which is triggering the .dropdown-content.

<div class="dropdown" id="example-dropdown">
  <button type="button" class="btn primary dropdown-trigger">
    Toggle
  </button>
  <div class="dropdown-content white">
    <a class="dropdown-item" href="#">This is the first item</a>
    <a class="dropdown-item" href="#">Item 2</a>
    <a class="dropdown-item active" href="#">Item 3</a>
  </div>
</div>

You can initialize the dropdown like this :

var exampleDropdown = new Dropdown('#example-dropdown');

This is a way to initialize it, but you can use any of the three ways to initialize, as explained on the past article we have made.

Loadings

We have made different "preloaders", to show the users of your website something is loading.

You can use the progress bars and the spinners :

These two types of preloaders are working with our color palette, so you can choose any of these colors.

There is another loader which is really interesting. It is the "rainbow spinner". You can change his colors by using the source files.

Some other features like the pagination and helper classes have been made too.
You can find everything on the Website.

Have a great day, a happy new year again, and feel free to send us some feedback !

Axentix : New front-end framework based on CSS-Grid

Axentix — Fri, 20 Dec 2019 11:55:06 +0000

Our goal making Axentix 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 class needs a breakpoint and a number to show the number of columns you want on the specified screen width.

<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, xs 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 :

<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.
These breakpoints are really useful for some classes, like hide 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 col, row, pos or gutter classes make you able to create specific layouts, like the following one:

Colors

The framework has a large color palette, we will take the viride color for the next example.

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 :

You can use any of these colors on any component just by adding the color name as a class, and adding the dark-X or light-X 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 body will change your entire layout. Here are the 4 actual disponible layouts.
You can get these examples on the demo page.

Basic layout	Sidenav layout

Fixed sidenav layout	Under navbar layout

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 are disponible on the website, with all the explanations to know how to use them.

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.

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

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

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

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.

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, know that you can contact us for any help.