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
|
.opening
|
.btn-opening
|
Card
The default word-break value has been removed.
Dropdown
| Old classes | New classes |
|---|---|
.right-aligned
|
.dropdown-right
|
.constrain-width
|
.dropdown-constrain-width
|
Footer
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
|
Lightbox
| 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
|
Modal
The .modal-trigger class has been removed.
| Old classes | New classes |
|---|---|
.falling
|
.modal-falling
|
.bouncing
|
.modal-bouncing
|
Navbar
| 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 |
|---|---|
.responsive-table
|
.table-responsive
|
.responsive-table-2
|
.table-responsive-2
|
.hover
|
.table-hover
|
.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
|
.slider .large
|
.form-slider .form-slider-large
|
Utilities
| Old class | New class |
|---|---|
.txt-left
|
.text-left
|
.txt-center
|
.text-center
|
.txt-right
|
.text-right
|
Javascript methods
| Old method | New method |
|---|---|
Axentix.updateInputs()
|
Axentix.Forms.updateInputs()
|
Scss
| Old function | New function |
|---|---|
txtColor()
|
textColor()
|