Know all about Ink's hidden treasures.
Class | Description |
---|---|
.active |
Adds active style to an element. |
.animated |
Adds a CSS transition to the width of the grid columns when changing breakpoints. Used in the <body> element. |
.append-button |
Defines an input field with an appended button. Used with the <div.control> element. |
.append-symbol |
Defines an input field with an appended symbol. Used with the <div.control> element. |
.bar |
Defines the bar inside the .ink-progress-bar . Used with a <div> element. |
.bar.black .bar.blue .bar.green .bar.grey .bar.orange .bar.red
|
Adds a color scheme to the .ink-progress-bar . |
.bottom-space .half-bottom-space .quarter-bottom-space
|
Adds bottom margin. |
.button-group |
Defines a wrapper to build a button group. Used with a <div> element. |
.button-toolbar |
Defines a wrapper to build a button toolbar. Used with a <div> element. |
.breadcrumbs |
Defines a breadcrumb type of navigation. Used with an <ul> element, nested inside the .ink-navigation wrapper. |
.breadcrumbs.black .breadcrumbs.blue .breadcrumbs.green .breadcrumbs.grey .breadcrumbs.orange .breadcrumbs.red .breadcrumbs.white
|
Adds a color scheme to the breadcrumbs. |
.breadcrumbs.flat |
Removes gradients from the breadcrumbs if a color scheme is added. |
.breadcrumbs.rounded |
Adds round corners to the breadcrumbs. |
.breadcrumbs.shadowed |
Adds shadow to the breadcrumbs. |
.clearfix |
Clears floated elements. |
.column-group |
Defines a multi-column wrapper. |
.column-group.gutters |
Defines a multi-column wrapper with spacing between its columns. |
.column-group.half-gutters |
Defines a multi-column wrapper with half of the gutter size between its columns. |
.column-group.quarter-gutters |
Defines a multi-column wrapper with a quarter of the gutter size between its columns. |
.column-group.horizontal-gutters .column-group.half-horizontal-gutters .column-group.quarter-horizontal-gutters
|
Defines a multi-column wrapper with just horizontal spacing between its columns. |
.content-center |
Centers content inside an element. |
.content-left |
Aligns content to the left inside an element. |
.content-right |
Aligns content to the right inside an element. |
.control |
Defines the container for a form control (e.g. text field, checkbox, etc.). Used with a <div> element nested in the .control-group . |
.control-group |
Defines the container for a label / form control pair. Used with a <div> element. |
.control-group.required |
Defines a required field. |
.control-group.validation |
Used if you need to print a message upon form submission. |
.control-group.validation.error .control-group.validation.warning
|
Defines the type of message printed upon form submission. |
.disabled |
Adds the disabled style to a .pagination or a .dropdown-menu <li> . |
.dropdown-menu |
Defines a dropdown menu. Used with an <li> element. |
.extra-large |
Sets text to 1.45em of the original size |
.fade |
Adds a CSS transition to the opacity of the target element. Used with .ink-modal and .ink-shade amongst others. |
.heading |
Adds a heading style to a .dropdown-menu <li> . |
.hide-all |
Hides element in all the breakpoints. |
.hide-large |
Hides element in the large breakpoint. |
.hide-medium |
Hides element in the medium breakpoint. |
.hide-small |
Hides element in the small breakpoint. |
.icon-* |
Every class with this prefix is part of the icon webfont collection. Please check the detailed information in our icon section or the Font Awesome website. |
.ink-alert.basic |
Defines a basic alert. |
.ink-alert.basic.error .ink-alert.basic.info .ink-alert.basic.success
|
Defines the type of basic alert. |
.ink-alert.block |
Defines a block alert. |
.ink-alert.block.error .ink-alert.block.info .ink-alert.block.success
|
Defines the type of block alert. |
.ink-button |
Adds default ink style to a <button> , <a> or <input> type element. |
.ink-button.blue .ink-button.green .ink-button.orange .ink-button.red
|
Adds a color scheme to an ink-button. |
.ink-datepicker |
Defines a datepicker input field. Used with an <input> element. |
.ink-dropdown |
Defines the container for a dropdown menu. Used with a <div> element. |
.ink-dismiss |
Defines a dismissing action button for a given container (e.g. .ink-modal , .ink-alert , etc.). Normally used with a <button> element. |
.ink-form |
Adds default ink style to a <form> element. |
.ink-gallery |
Defines the container for a gallery. Used with a <div> element. |
.ink-grid |
Defines site width. |
.ink-label |
Defines an ink label. Normally used with inline elements. |
.ink-label.error |
Defines an ink label with error style. |
.ink-label.info |
Defines an ink label with info style. |
.ink-label.success |
Defines an ink label with success style. |
.ink-label.warning |
Defines an ink label with warning style. |
.ink-label.error.invert |
Inverts the ink label error style. |
.ink-label.info.invert |
Inverts the ink label info style. |
.ink-label.success.invert |
Inverts the ink label success style. |
.ink-label.warning.invert |
Inverts the ink label warning style. |
.ink-modal |
Defines the container for a modal window. Used with a <div> element. |
.ink-navigation |
Defines a navigation element. Used with block elements such as <nav> or <div> . |
.ink-progress-bar |
Defines the container for a progress bar. Used with a <div> element. |
.ink-shade |
Defines an opacity overlay. Normally used to emphasize a modal type container |
.ink-sortable-list |
Defines the container for a sortable list. Normally used with an <ul> element. |
.ink-table |
Adds default ink style to a table element. |
.ink-table.bordered |
Adds borders to an ink table. |
.ink-table.hover |
Adds hover style to an ink table. |
.ink-table.alternating |
Adds alternating row style to an ink table. |
.ink-tabs |
Defines the container for tabs. Used with a <div> element. |
.ink-tabs.bottom .ink-tabs.left .ink-tabs.top .ink-tabs.right
|
Defines where the tabs navigation will be. |
.ink-tree-view |
Defines the container for a tree view. Normally used with a <ul> element. |
.inline |
Adds inline display to list items. |
.hspace .horizontal-space .half-horizontal-space .quarter-horizontal-space
|
Adds horizontal margin. |
.label |
Defines the label in a checkbox or radio button control group. Used in a <ul> element. |
.large |
Sets text to 1.2em of the original size |
.large-10 |
Defines a column with 10% of its container width in the large breakpoint. |
.large-20 |
Defines a column with 20% of its container width in the large breakpoint. |
.large-25 |
Defines a column with 25% of its container width in the large breakpoint. |
.large-30 |
Defines a column with 30% of its container width in the large breakpoint. |
.large-33 |
Defines a column with 33% of its container width in the large breakpoint. |
.large-40 |
Defines a column with 40% of its container width in the large breakpoint. |
.large-50 |
Defines a column with 50% of its container width in the large breakpoint. |
.large-60 |
Defines a column with 60% of its container width in the large breakpoint. |
.large-66 |
Defines a column with 66% of its container width in the large breakpoint. |
.large-70 |
Defines a column with 70% of its container width in the large breakpoint. |
.large-75 |
Defines a column with 75% of its container width in the large breakpoint. |
.large-80 |
Defines a column with 80% of its container width in the large breakpoint. |
.large-90 |
Defines a column with 90% of its container width in the large breakpoint. |
.large-100 |
Defines a column with 100% of its container width in the large breakpoint. |
.large-align-center |
Centers content inside an element in the large breakpoint. |
.large-align-left |
Aligns content to the left inside an element in the large breakpoint. |
.large-align-right |
Aligns content to the right inside an element in the large breakpoint. |
.large-push-center |
Centers element in the large breakpoint. |
.large-push-left |
Floats element to the left in the large breakpoint. |
.large-push-right |
Floats element to the right in the large breakpoint. |
.left-space .half-left-space .quarter-left-space
|
Adds left margin. |
.medium-10 |
Defines a column with 10% of its container width in the medium breakpoint. |
.medium-20 |
Defines a column with 20% of its container width in the medium breakpoint. |
.medium-25 |
Defines a column with 25% of its container width in the medium breakpoint. |
.medium-30 |
Defines a column with 30% of its container width in the medium breakpoint. |
.medium-33 |
Defines a column with 33% of its container width in the medium breakpoint. |
.medium-40 |
Defines a column with 40% of its container width in the medium breakpoint. |
.medium-50 |
Defines a column with 50% of its container width in the medium breakpoint. |
.medium-60 |
Defines a column with 60% of its container width in the medium breakpoint. |
.medium-66 |
Defines a column with 66% of its container width in the medium breakpoint. |
.medium-70 |
Defines a column with 70% of its container width in the medium breakpoint. |
.medium-75 |
Defines a column with 75% of its container width in the medium breakpoint. |
.medium-80 |
Defines a column with 80% of its container width in the medium breakpoint. |
.medium-90 |
Defines a column with 90% of its container width in the medium breakpoint. |
.medium-100 |
Defines a column with 100% of its container width in the medium breakpoint. |
.medium-align-center |
Centers content inside an element in the medium breakpoint. |
.medium-align-left |
Aligns content to the left inside an element in the medium breakpoint. |
.medium-align-right |
Aligns content to the right inside an element in the medium breakpoint. |
.medium-push-center |
Centers element in the medium breakpoint. |
.medium-push-left |
Floats element to the left in the medium breakpoint. |
.medium-push-right |
Floats element to the right in the medium breakpoint. |
.menu |
Defines a menu type of navigation. Used with an <ul> element, nested inside the .ink-navigation wrapper. |
.menu.black .menu.blue .menu.green .menu.grey .menu.orange .menu.red .menu.white
|
Adds a color scheme to the menu. |
.menu.flat |
Removes gradients from the menu if a color scheme is added. |
.menu.horizontal |
Adds horizontal orientation to the menu. |
.menu.vertical |
Adds vertical orientation to the menu. |
.menu.rounded |
Adds round corners to the menu. |
.menu.shadowed |
Adds shadow to the menu. |
.modal-body |
Defines the ink modal box body. Used with a block element, normally a <div> . |
.modal-close |
Defines the ink modal box close button. Used with a <button> element. |
.modal-footer |
Defines the ink modal box footer. Used with a block element, normally a <div> . |
.modal-header |
Defines the ink modal box header. Used with a block element, normally a <div> . |
.next |
Defines the next button within the pagination container. |
.note |
Adds note style to an inline element (<p> , <span> , <li> ). |
.pagination |
Defines a pagination type of navigation. Used with a <ul> element, nested inside the .ink-navigation wrapper. |
.pagination.black .pagination.blue .pagination.green .pagination.grey .pagination.orange .pagination.red .pagination.white
|
Adds a color scheme to the pagination. |
.pagination.flat |
Removes gradients from the pagination if a color scheme is added. |
.pagination.rounded |
Adds rounded corners to the pagination |
.pagination.shadowed |
Adds shadow to the pagination |
.pills |
Defines a pills type of navigation. Used with a <ul> element, nested inside the .ink-navigation wrapper. |
.pills.black .pills.blue .pills.green .pills.grey .pills.orange .pills.red .pills.white
|
Adds a color scheme to the pills. |
.pills.flat |
Removes gradients from the pills if a color scheme is added. |
.pills.rounded |
Adds rounded corners to the pills |
.pills.shadowed |
Adds shadow to the pills |
.prepend-button |
Defines an input field with a prepended button. Used with the <div.control> element. |
.prepend-symbol |
Defines an input field with a prepended symbol. Used with the <div.control> element. |
.previous |
Defines the previous button within the pagination container. |
.push-center |
Center element. |
.push-left |
Floats element to the left. |
.push-right |
Floats element to the right. |
.right-space .half-right-space .quarter-right-space
|
Adds right margin. |
.separator-above |
Adds a top separator line to a .dropdown-menu <li> element. |
.separator-below |
Adds a bottom separator line to a .dropdown-menu <li> element. |
.show-all |
Shows element in all the breakpoints. |
.show-large |
Shows element in the large breakpoint. |
.show-medium |
Shows element in the medium breakpoint. |
.show-small |
Shows element in the small breakpoint. |
.small |
Sets text to 0.75em of the original size |
.small-10 |
Defines a column with 10% of its container width in the small breakpoint. |
.small-20 |
Defines a column with 20% of its container width in the small breakpoint. |
.small-25 |
Defines a column with 25% of its container width in the small breakpoint. |
.small-30 |
Defines a column with 30% of its container width in the small breakpoint. |
.small-33 |
Defines a column with 33% of its container width in the small breakpoint. |
.small-40 |
Defines a column with 40% of its container width in the small breakpoint. |
.small-50 |
Defines a column with 50% of its container width in the small breakpoint. |
.small-60 |
Defines a column with 60% of its container width in the small breakpoint. |
.small-66 |
Defines a column with 66% of its container width in the small breakpoint. |
.small-70 |
Defines a column with 70% of its container width in the small breakpoint. |
.small-75 |
Defines a column with 75% of its container width in the small breakpoint. |
.small-80 |
Defines a column with 80% of its container width in the small breakpoint. |
.small-90 |
Defines a column with 90% of its container width in the small breakpoint. |
.small-100 |
Defines a column with 100% of its container width in the small breakpoint. |
.small-align-center |
Centers content inside an element in the small breakpoint. |
.small-align-left |
Aligns content to the left inside an element in the small breakpoint. |
.small-align-right |
Aligns content to the right inside an element in the small breakpoint. |
.small-push-center |
Centers element in the small breakpoint. |
.small-push-left |
Floats element to the left in the small breakpoint. |
.small-push-right |
Floats element to the right in the small breakpoint. |
.space .half-space .quarter-space
|
Adds horizontal and vertical margin. |
.submenu |
Defines a submenu in a .dropdown-menu or an .ink-navigation menu. Used with an <ul> element. |
.submenu.dropdown |
Defines a dropdown type submenu in an ink-navigation vertical menu. Used with an <ul> element. |
.tabs-nav |
Defines the tabs navigation. Normally used with an <ul> . |
.tabs-content |
Defines the tabs content wrapper. Normally used with a <div> . |
.top-space .half-top-space .quarter-top-space
|
Adds top margin. |
.tip |
Defines the default ink style for a tip. Used with a paragraph in a form. |
.toggle |
Adds the toggling function to a given element (e.g. <a> , <button> , etc ).
A data-target data-attribute must be defined with a selector for the element to be toggled.
|
.unstyled |
Resets <ul> padding and list styles. |
.vspace .vertical-space .half-vertical-space .quarter-vertical-space
|
Adds vertical margin. |