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.
Many commonly used short-hand classes, that are found in Ionic and Bootstrap, can be found here.
Table of Contents
Usage and Examples
Learn about css short-hand classes such as .pad, .margin, .text-lg, and more...
All examples seen below, are written in Sass and then compiled to css in the /dist folder.
NOTE: ack-css-boot makes every attempt to avoid using the !important declaration. It is highly advised that the ack-css-boot.css file, be the LAST stylesheet file loaded in order to have short-hand css rules override other stylesheet rules.
Primary Style File
@import "./ack-text-boot";
@import "./ack-flex-boot";
@import "./ack-gap-boot";
@import "./ack-color-boot";
@import "./ack-block-boot";
@import "./ack-width-height";
@import "./ack-position-boot";
@import "./ack-form-boot";
@import "./ack-responsive-boot";
Development
The scss files do not take full advantage of extending and advanced functionality. The way these style classes override each other is too sensitive to have a compiler alter the end result.
Resources
Quick links to examples and source code
- ack-text-boot
- ack-flex-boot
- ack-gap-boot
- ack-color-boot
- ack-block-boot
- ack-width-height
- ack-position-boot
- ack-form-boot
-
ack-responsive-boot
- scss/ack-responsive-boot.scss
- Screen size to size name map
- xxs > 0 && <= 438
- xs > 0 && <= 768
- smx >=576 && < 768
- sm >= 768 && < 992
- md >= 992 && < 1200
- lg >= 1200
- The following classes, allow for css width/height transistion animations
- .hide-width-
- .hide-height-
- .hide-max-width-
- .hide-max-height-
- ack-overrides
Compiled versions, .css files, can be found in ack-cssboot/dist/