Grid System
Our responsive grid system.
Typography
Few <p> paragraphs of text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel nisl sit amet nisi eleifend auctor. In consectetur leo ante, sed rutrum nulla pretium id. Vivamus porttitor convallis nisl non vulputate. Donec et tellus non ipsum consectetur rutrum in a quam.
Praesent ultricies magna et ultrices aliquet. Vivamus posuere sapien erat, at pretium nulla lacinia nec. Etiam eget mollis nisl, non lobortis ante. Nulla erat tortor, faucibus id vehicula in, adipiscing non nulla. Ut pharetra erat hendrerit odio consequat porta. Suspendisse tempus id mi non facilisis.
Preformatted <pre> text.
body {
background:#fff;
}<code>
body {
background: #ffffff;
}Use <blockquote> to indicate a block of quoted text.
“Nam quis bibendum erat, ut cursus leo.”
Font Scale
Font scale classes .atk-size-* can be assigned to any element. Use .atk-size-reset to reset font size to the default body size if necessary.
Headings
Headings <h> are based on the font scale.
Heading h1
Heading h2
Heading h3
Heading h4
Heading h5
Heading h6
Undocumented classes
.atk-text-lead, .atk-text-bold, .atk-text-normal, .atk-text-dimmed, .atk-text-nowrap, .atk-text-reset, .atk-text-baseline-reset, .atk-text-ellipsis
Classes for HR
.atk-hr-small, .atk-hr-large, .atk-hr-dotted, .atk-hr-reset
Helpers
.atk-clear-fix, .atk-jackscrew, .atk-move-left, .atk-move-right, .atk-move-center, .atk-block, .atk-inline, .atk-valign-left, .atk-valign-right, .atk-valign-middle, .atk-align-left, .atk-align-right, .atk-align-center
Components
Swatches
.atk-swatch-* component can be assigned to any element. Text color will adapt based on luma value (perceptual brightness) of the swatch. You can easily create as many swatches as you need using .createSwatch() mixin (see variables.less).
Effects
.atk-effect-* component is the best used for different kind of notifications.
Combination of .atk-effect-* and .atk-label components.
Combination of .atk-effect-* and .atk-button components.
Combination of .atk-effect-* and .atk-box components.
Shapes
Blocks
Labels
.atk-label component is used to highlight a piece of text. The best used with .atk-effect-* and .atk-swatch-*.
Boxes
.atk-box is a component that creates paddings, rounds corners (value @cornerRadius can be changed in variables.less) and sets bottom margins between boxes (when stacked). Options: .atk-box-small, .atk-box, .atk-box-large.
Buttons
.atk-button component can be applied on any tag.
.atk-buttonset
Cells
Component .atk-cells is used for side by side positioning of several elements.Options:.atk-cells-gutter-small,.atk-cells-gutter,.atk-cells-gutter-large,.atk-cells-justified.
Component .atk-cells combined with .atk-cells-gutter-* option.
Regular Gutter
Large Gutter
Component .atk-cells combined with .atk-cells-justfied, .atk-cells-gutter option.
Menu
Component .atk-menu-horizontal combined with .atk-padding.
Component .atk-menu-vertical combined with .atk-padding-small and .atk-label.
Paddings & Margins
Actions
.atk-actions is a component that creates margins between its children. Make sure there are no spaces between your action buttons.
Separator
.atk-sep is a component that creates margins between its siblings. It is recommended to use it with <span> tag.
Sections
.atk-section component creates top and bottom margins. It is the best used for pages with fixed centered layout. Options: .atk-section-small, .atk-section, .atk-section-large.
.atk-section-small
Curabitur eleifend metus nec eros scelerisque porta. Ut eget enim tortor. Integer vulputate scelerisque urna, nec rhoncus leo gravida at. Ut porta, lorem vel eleifend laoreet, nulla ante tempus mauris, in fermentum mi purus vitae nunc.
.atk-section
Vestibulum nec turpis sit amet purus imperdiet ultrices mollis nec nibh. Phasellus viverra adipiscing diam sed venenatis. Mauris sagittis, sapien sed malesuada pharetra, dui nunc dignissim dolor, ultrices varius velit massa nec dolor.
.atk-section-large
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin est justo, bibendum quis ipsum placerat, accumsan vestibulum purus. Quisque leo nibh, laoreet non nibh non, accumsan tincidunt nunc. Morbi eget purus placerat lectus vulputate laoreet ut ac odio.
Paddings
.atk-padding component creates (consistent with the rest of the design) paddings in any element.Options:.atk-padding-small,.atk-padding,.atk-padding-large,.atk-padding-reset.
Pushes
.atk-push component creates a bottom margin for any element. Options: .atk-push-small, .atk-push, .atk-push-large.
Forms
Regular Form
Compact Form
Stacked Form
Stacked Compact Form
Minimal Form
Widgets
Media Blocks
Combination of .atk-swatch-*, .atk-box and .atk-cells components.
Tables
Basic .atk-table widget.
| Name | Description | Actions | |
|---|---|---|---|
| Brian O'Connell | Nullam convallis ipsum nec lacus pharetra congue. | Edit | |
| Danny Brown | Cras faucibus dui eget nunc commodo, vitae condimentum quam pharetra. | Edit | |
| John Smith | Sed varius nulla sodales hendrerit eleifend. | Edit | |
| Satya Nadella | Aliquam rhoncus turpis felis, ac tempor nulla pulvinar id. | Edit |
.atk-table widget with .atk-table-zebra class on.
| Name | Description | Actions | |
|---|---|---|---|
| Brian O'Connell | Nullam convallis ipsum nec lacus pharetra congue. | Edit | |
| Danny Brown | Cras faucibus dui eget nunc commodo, vitae condimentum quam pharetra. | Edit | |
| John Smith | Sed varius nulla sodales hendrerit eleifend. | Edit | |
| Satya Nadella | Aliquam rhoncus turpis felis, ac tempor nulla pulvinar id. | Edit |
.atk-table widget with .atk-table-outline class on.
| Name | Description | Actions | |
|---|---|---|---|
| Brian O'Connell | Nullam convallis ipsum nec lacus pharetra congue. | Edit | |
| Danny Brown | Cras faucibus dui eget nunc commodo, vitae condimentum quam pharetra. | Edit | |
| John Smith | Sed varius nulla sodales hendrerit eleifend. | Edit | |
| Satya Nadella | Aliquam rhoncus turpis felis, ac tempor nulla pulvinar id. | Edit |
.atk-table widget with .atk-table-bordered class on.
| Name | Description | Actions | |
|---|---|---|---|
| Brian O'Connell | Nullam convallis ipsum nec lacus pharetra congue. | Edit | |
| Danny Brown | Cras faucibus dui eget nunc commodo, vitae condimentum quam pharetra. | Edit | |
| John Smith | Sed varius nulla sodales hendrerit eleifend. | Edit | |
| Satya Nadella | Aliquam rhoncus turpis felis, ac tempor nulla pulvinar id. | Edit |
.atk-table widget with .atk-table-expander. Click on a table row to expand it.
| Name | Description | Actions |
|---|---|---|
| Brian O'Connell | Nullam convallis ipsum nec lacus pharetra congue. | Edit |
Compact Form | ||
| Danny Brown | Cras faucibus dui eget nunc commodo, vitae condimentum quam pharetra. | Edit |
Compact Form | ||
| John Smith | Sed varius nulla sodales hendrerit eleifend. | Edit |
Compact Form | ||
| Satya Nadella | Aliquam rhoncus turpis felis, ac tempor nulla pulvinar id. | Edit |
Compact Form | ||
.atk-table widget combined with .atk-box component.
| Name | Description | Actions | |
|---|---|---|---|
| Brian O'Connell | Nullam convallis ipsum nec lacus pharetra congue. | Edit | |
| Danny Brown | Cras faucibus dui eget nunc commodo, vitae condimentum quam pharetra. | Edit | |
| John Smith | Sed varius nulla sodales hendrerit eleifend. | Edit | |
| Satya Nadella | Aliquam rhoncus turpis felis, ac tempor nulla pulvinar id. | Edit |
.atk-table combined with .atk-label component.
| No results found. |
Navigation Bar
Combination of .atk-cells, .atk-swatch-* and .atk-padding components. The best used as a header on a fluid page.
Boxed Navigation Bar
Combination of .atk-cells, .atk-swatch-* and .atk-box components. The best used as a boxed type header.
Fixed Navigation Bar
Combination of .atk-cells, .atk-swatch-* and .atk-section-* components. The best used as a header on a fixed page.
Popovers
.atk-popover
Banners
.atk-banner
Responsive
.atk-show-*, .atk-hide-*, .atk-stack-*
jQueryUI Widgets
Dialogs
Basic modal .ui-dialog with a minimal form in it.
Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
Modal .ui-dialog with the button option on.
Tabs
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.
Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.
.ui-tabs widget mixed with .atk-padding component.
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.
Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.
.ui-tabs widget mixed with .atk-section component.
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.
Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.
.ui-tabs widget mixed with .atk-box component.
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.
Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.
Accordion
Section 1
Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
Section 2
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
Section 3
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede.Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
Datepicker
Basic .ui-datepicker widget.
.ui-datepicker with year and month dropdowns.