Helpers pure css helpers, margins, padding, toggle elements etc.

Dimentions

Each class of dimensions could be expanded by the number of steps. For example width-2, max-width-1, padding-right-5.

Class method on what
width-{number} on any tag
min-width-{number} on any tag
max-width-{number} on any tag
height-{number} on any tag
width-geo-{number} on any tag
height-geo-{number} on any tag

Margins and padding

Class method on what
margin-{top/bottom/left/right}-{number} on any tag
margin-{vertical/horizontal}-{number} on any tag
padding-{top/bottom/left/right}-{number} on any tag
padding-{vertical/horizontal}-{number} on any tag

Display

Class method on what work as
show on any tag
hide on any tag
display-inline-block on any tag
display-inline on any tag
display-table on any tag
display-table-cell on any tag
hidden on any tag visibility: hidden
visible on any tag visibility: visible
text-hide on any tag will hide text using text-indent trick
none-event on any tag pointer-events: none
opacity-{0/3/5/7} on any tag pointer-events: none
overflow-hidden on any tag
overflow-scroll on any tag
overflow-auto on any tag

Display with media type

Class method on what media
print-show on any tag print
print-hide on any tag print
speech-show on any tag speech
speech-hide on any tag speech
braille-show on any tag braille
braille-hide on any tag braille
tv-show on any tag tv
tv-hide on any tag tv
not-screen-show on any tag not screen
not-screen-hide on any tag not screen

Responsive breakpoints

Breakpoints:

Class method on what min-width max-width
d- prefix on class @desktop-min-width
t- prefix on class @tablet-portrait-max-width @tablet-max-width
tp- prefix on class @mobile-max-width @tablet-portrait-max-width
m- prefix on class @mobile-portrait-max-width @mobile-max-width
mp- prefix on class 0 @mobile-portrait-max-width

Breakpoints under:

Class method on what min-width max-width
t-under- prefix on class with dimention 0 @tablet-max-width
tp-under- prefix on class with dimention 0 @tablet-portrait-max-width
m-under- prefix on class with dimention 0 @mobile-max-width

Class that support breakpoints:

Supported class under support
{prefix}-width-{number}
{prefix}-margin-vertical-{number}
{prefix}-padding-vertical-{number}
{prefix}-cell-{number/fill/auto} in grid system
{prefix}-show
{prefix}-hide
{prefix}-under-showshow all width under breakpoint width
{prefix}-under-hidehide all width under breakpoint width
{prefix}-display-{table/table-cell/block/inline-block/none}
{prefix}-under-display-{table/table-cell/block/inline-block/none}change display for all width under breakpoint width
{prefix}-visible
{prefix}-hidden
{prefix}-text-hide

Items

Toogle

Setup #

core less/formir/setup/core.less #

        
          // Layout Unit
@layout-unit: px;
@layout-steps: 8;
@layout-factor: 0.3;
@layout-geometric-step: @base-geometric-step;
@layout-width: @content-max-width;
@layout-height: @content-max-height;

// Rensponsive Web Design
@desktop-min-width: 1280px;
@tablet-max-width: 1024px;
@tablet-portrait-max-width: 768px;
@mobile-max-width: 568px;
@mobile-portrait-max-width: 320px;

// Items
@items-gutter: 15px;

classes less/formir/setup/classes.less #

        
          @width: width;
@height: height;

@width-geo: width-geo;
@height-geo: height-geo;

@margin: margin;
@margin-top: margin-top;
@margin-bottom: margin-bottom;
@margin-left: margin-left;
@margin-right: margin-right;
@margin-horizontal: margin-horizontal;
@margin-vertical: margin-vertical;

@padding: padding;
@padding-top: padding-top;
@padding-bottom: padding-bottom;
@padding-left: padding-left;
@padding-right: padding-right;
@padding-horizontal: padding-horizontal;
@padding-vertical: padding-vertical;

@active: active;
@disabled: disabled;

// Align
@text-center: text-center;
@text-right: text-right;
@text-left: text-left;
@text-justify: text-justify;

@float-right: float-right;
@float-left: float-left;

// Toggle
@toggle: toggle;
@toggle-label: toggle-label;
@toggle-show: toggle-show;
@toggle-block: toggle-block;
@toggle-show: toggle-show;
@toggle-flex: toggle-flex;
@toggle-inline: toggle-inline;
@toggle-inline-block: toggle-inline-block;
@toggle-none: toggle-none;
@toggle-hide: toggle-hide;

@mobile-toggle: mobile-toggle;
@mobile-toggle-label: mobile-toggle-label;
@mobile-toggle-hide: mobile-toggle-hide;
@mobile-toggle-show: mobile-toggle-show;

//// Rensposive dimention
@m: m;  //mobile
@mp: mp; // mobile portable
@t: t; // tablet
@tp: tp; // tablet portable
@d: d; // desktip

@under: under;

// Layout
@content-holder: content-holder;
@body-content: body-content;

@center-vertically: center-vertically;
@horizontally: horizontally;