Aione Cheat Sheet
The Aioneframework classes list helps you find documentation for particular CSS styles, components, and grids. Use the sortable table below.
| Class | Category | Example | Tags |
|---|---|---|---|
| mh-0 to mh-100 | spacing | mh-10 | margin-horizontal |
| mv-0 to mv-100 | spacing | mv-10 | margin-vertical |
| mt-0 to mt-100 | spacing | mt-10 | margin-top |
| mr-0 to mr-100 | spacing | mr-10 | margin-right |
| ml-0 to ml-100 | spacing | ml-10 | margin-left |
| m-0p to m-100p | spacing | m-10p | margin with percentage |
| mb-0 to mb-100 | spacing | mb-10 | margin-bottom |
| mt-0p to mt-100p | spacing | mt-10p | margin-top with percentage |
| mr-0p to mr-100p | spacing | mr-10p | margin-right with percentage |
| mb-0p to mb-100p | spacing | mb-10p | margin-bottom with percentage |
| ml-0p to ml-100p | spacing | ml-10p | margin-left with percentage |
| m-m-0 to m-m-100 | spacing | m-m-10 | margin on medium screen |
| m-mh-0 to m-mh-100 | spacing | m-mh-10 | margin-horizontal on medium screen |
| m-mv-0 to m-mv-100 | spacing | m-mv-10 | margin-vertical on medium screen |
| m-mt-0 to m-mt-100 | spacing | m-mt-10 | margin-top on medium screen |
| m-mr-0 to m-mr-100 | spacing | m-mr-10 | margin-right on medium screen |
| m-mb-0 to m-mb-100 | spacing | m-mb-10 | margin-bottom on medium screen |
| m-ml-0 to m-ml-100 | spacing | m-ml-10 | margin-left on medium screen |
| l-m-0 to l-m-100 | spacing | l-m-10 | margin on large screen |
| l-mh-0 to l-mh-100 | spacing | l-mh-10 | margin-horizontal on large screen |
| l-mv-0 to l-mv-100 | spacing | l-mv-10 | margin-vertical on large screen |
| l-mt-0 to l-mt-100 | spacing | l-mt-10 | margin-top on large screen |
| l-mr-0 to l-mr-100 | spacing | l-mr-10 | margin-right on large screen |
| l-mb-0 to l-mb-100 | spacing | l-mb-10 | margin-bottom on large screen |
| l-ml-0 to l-ml-100 | spacing | l-ml-10 | margin-left on large screen |
| m-m-0p to m-m-100p | spacing | m-m-10p | margin with percentage on medium screen |
| m-mh-0p to m-mh-100p | spacing | m-mh-10p | margin-horizontal with percentage on medium screen |
| m-mv-0p to m-mv-100p | spacing | m-mv-10p | margin-vertical with percentage on medium screen |
| m-mt-0p to m-mt-100p | spacing | m-mt-10p | margin-top with percentage on medium screen |
| m-mr-0p to m-mr-100p | spacing | m-mr-10p | margin-right with percentage on medium screen |
| m-mb-0p to m-mb-100p | spacing | m-mb-10p | margin-bottom with percentage on medium screen |
| m-ml-0p to m-ml-100p | spacing | m-ml-10p | margin-left with percentage on medium screen |
| l-m-0p to l-m-100p | spacing | l-m-10p | margin with percentage on large screen |
| l-mh-0p to l-mh-100p | spacing | l-mh-10p | margin-horizontal with percentage on large screen |
| l-mv-0p to l-mv-100p | spacing | l-mv-10p | margin-vertical with percentage on large screen |
| l-mt-0p to l-mt-100p | spacing | l-mt-10p | margin-top with percentage on large screen |
| l-mr-0p to l-mr-100p | spacing | l-mr-10p | margin-right with percentage on large screen |
| l-mb-0p to l-mb-100p | spacing | l-mb-10p | margin-bottom with percentage on large screen |
| l-ml-0p to l-ml-100p | spacing | l-ml-10p | margin-left with percentage on large screen |
| red lighten-2 | Text color | red lighten-1 | color |
| pink lighten-2 | Text color | pink lighten-2 | color |
| purple accent-1 | Text color | purple accent-1 | color |
| bg-grey bg-lighten-5 | Background color | bg-grey bg-lighten-5 | Background color |
| bg-yellow bg-accent-2 | Background color | bg-yellow bg-accent-2 | Background color |
| bg-orange bg-lighten-5 | Background color | bg-orange bg-lighten-5 | Background color |
| bg-gradient | Background gradient | bg-gradient | Background gradient |
| bg-gradient.gradient-2 | Background gradient | bg-gradient.gradient-2 | Background gradient |
| border-red border-lighten-5 | Border color | border-red border-lighten-5 | Border color |
| border-brown border-lighten-3 | Border color | border-brown border-lighten-3 | Border color |
| border-black | Border color | border-black | Border color |
| flash | Animation Effect | animate flash | Animation |
| pulse | Animation Effect | animate pulse | Animation |
| shake | Animation Effect | animate shake | Animation |
| animateXMark | Animation Effect | animateXMark | Animation |
| pulseWarning | Animation Effect | pulseWarning | Animation |
| aione-nav horizontal | Navigation | aione-nav horizontal | Horizontal navigation |
| aione-menu | Navigation | aione-menu | Horizontal navigation |
| aione-nav-item level0 | Navigation | aione-nav-item level0 | Horizontal navigation |
| nav-item-text | Navigation | nav-item-text | Horizontal navigation |
| slide-left | Navigation Effect | slide-left | Horizontal navigation |
| slide-right | Navigation Effect | slide-right | Horizontal navigation |
| slide-up | Navigation Effect | slide-up | Horizontal navigation |
| slide-down | Navigation Effect | slide-down | Horizontal navigation |
| rotate-left | Navigation Effect | rotate-left | Horizontal navigation |
| rotate-right | Navigation Effect | rotate-right | Horizontal navigation |
| underline-top | Navigation Effect | underline-top | Horizontal navigation |
| underline-bottom | Navigation Effect | underline-bottom | Horizontal navigation |
| underline-left | Navigation Effect | underline-left | Horizontal navigation |
| underline-right | Navigation Effect | underline-right | Horizontal navigation |
| aione-nav vertical | Navigation | aione-nav vertical | Vertical Navigation |
| aione-menu | Navigation | aione-menu | Vertical Navigation |
| aione-nav-item level0 | Navigation | aione-nav-item level0 | Vertical Navigation |
| nav-item-text | Navigation | nav-item-text | Vertical Navigation |
| aione-breadcrumbs aione-navigation | Breadcrumb | aione-breadcrumbs aione-navigation | Breadcrumb |
| aione-collapsible | Collapsible | aione-collapsible | collapsible |
| aione-item | collapsible | aione-item | collapsible |
| aione-item-header | collapsible | aione-item-header | collapsible |
| aione-item-content | collapsible | aione-item-content | collapsible |
| aione-accordion | collapsible | aione-acordion | collapsible |
| aione-border | border | aione-border | border |
| aione-border-bottom | border | aione-border-bottom | border |
| aione-border-top | border | aione-border-top | border |
| aione-border-right | border | aione-border-right | border |
| aione-border-left | border | aione-border-left | border |
| aione-border-none | border | aione-border-none | border |
| aione-border-top-none | border | aione-border-top-none | border |
| aione-border-right-none | border | aione-border-right-none | border |
| aione-border-bottom-none | border | aione-border-bottom-none | border |
| aione-border-left-none | border | aione-border-left-none | border |
| border-style-solid | border | border-style-solid | border |
| border-style-dotted | border | border-style-dotted | border |
| border-style-none | border | border-style-none | border |
| border-style-hidden | border | border-style-hidden | border |
| border-style-dashed | border | border-style-dashed | border |
| border-style-double | border | border-style-double | border |
| border-style-groove | border | border-style-groove | border |
| border-style-ridge | border | border-style-ridge | border |
| border-style-outset | border | border-style-outset | border |
| border-style-inset | border | border-style-inset | border |
| border-style-initial | border | border-style-initial | border |
| border-style-inherit | border | border-style-inherit | border |
| border-width-0 to border-width-100 | border | border-width-10 | border |
| aione-rounded | Border Radius | aione-rounded | Border Radius |
| aione-circle | Border Radius | aione-circle | Border Radius |
| aione-button | buttons-groups | aione-button | buttons-groups |
| aione-button small | buttons-groups | aione-button small | buttons-groups |
| aione-button medium rounded | buttons-groups | aione-button medium rounded | buttons-groups |
| aione-button large rounded | buttons-groups | aione-button large rounded | buttons-groups |
| aione-button fullwidth | buttons-groups | aione-button fullwidth | buttons-groups |
| aione-message | Messages | aione-messages | Messages |
| success | Message alert | success | Message alert |
| warning | Message alert | warning | Message alert |
| error | Message alert | error | Message alert |
| aione-form-wrapper | Form | aione-form-wrapper | Form |
| aione-form-content | Form | aione-form-content | Form |
| aione-form-section non-repeater | Form | aione-form-section non-repeater | Form |
| aione-form-border | Form | aione-form-border | Form |
| aione-form-header | Form | aione-form-header | Form |
| aione-form-title | Form | aione-form-title | Form |
| aione-form-description | Form | aione-form-description | Form |
| aione-form-section-title | Form | aione-form-section-title | Form |
| aione-form-section-header | Form | aione-form-section-header | Form |
| aione-form-section-description | Form | aione-form-section-description | Form |
| field-wrapper | Form | field-wrapper | form-field |
| field-wrapper-text_field | Form | field-wrapper-text_field | form-field |
| field-wrapper-type-text | Form | field-wrapper-type-text | form-field |
| field-label | Form | field-label | form-field |
| field-title | Form | field-title | form-field |
| field field-type-text | Form | field field-type-text | form-field |
| field-wrapper | Form | field-wrapper | form-field |
| field-wrapper-type-checkbox | Form | field-wrapper-type-checkbox | form-field |
| field-option | Form | field-option | form-field |
| field field-type-radio | Form | field field-type-radio | form-field |
| field-type-switch | Form | field-type-switch | form-field |
| field-description | Form | field-description | form-field |
| aione-field-error | Form | aione-field-error | form-field |
| aione-shadow | shadow | aione-shadow | Shadow |
| shadow-small | Shadow | shadow-small | Shadow |
| shadow-large | Shadow | shadow-large | Shadow |
| aione-align-center | Typography | aione-align-center | Typography |
| aione-align-left | Typography | aione-align-left | Typography |
| aione-align-right | Typography | aione-align-right | Typography |
| aione-align-justify | Typography | aione-align-justify | Typography |
| aione-float-left | Typography | aione-float-left | Typography |
| aione-float-right | Typography | aione-float-right | Typography |
| aione-tooltip | Typography | aione-tooltip | Typography |
| flow-text | Typography | flow-text | Typography |
| font-size-1 to font-size-100 | Typography | font-size-1 to font-size-100 | Typography |
| font-size-110,120,130,140,150, | Typography | font-size-110,120,130,140,150, | Typography |
| font-size-160,170,180,190,200, | Typography | font-size-160,170,180,190,200, | Typography |
| font-weight-100 to font-weight-900 | Typography | font-weight-100 to font-weight-900 | Typography |
| line-height-1 to line-height-100 | Typography | line-height-1 to line-height-100 | Typography |
| thin | Typography | thin | Typography |
| gallery | Gallery | gallery | Gallery |
| gallery-item | Gallery | gallery-item | Gallery |
| gallery-icon | Gallery | gallery-icon | Gallery |
| gallery-caption | Gallery | gallery-caption | Gallery |
| gallery-columns-2 | gallery-columns-2,gallery-columns-3,gallery-columns-4,gallery-columns-5 | gallery gallery-columns-4 | Gallery |
| margin | Gallery | gallery gallery-columns-4 margin | Gallery |
| outline | Gallery | gallery gallery-columns-3 outline | Gallery |
| circle | Gallery | gallery gallery-columns-4 circle | Gallery |
| animation-zoom | animation-zoom,animation-rotate,animation-zoomrotate,animation-mxrotate | gallery gallery-columns-4 margin animation-zoom | Gallery |
| transition-fade-top | transition-fade-top,transition-fade-bottom,transition-fade-left,transition-fade-right | gallery gallery-columns-2 margin transition-fade-top | Gallery |
| transition-mxrotate-top | transition-mxrotate-top,transition-mxrotate-bottom,transition-mxrotate-left,transition-mxrotate-right | gallery gallery-columns-2 outline transition-mxrotate-top | Gallery |
| transition-slide-top | transition-slide-top,transition-slide-bottom,transition-slide-left,transition-slide-right | gallery gallery-columns-4 margin transition-slide-bottom | Gallery |
| transition-push-top | transition-push-top,transition-push-bottom,transition-push-left,transition-push-right | gallery gallery-columns-4 margin transition-push-top | Gallery |
| transition-flip-top | transition-flip-top,transition-flip-bottom,transition-flip-left,transition-flip-right | gallery gallery-columns-4 margin transition-flip-top | Gallery |
| transition-rotateslide-top | transition-rotateslide-top,transition-rotateslide-bottom,transition-rotateslide-left,transition-rotateslide-right | gallery gallery-columns-5 outline transition-rotateslide-top | Gallery |
| transition-flip-top | transition-flip-top,transition-flip-bottom,transition-flip-left,transition-flip-right | gallery gallery-columns-4 margin transition-flip-top | Gallery |
| transition-minimize-top | transition-minimize-top,transition-minimize-bottom,transition-minimize-left,transition-minimize-right | gallery gallery-columns-4 outline transition-minimize-top | Gallery |
| aione-header | Header | aione-header | Header |
| aione-body | Body | aione-body | Body |
| aione-content | Content | aione-content | Content |
| aione-footer | Footer | aione-footer | Footer |
| aione-tabs | Tabs | aione-tabs horizontal | Tabs |
| horizontal | Tabs | aione-tabs horizontal align-center | Tabs |
| vertical | Tabs | aione-tabs vertical align-left | Tabs |
| align-left | align-left,align-center,align-right | aione-tabs horizontal align-left theme-clean | Tabs |
| theme-bold | theme-bold,theme-clean,theme-pastel,theme-pointer | aione-tabs horizontal theme-pastel margin | Tabs |
| dispaly-block | Display | dispaly-block | Display |
| display-inline | Display | display-inline | Display |
| display-none | Display | display-none | Display |
| display-inline-block | Display | display-inline-block | Display |
| divider | Divider | divider | Divider |
| pagination | pagination | pagination | pagination |
| active | pagination | active | pagination |
| disabled | pagination | disabled | pagination |
| next | pagination | next | pagination |
| prev | pagination | prev | pagination |
| aione-table | Tables | aione-table | table |
| aione-table rounded | Tables | aione-table rounded | table |
| compact | Tables | compact | table |
| wide | Tables | wide | table |
| p-0 to p-100 | spacing | p-10 | padding |
| ph-0 to ph-100 | spacing | ph-10 | padding-horizontal |
| pv-0 to pv-100 | spacing | pv-10 | padding-vertical |
| pt-0 to pt-100 | spacing | pt-10 | padding-top |
| pr-0 to pr-100 | spacing | pr-10 | padding-right |
| pb-0 to pb-100 | spacing | pb-10 | padding-bottom |
| pl-0 to pl-100 | spacing | pl-10 | padding-left |
| m-p-0 to m-p-100 | spacing | m-p-10 | padding on medium screen |
| m-ph-0 to m-ph-100 | spacing | m-ph-10 | padding-horizontal on medium screen |
| m-pv-0 to m-pv-100 | spacing | m-pv-10 | padiding-vertical on medium screen |
| m-pt-0 to m-pt-100 | spacing | m-pt-10 | padding-top on medium screen |
| m-pr-0 to m-pr-100 | spacing | m-pr-10 | padding-right on medium screen |
| m-pb-0 to m-pb-100 | spacing | m-pb-10 | padding-bottom on medium screen |
| m-pl-0 to m-pl-100 | spacing | m-pl-10 | padding-left on medium screen |
| l-p-0 to l-p-100 | spacing | l-p-10 | padding on large screen |
| l-ph-0 to l-ph-100 | spacing | l-ph-10 | padding-horizontal on large screen |
| l-pv-0 to l-pv-100 | spacing | l-pv-10 | padding-vertical on large screen |
| l-pt-0 to l-pt-100 | spacing | l-pt-10 | padding-top on large screen |
| l-pr-0 to l-pr-100 | spacing | l-pr-10 | padding-right on large screen |
| l-pb-0 to l-pb-100 | spacing | l-pb-10 | padding-bottom on large screen |
| l-pl-0 to l-pl-100 | spacing | l-pl-10 | padding-left on large screen |
| p-0p to p-100p | spacing | p-10p | padding with percentage |
| ph-0p to ph-100p | spacing | ph-10p | padding-horizontal with percentage |
| pv-0p to pv-100p | spacing | pv-10p | padding-vertical with percentage |
| pt-0p to pt-100p | spacing | pt-10p | padding-top with percentage |
| pr-0p to pr-100p | spacing | pr-10p | padding-right with percentage |
| pb-0p to pb-100p | spacing | pb-10p | padding-bottom with percentage |
| pl-0p to pl-100p | spacing | pl-10p | padding-left with percentage |
| m-p-0p to m-p-100p | spacing | m-p-10p | padding with percentage on medium screen |
| m-ph-0p to m-ph-100p | spacing | m-ph-10p | padding-horizontal with percentage on medium screen |
| m-pv-0p to m-pv-100p | spacing | m-pv-10p | padding-vertical with percentage on medium screen |
| m-pt-0p to m-pt-100p | spacing | m-pt-10p | padding-top with percentage on medium screen |
| m-pr-0p to m-pr-100p | spacing | m-pr-10p | padding-right with percentage on medium screen |
| m-pb-0p to m-pb-100p | spacing | m-pb-10p | padding-bottom with percentage on medium screen |
| m-pl-0p to m-pl-100p | spacing | l-p-10p | padding-left with percentage on medium screen |
| l-ph-0p to l-ph-100p | spacing | l-ph-10p | padding-horizonatal with percentage on large screen |
| l-pv-0p to l-pv-100p | spacing | l-pv-10p | padding-vertical with percentage on large screen |
| l-pt-0p to l-pt-100p | spacing | l-pt-10p | padding-top with percentage on large screen |
| l-pr-0p to l-pr-100p | spacing | l-pr-10p | padding-right with percentage on large screen |
| l-pb-0p to l-pb-100p | spacing | l-pb-10p | padding-bottom with percentage on large screen |
| l-pl-0p to l-pl-100p | spacing | l-pl-10p | padding-left with percentage on large screen |