• InK
  • Getting started
  • Layout
  • Navigation
  • Typography
  • Icons
  • Forms
  • Alerts
  • Tables
  • InK JS
    • UI
    • Core
  • InK
  • Getting started
  • Layout
  • Navigation
  • Typography
  • Icons
  • Forms
  • Alerts
  • Tables
  • InK JS
    • UI
    • Core

Glossary

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.
.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.
.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-center Centers grid column.
.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 the gutter size between its columns.
.column-left Floats grid column to the left.
.column-right Floats grid column to the right.
.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 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.
.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 blose 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
.previous Defines the previous button within the pagination container.
.push-left Floats element to the left.
.push-right Floats element to the right.
.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 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>.
.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 Adds vertical margin.

Follow Ink to stay on top of the latest news.

Tweet
Follow @inksapo
  • About
  • Changelog
  • Ink's code licensed under MIT, docs under cc-by-nc

sapo.pt

PTC logoPTC - All rights reserved.
SAPO is a trademark and a search engine created at the University of Aveiro.

Built with:

  • {LESS}
    (Apache License 2.0)
  • FontAwesome
    (cc-by-3.0)
  • Ubuntu Font
    (Ubuntu Font License)
  • HTML5 shiv
    (MIT License)
  • respond.js
    (MIT License)
  • normalize.css
    (normalize license)