Grid System

Our responsive grid system.

.atk-col-3
.atk-col-3
.atk-col-3
.atk-col-3
.atk-col-4
.atk-col-4
.atk-col-4
.atk-col-6
.atk-col-6

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.

.atk-size-yotta
.atk-size-zetta
.atk-size-exa
.atk-size-peta
.atk-size-tera
.atk-size-giga
.atk-size-mega
.atk-size-kilo
.atk-size-reset
.atk-size-milli
.atk-size-micro

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).

.atk-swatch-ink
.atk-swatch-blue
.atk-swatch-green
.atk-swatch-yellow
.atk-swatch-red
.atk-swatch-gray

Effects

.atk-effect-* component is the best used for different kind of notifications.

.atk-effect-success.atk-effect-warning.atk-effect-danger.atk-effect-info

Combination of .atk-effect-* and .atk-label components.

.atk-effect-success.atk-effect-warning.atk-effect-danger.atk-effect-info

Combination of .atk-effect-* and .atk-button components.

Combination of .atk-effect-* and .atk-box components.

.atk-effect-success
.atk-effect-warning
.atk-effect-danger
.atk-effect-info

Shapes

.atk-shape-rectangle

.atk-shape-circle

.atk-shape-rounded

Blocks

Labels

.atk-label component is used to highlight a piece of text. The best used with .atk-effect-* and .atk-swatch-*.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quam augue, placerat nec lacus nec, tristique sagittis lectus. Donec eu accumsan ipsum. Pellentesque at fringilla elit. Etiam auctor dui at consectetur blandit. Nulla sagittis neque nisi, eget ornare nunc fermentum eu. In ante justo, mollis vitae lectus vel, mollis dictum mauris.

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.

.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.

Cell #1
Cell #2
Cell #3
Cell #4
Cell #5

Component .atk-cells combined with .atk-cells-gutter-* option.

Regular Gutter
Cell #1 with .atk-jackscrew
Cell #2
Cell #3
Large Gutter
Cell #1
Cell #2
Cell #3

Component .atk-cells combined with .atk-cells-justfied.atk-cells-gutter option.

 Width is distributed equally only for two cells when using combination of .atk-cells-justified and .atk-cells-gutter options.

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.

.atk-padding-small
.atk-padding
.atk-padding-large

Pushes

.atk-push component creates a bottom margin for any element. Options: .atk-push-small.atk-push.atk-push-large.

.atk-push-small
.atk-push
.atk-push-large

Icons

 We are using fontello.com to generate our awesome & scalable vector icon font. You can easily add or remove icons from your font pack if file size is a concern.


Show 500+ Font Icons

Forms

Regular Form

Some Text

 Please accept Terms & Conditions to continue.

Compact Form

Stacked Form

Stacked Compact Form

 This is error

Minimal Form

Widgets

Media Blocks

 Combination of .atk-swatch-*.atk-box and .atk-cells components.

Apples

Apples

Curabitur posuere vehicula scelerisque. Quisque vitae velit ante. Sed vel euismod est. Sed eu libero quis justo aliquet condimentum. Maecenas dictum, tortor vehicula.

Tomatoes

Tomatoes

Curabitur posuere vehicula scelerisque. Quisque vitae velit ante. Sed vel euismod est. Sed eu libero quis justo aliquet condimentum. Maecenas dictum, tortor vehicula.

Bananas

Bananas

Curabitur posuere vehicula scelerisque. Quisque vitae velit ante. Sed vel euismod est. Sed eu libero quis justo aliquet condimentum. Maecenas dictum, tortor vehicula.

Blueberries

Blueberries

Curabitur posuere vehicula scelerisque. Quisque vitae velit ante. Sed vel euismod est. Sed eu libero quis justo aliquet condimentum. Maecenas dictum, tortor vehicula.

Tables

Basic .atk-table widget.

NameDescriptionActions
Brian O'ConnellNullam convallis ipsum nec lacus pharetra congue.Edit
Danny BrownCras faucibus dui eget nunc commodo, vitae condimentum quam pharetra.Edit
John SmithSed varius nulla sodales hendrerit eleifend.Edit
Satya NadellaAliquam rhoncus turpis felis, ac tempor nulla pulvinar id.Edit

.atk-table widget with .atk-table-zebra class on.

NameDescriptionActions
Brian O'ConnellNullam convallis ipsum nec lacus pharetra congue.Edit
Danny BrownCras faucibus dui eget nunc commodo, vitae condimentum quam pharetra.Edit
John SmithSed varius nulla sodales hendrerit eleifend.Edit
Satya NadellaAliquam rhoncus turpis felis, ac tempor nulla pulvinar id.Edit

.atk-table widget with .atk-table-outline class on.

NameDescriptionActions
Brian O'ConnellNullam convallis ipsum nec lacus pharetra congue.Edit
Danny BrownCras faucibus dui eget nunc commodo, vitae condimentum quam pharetra.Edit
John SmithSed varius nulla sodales hendrerit eleifend.Edit
Satya NadellaAliquam rhoncus turpis felis, ac tempor nulla pulvinar id.Edit

.atk-table widget with .atk-table-bordered class on.

NameDescriptionActions
Brian O'ConnellNullam convallis ipsum nec lacus pharetra congue.Edit
Danny BrownCras faucibus dui eget nunc commodo, vitae condimentum quam pharetra.Edit
John SmithSed varius nulla sodales hendrerit eleifend.Edit
Satya NadellaAliquam rhoncus turpis felis, ac tempor nulla pulvinar id.Edit

.atk-table widget with .atk-table-expander. Click on a table row to expand it.

NameDescriptionActions
 Brian O'ConnellNullam convallis ipsum nec lacus pharetra congue.Edit

Compact Form

 Danny BrownCras faucibus dui eget nunc commodo, vitae condimentum quam pharetra.Edit

Compact Form

 John SmithSed varius nulla sodales hendrerit eleifend.Edit

Compact Form

 Satya NadellaAliquam rhoncus turpis felis, ac tempor nulla pulvinar id.Edit

Compact Form

.atk-table widget combined with .atk-box component.

NameDescriptionActions
Brian O'ConnellNullam convallis ipsum nec lacus pharetra congue.Edit
Danny BrownCras faucibus dui eget nunc commodo, vitae condimentum quam pharetra.Edit
John SmithSed varius nulla sodales hendrerit eleifend.Edit
Satya NadellaAliquam 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

.atk-popover-top-left
.atk-popover-top-center
.atk-popover-top-right
.atk-popover-bottom-left
.atk-popover-bottom-center
.atk-popover-bottom-right

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.

Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum.

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.

Tooltips

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, corrupti, dignissimos voluptatem modi omnis beatae deleniti ipsa animi similique dolorem quos est adipisci officiis quam distinctio deserunt reprehenderit aliquid a.