AgileToolkit CSS

Grid System

Our grid system is based on Gridpak tool which allows you to add as many columns as needed. It also supports responsiveness.

.col.span_3
.col.span_3
.col.span_3
.col.span_3
.col.span_4
.col.span_4
.col.span_4
.col.span_6
.col.span_6

Typography

A first level heading

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.

body {
  background: #ffffff;
}

Curabitur molestie, quam sit amet porttitor mattis, magna dui porttitor nunc, vel pellentesque risus metus a diam. Donec accumsan ullamcorper magna. Fusce ante metus, iaculis nec lectus nec, egestas consectetur nisi. Praesent fermentum enim sed arcu condimentum bibendum.

A second level heading

Vestibulum egestas volutpat rutrum. Etiam eleifend vel libero sit amet venenatis. Nulla facilisi. Etiam vel rutrum justo. Suspendisse dui risus, commodo non imperdiet et, hendrerit placerat nisl. Proin eu massa est. Integer convallis pharetra erat in pharetra.

“Nam quis bibendum erat, ut cursus leo.”

Cras adipiscing, lorem quis bibendum blandit, elit felis sollicitudin mi, ut varius nisl elit at purus. Mauris id vehicula eros, quis commodo lectus. Nullam rutrum ullamcorper sem quis dictum. In pellentesque odio nec sapien egestas, vel vulputate sapien molestie.

Nullam at commodo nulla. Aliquam eu erat at dolor consectetur dictum. Integer tempor urna in elementum adipiscing. Vestibulum mattis risus quis suscipit elementum. Curabitur ac ante vel tellus viverra venenatis. Curabitur vitae ullamcorper metus, ornare imperdiet ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Font Scale

Font scale classes can be assigned to any element.

.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 are based on the font scale.

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5
Heading h6

Styling and Positioning

Shapes

Fruits
.atk-shape-rectangle
Fruits
.atk-shape-rounded
Fruits 2
.atk-shape-circle

Swatches, States & Effects

Swatches

You can easily create your own swatches using .createSwatch() mixin.

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

Effects

.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

States

In progress...

Components

Labels

.atk-label component mixed with atk-effect-*.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quam augue, placerat nec lacus nec, tristique sagittis lectus. Donec eu accumsan ipsum. Integer interdum adipiscing mi eu varius. 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.

Actions

.atk-actions is a special component that creates margins between its children.

Make sure there are no spaces between your action buttons.

SVG Icons

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


Show 500+ Font Icons

Forms

Basic Form

Basic .atk-form with labels aside. No additional classes required.

Additional class .atk-form-compact decreases margins between field rows.

Stacked Form

Additional class .atk-form-stacked puts labels on top of fields. Removed .atk-cells button wrapper and .atk-cells-gutter classes.

.atk-form-stacked mixed with .atk-form-compact.

Minimal Form

.atk-form-stacked mixed with .atk-form-compact. Removed <label> tag, added placeholder="" attribute for inputs and .atk-jackscrew class for button.

Hybrid Form

.atk-form-hybrid allows to assign .atk-form-* classes to .atk-form-fieldset.

.atk-form-fieldset and .atk-actions combined with grid system's .span_* classes.

This is a form Comment.

This is a form error.


Widgets

Media Blocks

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

Apples

Apples

Donec dolor sapien, sollicitudin in erat ac, pellentesque venenatis orci. Nullam faucibus lacus quis sem fermentum adipiscing.


Download
Tomatoes

Tomatoes

Donec dolor sapien, sollicitudin in erat ac, pellentesque venenatis orci. Nullam faucibus lacus quis sem fermentum adipiscing.


Download
Bananas

Bananas

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris at venenatis justo.


Download
Blueberries

Blueberries

Nunc id erat sit amet sapien convallis ultricies sed vel est. Interdum et malesuada fames ac ante ipsum primis in faucibus.


Download

Tables

1 2 3 4 5
1 2 3 4 5
1 2 3 4 5
1 2 3 4 5
1 2 3 4 5
1 2 3 4 5

.atk-table widget combined with .atk-cells and .atk-label components.

Product Type Weight Phone Email Status
25.00 kg 777-002-3578 john@microsoft.com Declined
25.00 kg 777-002-3578 john@microsoft.com Declined
25.00 kg 777-002-3578 john@microsoft.com Declined

Pagination

It might be useful to merge .atk-pagination with .atk-menu in the future.

1 2 3 4 5

Menus

Menu Horizontal

Menu Horizontal Justified

Name of this widget should be changed.

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.

jQueryUI

Dialogs

This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

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.

Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.

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.

  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item

Datepicker