Migration guide

Migration guide from v1 to v2

This page contains all informations about the breaking changes between the v1 and the v2.
Follow this guide to migrate your site based on v1.
All these changes have been made to get more consistency in the class naming, following this rule :
.{componentName}-{class}

JS init

The way to init Axentix components with the auto init & per component type methods have been changed.

Old way New way
new Axentix('all') new Axentix.Axentix('all')
let collapsible = new Axentix('collapsible') let collapsible = new Axentix.Axentix('collapsible')

Layouts

Layouts classes changed to more understandable classes and to reduce the code size.

Old classes New classes
.layout .with-sidenav .layout-sidenav
.layout .with-sidenav .fixed-sidenav .layout-sidenav-fixed
.layout .with-sidenav .fixed-sidenav .under-navbar .layout-under-navbar

Colors

Old classes New classes
.txt-{color} .text-{color}
.txt-dark-{value} .text-dark-{value}
.txt-light-{value} .text-light-{value}

Buttons

Old classes New classes
.small .btn-small
.large .btn-large
.press .btn-press
.circle .btn-circle
.outline .btn-outline
.outline-text .btn-outline-text
.outline-invert .btn-outline-invert
.outline-invert .btn-outline-invert
.opening .btn-opening

Card

The default word-break value has been removed.

Old classes New classes
.right-aligned .dropdown-right
.constrain-width .dropdown-constrain-width

The .footer-large and .footer-content classes have been removed.
To get a large footer, use the css variable --ax-footer-min-height or just add content inside of it.

Sidenav

The .sidenav-large and .sidenav-trigger classes have been removed.
To get a large sidenav, use the css variable --ax-sidenav-width.

Old classes New classes
.fixed .sidenav-fixed
Old option New option
overlayColor overlayClass

Loading

Old classes New classes
.spinner-txt .spinner-text
.spinner .small .spinner .spinner-small
.spinner .large .spinner .spinner-large
.spinner .rainbow .spinner .spinner-rainbow
.progress .small .progress .progress-small
.progress .large .progress .progress-large
.progress .rainbow .progress .progress-rainbow
.progress .indeterminate .progress .progress-indeterminate

The .modal-trigger class has been removed.

Old classes New classes
.falling .modal-falling
.bouncing .modal-bouncing
Old classes New classes
.centered .navbar-centered

Pagination

Old classes New classes
.small .pagination-small
.large .pagination-large

Tabs

Old classes New classes
.full-width .tab-full-width

Table

Old classes New classes
.table-responsive .table-responsive
.table-responsive-2 .table-responsive-2
.striped .table-striped
.bordered .table-bordered
.border-0 .table-no-border
.centered .table-centered

Forms

Old classes New classes
.inline .form-inline
.form-group-txt .form-group-item
.slider .form-slider
.slider .thin .form-slider .form-slider-thin
.slider .small .form-slider .form-slider-small
.form-slider .large .form-slider .form-slider-large

Utilities

Old class New class
.txt-left .text-left
.txt-center .text-center
.txt-right .text-right

Scss

Old function New function
txtColor() textColor()