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

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.

Comments

[Gerasimos (Makis) Maropoulos]

Good job Axel and Vincent! I've starred your github repository! It looks clean and promising. Can I ask you to create a template with React + Axentix for the Iris Web Framework (github.com/kataras/iris)? As I am designing a CLI tool which will install "starter kits" for fullstack development and it will be great to have a mini and powerful frontend library example too.

BR,
Gerasimos Maropoulos. Author of the Iris Web Framework

[Axentix]

Thank you so much !

We are really interested about creating a template.
We're gonna contact you in private message for more informations.

[polemius]

Good job! What about IE? Is Axentix support IE?

[Axentix]

Thank you.

Axentix doesn't support IE. Since we decided to use CSS-Grid, which is a recent technology who partially support IE, we abandoned the idea to support it.

Have a great day.