ack-css-boot

A base set of short-hand css helper classes. Includes available classes that are commonly used for styling buttons, form inputs, and such.



Table of Contents

ack-flex-boot
ack-text-boot
ack-block-boot
ack-color-boot
ack-responsive-boot
ack-form-boot
ack-background-boot
Additional Classes

ack-flex-boot

CSS flex box layout made extremely simple

A .flex class exists to set display:flex; but it is hardly needed. All .flex- classes extend .flex

.flex-center

Acker
Dawn
Apple

.flex-left

Acker
Dawn
Apple

.flex-right

Acker
Dawn
Apple

.flex-evenly

Acker
Dawn
Apple

.flex-apart

Acker
Dawn
Apple

.flex-valign

Acker
Dawn
Apple
Dawn
Apple
Apple

.flex-valign-center

Acker
Dawn
Apple
Dawn
Apple
Apple

.flex-valign-bottom

Acker
Dawn
Apple
Dawn
Apple
Apple

.flex-fill

Acker
Dawn
Apple
Dawn
Apple
Apple

.flex-baseline

Acker
Dawn
Apple
Dawn
Apple
Apple

.flex-reverse

1 Acker
2 Dawn
3 Apple

.flex-stack

1 Acker
2 Dawn
3 Apple

.flex-stack.flex-reverse

1 Acker
2 Dawn
3 Apple

.flex-stack
.flex-center

Acker Dawn Apple
Dawn
Apple

.flex-stack
.flex-left

Acker Dawn Apple
Dawn
Apple

.flex-stack
.flex-right

Acker Dawn Apple
Dawn
Apple

.flex-stack-reverse

Acker
Dawn
Apple

.flex-stack-reverse
.flex-center

Acker Dawn Apple
Dawn
Apple

.flex-stack-reverse
.flex-left

Acker Dawn Apple
Dawn
Apple

.flex-stack-reverse
.flex-right

Acker Dawn Apple
Dawn
Apple

Flex Inner Classes

Flex Evenly Examples

.flex1 is more forceful to achieve desired widths but quicker to create wrapping rows versus .flex-1

.flex-1


.flex-1
.flex1


.flex1
(two element example above)

.flex-1
.flex-1
.flex-1
.flex1
.flex1
.flex1
(three element example above)

.flex-1
.flex-1
.flex-1
.flex-1
.flex1
.flex1
.flex1
.flex1
(four element example above)

.flex-1
.flex-1
.flex-1
.flex-1
.flex-1
.flex1
.flex1
.flex1
.flex1
.flex1
(five element example above)

.flex-1
.flex-1
.flex-1
.flex-1
.flex-1
.flex-1
.flex1
.flex1
.flex1
.flex1
.flex1
.flex1
(six element example above)

.flex-1
.flex-1
.flex-1
.flex-1
.flex-1
.flex-1
.flex-1
.flex1
.flex1
.flex1
.flex1
.flex1
.flex1
.flex1
(seven element example above)

Flex More Examples

.flex1-5 is more forceful to achieve desired widths but quicker to create wrapping rows versus .flex-1-5

.flex-1-5


.flex-1
.flex1-5


.flex1
(two element example above)

.flex-1-5
.flex-1-5
.flex-1-5
.flex1-5
.flex1-5
.flex1-5
(three element example above)

.flex-1-5
.flex-1-5
.flex-1-5
.flex-1-5
.flex1-5
.flex1-5
.flex1-5
.flex1-5
(four element example above)

.flex-1-5
.flex-1-5
.flex-1-5
.flex-1-5
.flex-1-5
.flex1-5
.flex1-5
.flex1-5
.flex1-5
.flex1-5
(five element example above)

.flex-1-5
.flex-1
.flex-1
.flex-1
.flex-1
.flex-1
.flex1-5
.flex1
.flex1
.flex1
.flex1
.flex1
(six element example above)

.flex-1-5
.flex-1-5
.flex-1-5
.flex-1-5
.flex-1-5
.flex-1-5
.flex-1-5
.flex1-5
.flex1-5
.flex1-5
.flex1-5
.flex1-5
.flex1-5
.flex1-5
(seven element example above)

Flex Double Examples

.flex2 is more forceful to achieve desired widths but quicker to create wrapping rows versus .flex-2

.flex-2


.flex-1
.flex2


.flex1
(two element example above)

.flex-2
.flex-2
.flex-2
.flex2
.flex2
.flex2
(three element example above)

.flex-2
.flex-2
.flex-2
.flex-2
.flex2
.flex2
.flex2
.flex2
(four element example above)

.flex-2
.flex-2
.flex-2
.flex-2
.flex-2
.flex2
.flex2
.flex2
.flex2
.flex2
(five element example above)

.flex-2
.flex-1
.flex-1
.flex-1
.flex-1
.flex-1
.flex2
.flex1
.flex1
.flex1
.flex1
.flex1
(six element example above)

.flex-2
.flex-2
.flex-2
.flex-2
.flex-2
.flex-2
.flex-2
.flex2
.flex2
.flex2
.flex2
.flex2
.flex2
.flex2
(seven element example above)

Flex Triple Examples

.flex3 is more forceful to achieve desired widths but quicker to create wrapping rows versus .flex-3

.flex-3


.flex-1
.flex3


.flex1
(two element example above)

.flex-3
.flex-3
.flex-3
.flex3
.flex3
.flex3
(three element example above)

.flex-3
.flex-3
.flex-3
.flex-3
.flex3
.flex3
.flex3
.flex3
(four element example above)

.flex-3
.flex-3
.flex-3
.flex-3
.flex-3
.flex3
.flex3
.flex3
.flex3
.flex3
(five element example above)

.flex-3
.flex-1
.flex-1
.flex-1
.flex-1
.flex-1
.flex3
.flex1
.flex1
.flex1
.flex1
.flex1
(six element example above)

.flex-3
.flex-3
.flex-3
.flex-3
.flex-3
.flex-3
.flex-3
.flex3
.flex3
.flex3
.flex3
.flex3
.flex3
.flex3
(seven element example above)

Flex Quad Examples

.flex4 is more forceful to achieve desired widths but quicker to create wrapping rows versus .flex-4

.flex-4


.flex-1
.flex4


.flex1
(two element example above)

.flex-4
.flex-4
.flex-4
.flex4
.flex4
.flex4
(three element example above)

.flex-4
.flex-4
.flex-4
.flex-4
.flex4
.flex4
.flex4
.flex4
(four element example above)

.flex-4
.flex-4
.flex-4
.flex-4
.flex-4
.flex4
.flex4
.flex4
.flex4
.flex4
(five element example above)

.flex-4
.flex-1
.flex-1
.flex-1
.flex-1
.flex-1
.flex4
.flex1
.flex1
.flex1
.flex1
.flex1
(six element example above)

.flex-4
.flex-4
.flex-4
.flex-4
.flex-4
.flex-4
.flex-4
.flex4
.flex4
.flex4
.flex4
.flex4
.flex4
.flex4
(seven element example above)

Flex Five Examples

.flex5 is more forceful to achieve desired widths but quicker to create wrapping rows versus .flex-5

.flex-5


.flex-1
.flex5


.flex1
(two element example above)

.flex-5
.flex-5
.flex-5
.flex5
.flex5
.flex5
(three element example above)

.flex-5
.flex-5
.flex-5
.flex-5
.flex5
.flex5
.flex5
.flex5
(four element example above)

.flex-5
.flex-5
.flex-5
.flex-5
.flex-5
.flex5
.flex5
.flex5
.flex5
.flex5
(five element example above)

.flex-5
.flex-1
.flex-1
.flex-1
.flex-1
.flex-1
.flex5
.flex1
.flex1
.flex1
.flex1
.flex1
(six element example above)

.flex-5
.flex-5
.flex-5
.flex-5
.flex-5
.flex-5
.flex-5
.flex5
.flex5
.flex5
.flex5
.flex5
.flex5
.flex5
(seven element example above)

Flex Six Examples

.flex6 is more forceful to achieve desired widths but quicker to create wrapping rows versus .flex-6

.flex-6


.flex-1
.flex6


.flex1
(two element example above)

.flex-6
.flex-6
.flex-6
.flex6
.flex6
.flex6
(three element example above)

.flex-6
.flex-6
.flex-6
.flex-6
.flex6
.flex6
.flex6
.flex6
(four element example above)

.flex-6
.flex-6
.flex-6
.flex-6
.flex-6
.flex6
.flex6
.flex6
.flex6
.flex6
(five element example above)

.flex-6
.flex-1
.flex-1
.flex-1
.flex-1
.flex-1
.flex6
.flex1
.flex1
.flex1
.flex1
.flex1
(six element example above)

.flex-6
.flex-6
.flex-6
.flex-6
.flex-6
.flex-6
.flex-6
.flex6
.flex6
.flex6
.flex6
.flex6
.flex6
.flex6
(seven element example above)

ack-text-boot

.font-arial
.font-times
.font-helvetica
.font-fixed-width or .font-courier
.text-9x
.text-8x
.text-7x
.text-6x
.text-5x
.text-4x
.text-3x
.text-2x
.text-sm
.text-smx
.text-xs
.text-xxs
.text-underline, .underline


line skips demo:aagbbjccyddjee
.underline.text-line-no-skip, .underline.underline-no-skip


solid line demo:aagbbjccyddjee
.underline.underline-under


under baseline:aagbbjccyddjee
.italic, .text-italic
.strong, .bold, .text-bold
.strike, .line-through
.stroke
.stroke-1
.stroke-2
.stroke-3
.stroke-4
.stroke-5
.letter-spacing-4x
.letter-spacing-3x
.letter-spacing-2x
.letter-spacing-sm
.letter-spacing-smx
.letter-spacing-xs
.letter-spacing-xxs
.font-bolder
.font-normal
.font-lighter
.font-100
.font-200
.font-300
.font-400
.font-500
.font-600
.font-700
.font-800
.font-900
.line-height-0
.line-height-90
.line-height-80
.line-height-3-4
.line-height-70
.line-height-half
.line-height-60
.line-height-quarter
.line-height-third
.line-height-2x
.line-height-3x
.text-shadow-white-blur
.text-shadow-grey-blur

hover- classes

.hover-text-shadow-white-blur
(hover with mouse)
.hover-text-shadow-grey-blur
(hover with mouse)
.hover-bg-primary
.hover-text-primary
.hover-border-primary
(hover with mouse)
.hover-bg-success
.hover-text-success
.hover-border-success
(hover with mouse)
.hover-bg-info
.hover-text-info
.hover-border-info
(hover with mouse)
.hover-bg-warning
.hover-text-warning
.hover-border-warning
(hover with mouse)
.hover-bg-danger
.hover-text-danger
.hover-border-danger
(hover with mouse)
.hover-bg-stable
.hover-text-stable
.hover-border-stable
(hover with mouse)
.hover-bg-positive
.hover-text-positive
.hover-border-positive
(hover with mouse)
.hover-bg-calm
.hover-text-calm
.hover-border-calm
(hover with mouse)
.hover-bg-balanced
.hover-text-balanced
.hover-border-balanced
(hover with mouse)
.hover-bg-energized
.hover-text-energized
.hover-border-energized
(hover with mouse)
.hover-bg-assertive
.hover-text-assertive
.hover-border-assertive
(hover with mouse)
.hover-bg-royal
.hover-text-royal
.hover-border-royal
(hover with mouse)
.hover-bg-dark
.hover-text-dark
.hover-border-dark
(hover with mouse)
.hover-bg-grey
.hover-text-grey
.hover-border-grey
(hover with mouse)
.hover-bg-grey-2x
.hover-text-grey-2x
.hover-border-grey-2x
(hover with mouse)
.hover-bg-grey-3x
.hover-text-grey-3x
.hover-border-grey-3x
(hover with mouse)
.hover-bg-grey-4x
.hover-text-grey-4x
.hover-border-grey-4x
(hover with mouse)
.hover-bg-grey-5x
.hover-text-grey-5x
.hover-border-grey-5x
(hover with mouse)
.hover-bg-grey-6x
.hover-text-grey-6x
.hover-border-grey-6x
(hover with mouse)
.hover-bg-white
.hover-text-white
.hover-border-white
(hover with mouse)
.hover-bg-black
.hover-text-black
.hover-border-black
(hover with mouse)
.hover-bg-red
.hover-text-red
.hover-border-red
(hover with mouse)
.hover-bg-blue
.hover-text-blue
.hover-border-blue
(hover with mouse)
.hover-bg-green
.hover-text-green
.hover-border-green
(hover with mouse)
.hover-opacity-100
(hover with mouse)
.hover-opacity-90
(hover with mouse)
.hover-opacity-80
(hover with mouse)
.hover-opacity-70
(hover with mouse)
.hover-opacity-60
(hover with mouse)
.hover-opacity-50
(hover with mouse)
.hover-opacity-40
(hover with mouse)
.hover-opacity-30
(hover with mouse)
.hover-opacity-20
(hover with mouse)
.hover-opacity-10
(hover with mouse)
.hover-opacity-0
(hover with mouse)
.hover-text-9x
.hover-text-8x
.hover-text-7x
.hover-text-6x
.hover-text-5x
.hover-text-4x
.hover-text-3x
.hover-text-2x
.hover-text-sm
.hover-text-smx
.hover-text-xs
.hover-text-xxs

ack-block-boot

width & heights

.width-2 .height-2
.width-5 .height-5
.width-10 .height-10
.width-15 .height-15
.width-20 .height-20
.width-30 .height-30
.width-40 .height-40
.width-50 .height-50
.width-60 .height-60
.width-70 .height-70
.width-80 .height-80
.width-90 .height-90
.width-100 .height-100
.width-150 .height-150
.width-200 .height-200
.width-300 .height-300
other widths & heights
.width-400 .height-400
.width-600 .height-600
.width-700 .height-700
.width-800 .height-800
.width-900 .height-900
.width-1000 .height-1000
.width-full .height-full
Many other similar undocumented sizes exist for .max-width-*, min-width-*, .max-height-*, min-height-*

rotate

.rotate-45
.rotate-90
.rotate-135
.rotate-180

opacity

.opacity-90
.opacity-80
.opacity-75
.opacity-70
.opacity-60
.opacity-50, .opacity-half
.opacity-40
.opacity-30
.opacity-25, .opacity-third
.opacity-20
.opacity-10

border

.border
.border-1
.border-2
.border-3.border-dashed
.border-4.border-dotted
.border-5
.border-v-0
.border-h-0
.border-top-0
.border-left-0
.border-bottom-0
.border-right-0
.border-v
.border-h
.border-top
.border-right
.border-bottom
.border-left
.border-v-2
.border-h-2
.border-top-2
.border-right-2
.border-bottom-2
.border-left-2
.border-v-3
.border-h-3
.border-top-3
.border-right-3
.border-bottom-3
.border-left-3
.border-v-4
.border-h-4
.border-top-4
.border-right-4
.border-bottom-4
.border-left-4
.border-v-5
.border-h-5
.border-top-5
.border-right-5
.border-bottom-5
.border-left-5
.border-v-6
.border-h-6
.border-top-6
.border-right-6
.border-bottom-6
.border-left-6
.border-v-7
.border-h-7
.border-top-7
.border-right-7
.border-bottom-7
.border-left-7
.border-v-8
.border-h-8
.border-top-8
.border-right-8
.border-bottom-8
.border-left-8

radius

.radius-0
.radius-3
.radius-4
.radius-5
.radius-6
.radius-7
.radius-8
.radius-9
.radius-10
.radius-15
.radius-20
.radius-25
.radius-half
.radius-left-0
.radius-left-3
.radius-left-4
.radius-left-5
.radius-left-6
.radius-left-7
.radius-left-8
.radius-left-9
.radius-left-10
.radius-left-15
.radius-left-20
.radius-left-25
.radius-left-half
.radius-right-0
.radius-right-3
.radius-right-4
.radius-right-5
.radius-right-6
.radius-right-7
.radius-right-8
.radius-right-9
.radius-right-10
.radius-right-15
.radius-right-20
.radius-right-25
.radius-right-half
.radius-top-0
.radius-top-3
.radius-top-4
.radius-top-5
.radius-top-6
.radius-top-7
.radius-top-8
.radius-top-9
.radius-top-10
.radius-top-15
.radius-top-20
.radius-top-25
.radius-top-half
.radius-bottom-0
.radius-bottom-3
.radius-bottom-4
.radius-bottom-5
.radius-bottom-6
.radius-bottom-7
.radius-bottom-8
.radius-bottom-9
.radius-bottom-10
.radius-bottom-15
.radius-bottom-20
.radius-bottom-25
.radius-bottom-half
.radius-10.radius-right-0
.radius-10.radius-left-0
.radius-10.radius-bottom-0
.radius-10.radius-top-0

pad

Includes pad-left, pad-right, pad-h, and pad-v
.pad-xxs
.pad-xs
.pad-sm
.pad
.pad-2x
.pad-3x
.pad-4x

margin

Includes margin-left, margin-right, margin-h, and margin-v
.margin-0
.margin-1
.margin-xxs
.margin-xs
.margin-sm
.margin
.margin-2x
.margin-3x
.margin-4x

child classes

child-margin
child
child
child
child-margin-xxs
child
child
child
child-margin-xs
child
child
child
child-margin-left child-first-margin-left-0
child
child
child
child-pad-xxs
child
child
child
child-pad-xs
child
child
child
child-pad
child
child
child
child-pad-left child-first-pad-left-0
child
child
child
child-radius-5 child-border-3 child-border-primary child-bg-primary
child
child
child
child-radius-5 child-border-3 child-border-success child-bg-success
child
child
child
child-radius-5 child-border-3 child-border-info child-bg-info
child
child
child
child-radius-5 child-border-3 child-border-warning child-bg-warning
child
child
child
child-radius-5 child-border-3 child-border-danger child-bg-danger
child
child
child
child-radius-5 child-border-3 child-border-stable child-bg-stable
child
child
child
child-radius-5 child-border-3 child-border-positive child-bg-positive
child
child
child
child-radius-5 child-border-3 child-border-calm child-bg-calm
child
child
child
child-radius-5 child-border-3 child-border-balanced child-bg-balanced
child
child
child
child-radius-5 child-border-3 child-border-energized child-bg-energized
child
child
child
child-radius-5 child-border-3 child-border-assertive child-bg-assertive
child
child
child
child-radius-5 child-border-3 child-border-royal child-bg-royal
child
child
child
child-radius-5 child-border-3 child-border-dark child-bg-dark
child
child
child
child-radius-5 child-border-3 child-border-grey child-bg-grey
child
child
child
child-radius-5 child-border-3 child-border-grey-2x child-bg-grey-2x
child
child
child
child-radius-5 child-border-3 child-border-grey-3x child-bg-grey-3x
child
child
child
child-radius-5 child-border-3 child-border-grey-4x child-bg-grey-4x
child
child
child
child-radius-5 child-border-3 child-border-grey-5x child-bg-grey-5x
child
child
child
child-radius-5 child-border-3 child-border-grey-6x child-bg-grey-6x
child
child
child
child-radius-5 child-border-3 child-border-white child-bg-white
child
child
child
child-radius-5 child-border-3 child-border-black child-bg-black
child
child
child
child-radius-5 child-border-3 child-border-red child-bg-red
child
child
child
child-radius-5 child-border-3 child-border-blue child-bg-blue
child
child
child
child-radius-5 child-border-3 child-border-green child-bg-green
child
child
child

table

.border-collapse
head1head2head3
col1col2col3
col1col2col3
.table-body-height-overflow
head1head2head3
col1col2col3col4col5col6col7col8
col1col2col3col4col5col6col7col8
col1col2col3col4col5col6col7col8
col1col2col3col4col5col6col7col8
col1col2col3col4col5col6col7col8
col1col2col3col4col5col6col7col8
col1col2col3col4col5col6col7col8
col1col2col3col4col5col6col7col8
col1col2col3col4col5col6col7col8
col1col2col3col4col5col6col7col8
col1col2col3col4col5col6col7col8
col1col2col3col4col5col6col7col8
col1col2col3col4col5col6col7col8
col1col2col3col4col5col6col7col8
col1col2col3col4col5col6col7col8
col1col2col3col4col5col6col7col8
.table-lines
head1head2head3
col1col2col3
col1col2col3
table-pad-xxs
head1head2head3
col1col2col3
.pad-0.pad-0.pad-0
table-pad-xs
head1head2head3
col1col2col3
.pad-0.pad-0.pad-0
table-pad-sm
head1head2head3
col1col2col3
.pad-0.pad-0.pad-0
table-pad
head1head2head3
col1col2col3
.pad-0.pad-0.pad-0
table-pad-md
head1head2head3
col1col2col3
.pad-0.pad-0.pad-0
table-pad-lg
head1head2head3
col1col2col3
.pad-0.pad-0.pad-0

ack-color-boot

.bg-info.border-info
.bg-danger.border-danger
.bg-success.border-success
.bg-primary.border-primary
.bg-warning.border-warning
.bg-grey.border-grey
.bg-grey-2x.border-grey-2x
.bg-grey-3x.border-grey-3x
.bg-grey-4x.border-grey-4x
.bg-grey-5x.border-grey-5x
.bg-grey-6x.border-grey-6x
.bg-assertive.border-assertive
.bg-balanced.border-balanced
.bg-royal.border-royal
.bg-stable.border-stable
.bg-positive.border-positive
.bg-calm.border-calm
.bg-energized.border-energized
.bg-dark.border-dark
.text-positive
.text-calm
.text-balanced
.text-energized
.text-assertive
.text-royal
.text-dark
.text-primary
.text-success
.text-info
.text-warning
.text-danger
.text-grey-lg
.text-grey-md
.text-grey
.text-grey-sm, .text-grey-2x
.text-grey-xs, .text-grey-3x
.text-grey-4x
.text-grey-5x
.text-grey-6x
.text-green,.font-green
.text-orange,.font-orange
.text-red,.font-red
.text-blue,.font-blue
.text-purple,.font-purple
.text-black,.font-black
.text-white,.font-white

border

.border-1-info
.border.border-success
.border-1-warning.border-dashed
.border.border-dotted.border-danger
.border-bottom-1.border-info
.border-bottom-1.border-primary.border-bottom-dotted
.border-bottom-1.border-assertive.border-bottom-dashed

table


.table-lines
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-lines
.table-lines-primary
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-lines
.table-lines-success
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-lines
.table-lines-info
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-lines
.table-lines-warning
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-lines
.table-lines-danger
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-lines
.table-lines-stable
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-lines
.table-lines-positive
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-lines
.table-lines-calm
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-lines
.table-lines-balanced
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-lines
.table-lines-energized
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-lines
.table-lines-assertive
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-lines
.table-lines-royal
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-lines
.table-lines-dark
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-lines
.table-lines-grey
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-lines
.table-lines-grey-2x
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-lines
.table-lines-grey-3x
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-lines
.table-lines-grey-4x
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-lines
.table-lines-grey-5x
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-lines
.table-lines-grey-6x
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-lines
.table-lines-white
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-lines
.table-lines-black
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-lines
.table-lines-red
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-lines
.table-lines-blue
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-lines
.table-lines-green
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-striped
.table-hover
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-striped-primary
.table-hover-primary
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-striped-success
.table-hover-success
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-striped-info
.table-hover-info
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-striped-warning
.table-hover-warning
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-striped-danger
.table-hover-danger
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-striped-stable
.table-hover-stable
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-striped-positive
.table-hover-positive
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-striped-calm
.table-hover-calm
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-striped-balanced
.table-hover-balanced
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-striped-energized
.table-hover-energized
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-striped-assertive
.table-hover-assertive
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-striped-royal
.table-hover-royal
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-striped-dark
.table-hover-dark
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-striped-grey
.table-hover-grey
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-striped-grey-2x
.table-hover-grey-2x
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-striped-grey-3x
.table-hover-grey-3x
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-striped-grey-4x
.table-hover-grey-4x
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-striped-grey-5x
.table-hover-grey-5x
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-striped-grey-6x
.table-hover-grey-6x
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-striped-white
.table-hover-white
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-striped-black
.table-hover-black
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-striped-red
.table-hover-red
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-striped-blue
.table-hover-blue
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
.table-striped-green
.table-hover-green
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
MiXeD ExAmPlE 1
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
MiXeD ExAmPlE 2
head1head2head3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
col1col2col3
Table by Classes
head1
head2
head3
col1
col2
col3
col1
col2
col3
col1
col2
col3
col1
col2
col3
col1
col2
col3
col1
col2
col3

child hover targeting

Mouse over a child box to see its assigned hover class

.child-hover-text-positive.child-hover-bg-positive.child-hover-border-positive
acb
123
xyz
.child-hover-text-calm.child-hover-bg-calm.child-hover-border-calm
acb
123
xyz
.child-hover-text-balanced.child-hover-bg-balanced.child-hover-border-balanced
acb
123
xyz
.child-hover-text-energized.child-hover-bg-energized.child-hover-border-energized
acb
123
xyz
.child-hover-text-assertive.child-hover-bg-assertive.child-hover-border-assertive
acb
123
xyz
.child-hover-text-royal.child-hover-bg-royal.child-hover-border-royal
acb
123
xyz
.child-hover-text-dark.child-hover-bg-dark.child-hover-border-dark
acb
123
xyz
.child-hover-text-primary.child-hover-bg-primary.child-hover-border-primary
acb
123
xyz
.child-hover-text-success.child-hover-bg-success.child-hover-border-success
acb
123
xyz
.child-hover-text-info.child-hover-bg-info.child-hover-border-info
acb
123
xyz
.child-hover-text-warning.child-hover-bg-warning.child-hover-border-warning
acb
123
xyz
.child-hover-text-danger.child-hover-bg-danger.child-hover-border-danger
acb
123
xyz
.child-hover-text-grey.child-hover-bg-grey.child-hover-border-grey
acb
123
xyz
.child-hover-text-grey-2x.child-hover-bg-grey-2x.child-hover-border-grey-2x
acb
123
xyz
.child-hover-text-grey-3x.child-hover-bg-grey-3x.child-hover-border-grey-3x
acb
123
xyz
.child-hover-text-grey-4x.child-hover-bg-grey-4x.child-hover-border-grey-4x
acb
123
xyz
.child-hover-text-grey-5x.child-hover-bg-grey-5x.child-hover-border-grey-5x
acb
123
xyz
.child-hover-text-grey-6x.child-hover-bg-grey-6x.child-hover-border-grey-6x
acb
123
xyz
.child-hover-text-green.child-hover-bg-green.child-hover-border-green
acb
123
xyz
.child-hover-text-orange.child-hover-bg-orange.child-hover-border-orange
acb
123
xyz
.child-hover-text-red.child-hover-bg-red.child-hover-border-red
acb
123
xyz
.child-hover-text-blue.child-hover-bg-blue.child-hover-border-blue
acb
123
xyz
.child-hover-text-purple.child-hover-bg-purple.child-hover-border-purple
acb
123
xyz
.child-hover-text-black.child-hover-bg-black
acb
123
xyz
.child-hover-text-white.child-hover-bg-white
acb
123
xyz

ack-responsive-boot

width guide
xxs > 0 && <= 438
xs > 0 && <= 768
smx >= 576 && < 768
sm >= 768 && < 992
md >= 992 && < 1200
lg >= 1200
visible
hidden
.hide-xxs
visible
hidden
.hide-xs
visible
hidden
.hide-smx
visible
hidden
.hide-sm
visible
hidden
.hide-md
visible
hidden
.hide-lg
visible
hidden
.hide-print
visible
hidden
.hide-gt-xxs
visible
hidden
.hide-gt-xs
visible
hidden
.hide-gt-smx
visible
hidden
.hide-gt-sm
visible
hidden
.hide-gt-md
visible
hidden
.hide-lte-xxs
visible
hidden
.hide-lt-xxs
visible
hidden
.hide-lte-xs
visible
hidden
.hide-lt-xs
visible
hidden
.hide-lte-smx
visible
hidden
.hide-lt-smx
visible
hidden
.hide-lte-sm
visible
hidden
.hide-lt-sm
visible
hidden
.hide-lte-md
visible
hidden
.hide-lt-md

ack-form-boot

  

ack-background-boot

List of classes, not always an example of class demonstratable

.bg-size-cover
.bg-size-contain
.bg-no-repeat
.bg-repeat-x
.bg-repeat-y
.bg-center
.bg-left
.bg-right
.bg-top
.bg-bottom

Additional Classes

List of classes, not always an example of class demonstratable

.touch-scroll
.overflow
.overflow-x
.overflow-y
.overflow-hidden
.overflow-x-hidden
.overflow-y-hidden
NOTE: .overflow, .overflow-x, .overflow-y enable smooth scrolling for iOS Safari by adding -webkit-overflow-scrolling: touch aka the .touch-scroll class

.no-scroll-bars

The bottom overflowing content, has no scroll bars
|*|*|*|*|*|*|*|*|*|*|*========================= |*|*|*|*|*|*|*|*|*|*|*========================= |*|*|*|*|*|*|*|*|*|*|*========================= |*|*|*|*|*|*|*|*|*|*|*========================= |*|*|*|*|*|*|*|*|*|*|*========================= |*|*|*|*|*|*|*|*|*|*|*========================= |*|*|*|*|*|*|*|*|*|*|*========================= =============================================== =============================================== =============================================== =============================================== =============================================== =============================================== ===============================================
A class .no-scroll-bars-ever exists to force all children overflows to have no scroll bars

.code-sample

<pre class="code-sample">
 Here is some of my sample code that won't wrap it's lines.
 <br />
 Unless a line-break appears as part of the code.
</pre>