ack-css-boot v3.0.13

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.

🚀 review examples here

Many commonly used short-hand classes, that are found in Ionic and Bootstrap, can be found here.

Table of Contents

• Usage and Examples
• Primary Style File
• Resources

Usage and Examples

Learn about css short-hand classes such as .pad, .margin, .text-lg, and more...

🚀 review examples here

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

scss/ack-css-boot.scss

@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
  • scss/ack-text-boot.scss
• ack-flex-boot
  • scss/ack-flex-boot.scss
• ack-gap-boot
  • scss/ack-gap-boot.scss
• ack-color-boot
  • scss/ack-color-boot.scss
• ack-block-boot
  • scss/ack-block-boot.scss
• ack-width-height
  • scss/ack-width-height.scss
• ack-position-boot
  • scss/ack-position-boot.scss
• ack-form-boot
  • scss/ack-form-boot.scss
• 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
  • scss/ack-overrides.scss

Compiled versions, .css files, can be found in ack-cssboot/dist/