Skip to content

Instantly share code, notes, and snippets.

@bassjobsen

bassjobsen/Helpers.less

Last active August 29, 2015 14:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bassjobsen/2b556de8d235c6331a52 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bassjobsen/2b556de8d235c6331a52 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Muah revised this gist Jan 5, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions Helpers.less
    View file
    Original file line number Diff line number Diff line change
    @@ -83,11 +83,11 @@
    }

    .divider-vertical(@h:100, @opa:1, @mar:15) {
    height: unit((@h/16),rem);
    height: unit(@h/16,rem);
    border-left: 1px solid gray;
    float: left;
    opacity: @opa;
    margin: 0 unit((@mar/16),rem);
    margin: 0 unit(@mar/16,rem);
    }

    .no-border {
  2. Muah revised this gist Jan 5, 2015. 1 changed file with 42 additions and 4459 deletions.
    4,501 changes: 42 additions & 4,459 deletions Helpers.less
    View file
    42 additions, 4,459 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
  3. Muah revised this gist Jan 4, 2015. 1 changed file with 4171 additions and 1 deletion.
    4,172 changes: 4,171 additions & 1 deletion Helpers.less
    View file
    4,171 additions, 1 deletion not shown because the diff is too large. Please use a local Git client to view these changes.
  4. Muah revised this gist Jan 4, 2015. 1 changed file with 3 additions and 6 deletions.
    9 changes: 3 additions & 6 deletions Helpers.less
    View file
    Original file line number Diff line number Diff line change
    @@ -15,7 +15,6 @@
    @lg: ~'(min-width: @{screen-lg-min})'; // 1200 and up 



    // for text-hide
    //=============================================================================

    @@ -60,7 +59,7 @@
    .sr-only-focusable();
    }

    .divider-vertical(@h:100, @opa:1, @mar:15) {
    .divider-vertical(@h:100,@opa:1,@mar:15) {
    height: unit((@h/16),rem);
    border-left: 1px solid gray;
    float: left;
    @@ -161,8 +160,6 @@
    margin-bottom: 0 !important;
    }

    //========================================

    .no-padding-right {
    padding-right: 0 !important;
    }
    @@ -215,7 +212,7 @@

    .align-p(@w, @h) {
    width: -(unit((@w/2)/16,rem));
    height: -(unit((@w/2)/16,rem));
    height: -(unit((@h/2)/16,rem));
    margin: auto;
    position: absolute;
    left: 0;
    @@ -602,7 +599,7 @@


    // col-?-?.5 \\ we cant use (.) so we use (-) instead
    // the columns should clear-fix automatically now, so no need for the clear-fix div
    // the columns should clear-fix automatically now, so no need for the clear-fix div
    //=============================================================================

    @media @lg
  5. Muah revised this gist Jan 4, 2015. 1 changed file with 301 additions and 2 deletions.
    303 changes: 301 additions & 2 deletions Helpers.less
    View file
    Original file line number Diff line number Diff line change
    @@ -188,7 +188,7 @@
    }


    // vertical-align by (http://zerosixthree.se/)
    // (http://zerosixthree.se/)
    // add (align-main) to the parent element & v-/c-align to childs
    //=============================================================================

    @@ -602,6 +602,7 @@


    // col-?-?.5 \\ we cant use (.) so we use (-) instead
    // the columns should clear-fix automatically now, so no need for the clear-fix div
    //=============================================================================

    @media @lg
    @@ -1786,4 +1787,302 @@
    }

    .col-xxs-offset-4 {
    margin-left: percentage((
    margin-left: percentage((4 / 12));
    }

    //=================================================================

    .col-xxs-4-5 {
    width: percentage((4.5 / 12));
    }

    .col-xxs-pull-4-5 {
    right: percentage((4.5 / 12));
    }

    .col-xxs-push-4-5 {
    left: percentage((4.5 / 12));
    }

    .col-xxs-offset-4-5 {
    margin-left: percentage((4.5 / 12));
    }

    //=================================================================

    .col-xxs-5 {
    width: percentage((5 / 12));
    }

    .col-xxs-pull-5 {
    right: percentage((5 / 12));
    }

    .col-xxs-push-5 {
    left: percentage((5 / 12));
    }

    .col-xxs-offset-5 {
    margin-left: percentage((5 / 12));
    }

    //=================================================================

    .col-xxs-5-5 {
    width: percentage((5.5 / 12));
    }

    .col-xxs-pull-5-5 {
    right: percentage((5.5 / 12));
    }

    .col-xxs-push-5-5 {
    left: percentage((5.5 / 12));
    }

    .col-xxs-offset-5-5 {
    margin-left: percentage((5.5 / 12));
    }

    //=================================================================

    .col-xxs-6 {
    width: percentage((6 / 12));
    }

    .col-xxs-pull-6 {
    right: percentage((6 / 12));
    }

    .col-xxs-push-6 {
    left: percentage((6 / 12));
    }

    .col-xxs-offset-6 {
    margin-left: percentage((6 / 12));
    }

    //=================================================================

    .col-xxs-6-5 {
    width: percentage((6.5 / 12));
    }

    .col-xxs-pull-6-5 {
    right: percentage((6.5 / 12));
    }

    .col-xxs-push-6-5 {
    left: percentage((6.5 / 12));
    }

    .col-xxs-offset-6-5 {
    margin-left: percentage((6.5 / 12));
    }

    //=================================================================

    .col-xxs-7 {
    width: percentage((7 / 12));
    }

    .col-xxs-pull-7 {
    right: percentage((7 / 12));
    }

    .col-xxs-push-7 {
    left: percentage((7 / 12));
    }

    .col-xxs-offset-7 {
    margin-left: percentage((7 / 12));
    }

    //=================================================================

    .col-xxs-7-5 {
    width: percentage((7.5 / 12));
    }

    .col-xxs-pull-7-5 {
    right: percentage((7.5 / 12));
    }

    .col-xxs-push-7-5 {
    left: percentage((7.5 / 12));
    }

    .col-xxs-offset-7-5 {
    margin-left: percentage((7.5 / 12));
    }

    //=================================================================

    .col-xxs-8 {
    width: percentage((8 / 12));
    }

    .col-xxs-pull-8 {
    right: percentage((8 / 12));
    }

    .col-xxs-push-8 {
    left: percentage((8 / 12));
    }

    .col-xxs-offset-8 {
    margin-left: percentage((8 / 12));
    }

    //=================================================================

    .col-xxs-8-5 {
    width: percentage((8.5 / 12));
    }

    .col-xxs-pull-8-5 {
    right: percentage((8.5 / 12));
    }

    .col-xxs-push-8-5 {
    left: percentage((8.5 / 12));
    }

    .col-xxs-offset-8-5 {
    margin-left: percentage((8.5 / 12));
    }

    //=================================================================

    .col-xxs-9 {
    width: percentage((9 / 12));
    }

    .col-xxs-pull-9 {
    right: percentage((9 / 12));
    }

    .col-xxs-push-9 {
    left: percentage((9 / 12));
    }

    .col-xxs-offset-9 {
    margin-left: percentage((9 / 12));
    }

    //=================================================================

    .col-xxs-10 {
    width: percentage((10 / 12));
    }

    .col-xxs-pull-10 {
    right: percentage((10 / 12));
    }

    .col-xxs-push-10 {
    left: percentage((10 / 12));
    }

    .col-xxs-offset-10 {
    margin-left: percentage((10 / 12));
    }

    //=================================================================

    .col-xxs-11 {
    width: percentage((11 / 12));
    }

    .col-xxs-pull-11 {
    right: percentage((11 / 12));
    }

    .col-xxs-push-11 {
    left: percentage((11 / 12));
    }

    .col-xxs-offset-11 {
    margin-left: percentage((11 / 12));
    }

    //=================================================================

    .col-xxs-12 {
    width: percentage((12 / 12));
    }

    .col-xxs-pull-12 {
    right: percentage((12 / 12));
    }

    .col-xxs-push-12 {
    left: percentage((12 / 12));
    }

    .col-xxs-offset-12 {
    margin-left: percentage((12 / 12));
    }

    }


    // visible & hidden
    // dont use the .visible-? ,instead use the .visible-?-?
    //=============================================================================


    // for xs
    .visible-xs {
    @media @xs {
    .responsive-visibility();
    }
    }
    .visible-xs-block {
    @media @xs {
    display: block !important;
    }
    }
    .visible-xs-inline {
    @media @xs {
    display: inline !important;
    }
    }
    .visible-xs-inline-block {
    @media @xs {
    display: inline-block !important;
    }
    }
    .hidden-xs {
    @media @xs {
    .responsive-invisibility();
    }
    }


    // for xxs
    .visible-xxs {
    @media @xxs {
    .responsive-visibility();
    }
    }
    .visible-xxs-block {
    @media @xxs {
    display: block !important;
    }
    }
    .visible-xxs-inline {
    @media @xxs {
    display: inline !important;
    }
    }
    .visible-xxs-inline-block {
    @media @xxs {
    display: inline-block !important;
    }
    }
    .hidden-xxs {
    @media @xxs {
    .responsive-invisibility();
    }
    }
  6. Muah revised this gist Jan 4, 2015. 1 changed file with 9 additions and 9 deletions.
    18 changes: 9 additions & 9 deletions Helpers.less
    View file
    Original file line number Diff line number Diff line change
    @@ -52,14 +52,22 @@
    }


    // for sr-only
    // Misc
    //=============================================================================

    .sr-skip {
    .sr-only();
    .sr-only-focusable();
    }

    .divider-vertical(@h:100, @opa:1, @mar:15) {
    height: unit((@h/16),rem);
    border-left: 1px solid gray;
    float: left;
    opacity: @opa;
    margin: 0 unit((@mar/16),rem);
    }


    // Display
    //=============================================================================
    @@ -120,14 +128,6 @@
    // padding & margin reset ,padding is for (cont & col), margin is for (row)
    //=============================================================================

    .divider-vertical(@h:100, @opa:1, @mar:15) {
    height: unit((@h/16),rem);
    border-left: 1px solid gray;
    float: left;
    opacity: @opa;
    margin: 0 unit((@mar/16),rem);
    }

    .no-padding {
    padding-right: 0 !important;
    padding-left: 0 !important;
  7. Muah revised this gist Jan 4, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Helpers.less
    View file
    Original file line number Diff line number Diff line change
    @@ -125,7 +125,7 @@
    border-left: 1px solid gray;
    float: left;
    opacity: @opa;
    margin: 0 unit(@mar,px);
    margin: 0 unit((@mar/16),rem);
    }

    .no-padding {
  8. Muah revised this gist Jan 4, 2015. 1 changed file with 2 additions and 300 deletions.
    302 changes: 2 additions & 300 deletions Helpers.less
    View file
    Original file line number Diff line number Diff line change
    @@ -121,7 +121,7 @@
    //=============================================================================

    .divider-vertical(@h:100, @opa:1, @mar:15) {
    height: unit(@h,px);
    height: unit((@h/16),rem);
    border-left: 1px solid gray;
    float: left;
    opacity: @opa;
    @@ -1786,302 +1786,4 @@
    }

    .col-xxs-offset-4 {
    margin-left: percentage((4 / 12));
    }

    //=================================================================

    .col-xxs-4-5 {
    width: percentage((4.5 / 12));
    }

    .col-xxs-pull-4-5 {
    right: percentage((4.5 / 12));
    }

    .col-xxs-push-4-5 {
    left: percentage((4.5 / 12));
    }

    .col-xxs-offset-4-5 {
    margin-left: percentage((4.5 / 12));
    }

    //=================================================================

    .col-xxs-5 {
    width: percentage((5 / 12));
    }

    .col-xxs-pull-5 {
    right: percentage((5 / 12));
    }

    .col-xxs-push-5 {
    left: percentage((5 / 12));
    }

    .col-xxs-offset-5 {
    margin-left: percentage((5 / 12));
    }

    //=================================================================

    .col-xxs-5-5 {
    width: percentage((5.5 / 12));
    }

    .col-xxs-pull-5-5 {
    right: percentage((5.5 / 12));
    }

    .col-xxs-push-5-5 {
    left: percentage((5.5 / 12));
    }

    .col-xxs-offset-5-5 {
    margin-left: percentage((5.5 / 12));
    }

    //=================================================================

    .col-xxs-6 {
    width: percentage((6 / 12));
    }

    .col-xxs-pull-6 {
    right: percentage((6 / 12));
    }

    .col-xxs-push-6 {
    left: percentage((6 / 12));
    }

    .col-xxs-offset-6 {
    margin-left: percentage((6 / 12));
    }

    //=================================================================

    .col-xxs-6-5 {
    width: percentage((6.5 / 12));
    }

    .col-xxs-pull-6-5 {
    right: percentage((6.5 / 12));
    }

    .col-xxs-push-6-5 {
    left: percentage((6.5 / 12));
    }

    .col-xxs-offset-6-5 {
    margin-left: percentage((6.5 / 12));
    }

    //=================================================================

    .col-xxs-7 {
    width: percentage((7 / 12));
    }

    .col-xxs-pull-7 {
    right: percentage((7 / 12));
    }

    .col-xxs-push-7 {
    left: percentage((7 / 12));
    }

    .col-xxs-offset-7 {
    margin-left: percentage((7 / 12));
    }

    //=================================================================

    .col-xxs-7-5 {
    width: percentage((7.5 / 12));
    }

    .col-xxs-pull-7-5 {
    right: percentage((7.5 / 12));
    }

    .col-xxs-push-7-5 {
    left: percentage((7.5 / 12));
    }

    .col-xxs-offset-7-5 {
    margin-left: percentage((7.5 / 12));
    }

    //=================================================================

    .col-xxs-8 {
    width: percentage((8 / 12));
    }

    .col-xxs-pull-8 {
    right: percentage((8 / 12));
    }

    .col-xxs-push-8 {
    left: percentage((8 / 12));
    }

    .col-xxs-offset-8 {
    margin-left: percentage((8 / 12));
    }

    //=================================================================

    .col-xxs-8-5 {
    width: percentage((8.5 / 12));
    }

    .col-xxs-pull-8-5 {
    right: percentage((8.5 / 12));
    }

    .col-xxs-push-8-5 {
    left: percentage((8.5 / 12));
    }

    .col-xxs-offset-8-5 {
    margin-left: percentage((8.5 / 12));
    }

    //=================================================================

    .col-xxs-9 {
    width: percentage((9 / 12));
    }

    .col-xxs-pull-9 {
    right: percentage((9 / 12));
    }

    .col-xxs-push-9 {
    left: percentage((9 / 12));
    }

    .col-xxs-offset-9 {
    margin-left: percentage((9 / 12));
    }

    //=================================================================

    .col-xxs-10 {
    width: percentage((10 / 12));
    }

    .col-xxs-pull-10 {
    right: percentage((10 / 12));
    }

    .col-xxs-push-10 {
    left: percentage((10 / 12));
    }

    .col-xxs-offset-10 {
    margin-left: percentage((10 / 12));
    }

    //=================================================================

    .col-xxs-11 {
    width: percentage((11 / 12));
    }

    .col-xxs-pull-11 {
    right: percentage((11 / 12));
    }

    .col-xxs-push-11 {
    left: percentage((11 / 12));
    }

    .col-xxs-offset-11 {
    margin-left: percentage((11 / 12));
    }

    //=================================================================

    .col-xxs-12 {
    width: percentage((12 / 12));
    }

    .col-xxs-pull-12 {
    right: percentage((12 / 12));
    }

    .col-xxs-push-12 {
    left: percentage((12 / 12));
    }

    .col-xxs-offset-12 {
    margin-left: percentage((12 / 12));
    }

    }


    // visible & hidden
    // dont use the .visible-? ,instead use the .visible-?-?
    //=============================================================================


    // for xs
    .visible-xs {
    @media @xs {
    .responsive-visibility();
    }
    }
    .visible-xs-block {
    @media @xs {
    display: block !important;
    }
    }
    .visible-xs-inline {
    @media @xs {
    display: inline !important;
    }
    }
    .visible-xs-inline-block {
    @media @xs {
    display: inline-block !important;
    }
    }
    .hidden-xs {
    @media @xs {
    .responsive-invisibility();
    }
    }


    // for xxs
    .visible-xxs {
    @media @xxs {
    .responsive-visibility();
    }
    }
    .visible-xxs-block {
    @media @xxs {
    display: block !important;
    }
    }
    .visible-xxs-inline {
    @media @xxs {
    display: inline !important;
    }
    }
    .visible-xxs-inline-block {
    @media @xxs {
    display: inline-block !important;
    }
    }
    .hidden-xxs {
    @media @xxs {
    .responsive-invisibility();
    }
    }
    margin-left: percentage((
  9. Muah renamed this gist Jan 4, 2015. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → Helpers.less
    View file
    File renamed without changes.
  10. Muah created this gist Jan 4, 2015.
    2,087 changes: 2,087 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2087 @@
    // for Media queries breakpoints
    // Ex > @media @xs {...}
    //=============================================================================

    @screen-xxs-max: (@screen-xs-min - 1); // 479
    // @screen-xs-max: (@screen-sm-min - 1); // 767
    // @screen-sm-max: (@screen-md-min - 1); // 991
    // @screen-md-max: (@screen-lg-min - 1); // 1199
    // @screen-lg-min: 1200px;

    @xxs: ~'(max-width: @{screen-xxs-max})'; // less than 479 
    @xs: ~'(min-width: @{screen-xs-min}) and (max-width: @{screen-xs-max})'; // 480 to 767 
    @sm: ~'(min-width: @{screen-sm-min}) and (max-width: @{screen-sm-max})'; // 768 to 991 
    @md: ~'(min-width: @{screen-md-min}) and (max-width: @{screen-md-max})'; // 992 to 1199 
    @lg: ~'(min-width: @{screen-lg-min})'; // 1200 and up 



    // for text-hide
    //=============================================================================

    .image-replace(@url, @width, @height ) {
    display: block;
    width: @width;
    height: @height;
    background: url(@url) no-repeat left top;
    .text-hide();
    }


    // for text-hide with retina image
    // EX > .img-replacement-retina ("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
    //=============================================================================

    .image-replace-retina(@url, @width, @height) {
    .text-hide();
    .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
    background-image: url("@{file-1x}");

    @media
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and ( min--moz-device-pixel-ratio: 2),
    only screen and ( -o-min-device-pixel-ratio: 2/1),
    only screen and ( min-device-pixel-ratio: 2),
    only screen and ( min-resolution: 192dpi),
    only screen and ( min-resolution: 2dppx)
    {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
    }
    }
    }


    // for sr-only
    //=============================================================================

    .sr-skip {
    .sr-only();
    .sr-only-focusable();
    }


    // Display
    //=============================================================================

    .dis-table {
    display:table;
    }

    .dis-cell {
    display: table-cell;
    }

    .dis-row {
    display: table-row;
    }

    .inline {
    display: inline;
    }

    .inline-block {
    display: inline-block;
    }

    // Modal Fades
    //=============================================================================

    .modal {
    &.fade-left {
    left: -25%;
    transition: opacity 0.3s linear, left 0.3s ease-out;
    &.in-left {
    left: 50%;
    }
    }
    }

    .modal {
    &.fade-right {
    left: 200%;
    transition: opacity 0.3s linear, left 0.3s ease-out;
    &.in-right {
    left: 50%;
    }
    }
    }

    .modal {
    &.fade-bottom {
    top: 200%;
    transition: opacity 0.3s linear, top 0.3s ease-out;
    &.in-bottom {
    top: 50%;
    }
    }
    }

    // padding & margin reset ,padding is for (cont & col), margin is for (row)
    //=============================================================================

    .divider-vertical(@h:100, @opa:1, @mar:15) {
    height: unit(@h,px);
    border-left: 1px solid gray;
    float: left;
    opacity: @opa;
    margin: 0 unit(@mar,px);
    }

    .no-padding {
    padding-right: 0 !important;
    padding-left: 0 !important;
    }
    .no-padding-v {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    }

    .no-margin {
    margin-right: 0 !important;
    margin-left: 0 !important;
    }
    .no-margin-v {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    }

    //========================================

    .no-margin-right {
    margin-right: 0 !important;
    }
    .no-margin-left {
    margin-left: 0 !important;
    }
    .no-margin-top {
    margin-top: 0 !important;
    }
    .no-margin-bottom {
    margin-bottom: 0 !important;
    }

    //========================================

    .no-padding-right {
    padding-right: 0 !important;
    }
    .no-padding-left {
    padding-left: 0 !important;
    }
    .no-padding-top {
    padding-top: 0 !important;
    }
    .no-padding-bottom {
    padding-bottom: 0 !important;
    }

    //========================================

    .no-border {
    border: none !important;
    border-radius: 0 !important;
    }

    .no-shadow {
    box-shadow: none !important;
    }


    // vertical-align by (http://zerosixthree.se/)
    // add (align-main) to the parent element & v-/c-align to childs
    //=============================================================================

    .align-main {
    transform-style: preserve-3d;
    }

    .v-align {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    }

    .c-align {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    }

    // position absolute H&V center align ,you have to give a width & height or padding ,its important to have a size or it will be 100%
    // both works but its better to use the 2nd
    //=============================================================================

    .align-p(@w, @h) {
    width: -(unit((@w/2)/16,rem));
    height: -(unit((@w/2)/16,rem));
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    }

    .align-p2(@w, @h) {
    width: unit((@w/16),rem);
    height: unit((@h/16),rem);
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -(unit((@w/2)/16,rem));
    margin-top: -(unit((@h/2)/16,rem));
    }


    // margin options
    //=============================================================================

    .space-auto {
    margin: 0 auto;
    }
    .space-top-10 {
    margin-top: unit(10/16,rem);
    }
    .space-top-15 {
    margin-top: unit(15/16,rem);
    }
    .space-top-20 {
    margin-top: unit(20/16,rem);
    }
    .space-top-25 {
    margin-top: unit(25/16,rem);
    }
    .space-top-30 {
    margin-top: unit(30/16,rem);
    }
    .space-top-35 {
    margin-top: unit(35/16,rem);
    }
    .space-top-40 {
    margin-top: unit(40/16,rem);
    }
    .space-top-45 {
    margin-top: unit(45/16,rem);
    }
    .space-top-50 {
    margin-top: unit(50/16,rem);
    }
    .space-top-60 {
    margin-top: unit(60/16,rem);
    }
    .space-top-70 {
    margin-top: unit(70/16,rem);
    }
    .space-top-80 {
    margin-top: unit(80/16,rem);
    }
    .space-top-90 {
    margin-top: unit(90/16,rem);
    }
    .space-top-100 {
    margin-top: unit(100/16,rem);
    }

    //========================================

    .space-bottom-10 {
    margin-bottom: unit(10/16,rem);
    }
    .space-bottom-15 {
    margin-bottom: unit(15/16,rem);
    }
    .space-bottom-20 {
    margin-bottom: unit(20/16,rem);
    }
    .space-bottom-25 {
    margin-bottom: unit(25/16,rem);
    }
    .space-bottom-30 {
    margin-bottom: unit(30/16,rem);
    }
    .space-bottom-35 {
    margin-bottom: unit(35/16,rem);
    }
    .space-bottom-40 {
    margin-bottom: unit(40/16,rem);
    }
    .space-bottom-45 {
    margin-bottom: unit(45/16,rem);
    }
    .space-bottom-50 {
    margin-bottom: unit(50/16,rem);
    }
    .space-bottom-60 {
    margin-bottom: unit(60/16,rem);
    }
    .space-bottom-70 {
    margin-bottom: unit(70/16,rem);
    }
    .space-bottom-80 {
    margin-bottom: unit(80/16,rem);
    }
    .space-bottom-90 {
    margin-bottom: unit(90/16,rem);
    }
    .space-bottom-100 {
    margin-bottom: unit(100/16,rem);
    }

    //========================================

    .space-right-10 {
    margin-right: unit(10/16,rem);
    }
    .space-right-15 {
    margin-right: unit(15/16,rem);
    }
    .space-right-20 {
    margin-right: unit(20/16,rem);
    }
    .space-right-25 {
    margin-right: unit(25/16,rem);
    }
    .space-right-30 {
    margin-right: unit(30/16,rem);
    }
    .space-right-35 {
    margin-right: unit(35/16,rem);
    }
    .space-right-40 {
    margin-right: unit(40/16,rem);
    }
    .space-right-45 {
    margin-right: unit(45/16,rem);
    }
    .space-right-50 {
    margin-right: unit(50/16,rem);
    }
    .space-right-60 {
    margin-right: unit(60/16,rem);
    }
    .space-right-70 {
    margin-right: unit(70/16,rem);
    }
    .space-right-80 {
    margin-right: unit(80/16,rem);
    }
    .space-right-90 {
    margin-right: unit(90/16,rem);
    }
    .space-right-100 {
    margin-right: unit(100/16,rem);
    }

    //========================================

    .space-left-10 {
    margin-left: unit(10/16,rem);
    }
    .space-left-15 {
    margin-left: unit(15/16,rem);
    }
    .space-left-20 {
    margin-left: unit(20/16,rem);
    }
    .space-left-25 {
    margin-left: unit(25/16,rem);
    }
    .space-left-30 {
    margin-left: unit(30/16,rem);
    }
    .space-left-35 {
    margin-left: unit(35/16,rem);
    }
    .space-left-40 {
    margin-left: unit(40/16,rem);
    }
    .space-left-45 {
    margin-left: unit(45/16,rem);
    }
    .space-left-50 {
    margin-left: unit(50/16,rem);
    }
    .space-left-60 {
    margin-left: unit(60/16,rem);
    }
    .space-left-70 {
    margin-left: unit(70/16,rem);
    }
    .space-left-80 {
    margin-left: unit(80/16,rem);
    }
    .space-left-90 {
    margin-left: unit(90/16,rem);
    }
    .space-left-100 {
    margin-left: unit(100/16,rem);
    }

    // padding options
    //=============================================================================

    .gap-top-10 {
    padding-top: unit(10/16,rem);
    }
    .gap-top-15 {
    padding-top: unit(15/16,rem);
    }
    .gap-top-20 {
    padding-top: unit(20/16,rem);
    }
    .gap-top-25 {
    padding-top: unit(25/16,rem);
    }
    .gap-top-30 {
    padding-top: unit(30/16,rem);
    }
    .gap-top-35 {
    padding-top: unit(35/16,rem);
    }
    .gap-top-40 {
    padding-top: unit(40/16,rem);
    }
    .gap-top-45 {
    padding-top: unit(45/16,rem);
    }
    .gap-top-50 {
    padding-top: unit(50/16,rem);
    }
    .gap-top-60 {
    padding-top: unit(60/16,rem);
    }
    .gap-top-70 {
    padding-top: unit(70/16,rem);
    }
    .gap-top-80 {
    padding-top: unit(80/16,rem);
    }
    .gap-top-90 {
    padding-top: unit(90/16,rem);
    }
    .gap-top-100 {
    padding-top: unit(100/16,rem);
    }

    //========================================

    .gap-bottom-10 {
    padding-bottom: unit(10/16,rem);
    }
    .gap-bottom-15 {
    padding-bottom: unit(15/16,rem);
    }
    .gap-bottom-20 {
    padding-bottom: unit(20/16,rem);
    }
    .gap-bottom-25 {
    padding-bottom: unit(25/16,rem);
    }
    .gap-bottom-30 {
    padding-bottom: unit(30/16,rem);
    }
    .gap-bottom-35 {
    padding-bottom: unit(35/16,rem);
    }
    .gap-bottom-40 {
    padding-bottom: unit(40/16,rem);
    }
    .gap-bottom-45 {
    padding-bottom: unit(45/16,rem);
    }
    .gap-bottom-50 {
    padding-bottom: unit(50/16,rem);
    }
    .gap-bottom-60 {
    padding-bottom: unit(60/16,rem);
    }
    .gap-bottom-70 {
    padding-bottom: unit(70/16,rem);
    }
    .gap-bottom-80 {
    padding-bottom: unit(80/16,rem);
    }
    .gap-bottom-90 {
    padding-bottom: unit(90/16,rem);
    }
    .gap-bottom-100 {
    padding-bottom: unit(100/16,rem);
    }

    //========================================

    .gap-right-10 {
    padding-right: unit(10/16,rem);
    }
    .gap-right-15 {
    padding-right: unit(15/16,rem);
    }
    .gap-right-20 {
    padding-right: unit(20/16,rem);
    }
    .gap-right-25 {
    padding-right: unit(25/16,rem);
    }
    .gap-right-30 {
    padding-right: unit(30/16,rem);
    }
    .gap-right-35 {
    padding-right: unit(35/16,rem);
    }
    .gap-right-40 {
    padding-right: unit(40/16,rem);
    }
    .gap-right-45 {
    padding-right: unit(45/16,rem);
    }
    .gap-right-50 {
    padding-right: unit(50/16,rem);
    }
    .gap-right-60 {
    padding-right: unit(60/16,rem);
    }
    .gap-right-70 {
    padding-right: unit(70/16,rem);
    }
    .gap-right-80 {
    padding-right: unit(80/16,rem);
    }
    .gap-right-90 {
    padding-right: unit(90/16,rem);
    }
    .gap-right-100 {
    padding-right: unit(100/16,rem);
    }

    //========================================

    .gap-left-10 {
    padding-left: unit(10/16,rem);
    }
    .gap-left-15 {
    padding-left: unit(15/16,rem);
    }
    .gap-left-20 {
    padding-left: unit(20/16,rem);
    }
    .gap-left-25 {
    padding-left: unit(25/16,rem);
    }
    .gap-left-30 {
    padding-left: unit(30/16,rem);
    }
    .gap-left-35 {
    padding-left: unit(35/16,rem);
    }
    .gap-left-40 {
    padding-left: unit(40/16,rem);
    }
    .gap-left-45 {
    padding-left: unit(45/16,rem);
    }
    .gap-left-50 {
    padding-left: unit(50/16,rem);
    }
    .gap-left-60 {
    padding-left: unit(60/16,rem);
    }
    .gap-left-70 {
    padding-left: unit(70/16,rem);
    }
    .gap-left-80 {
    padding-left: unit(80/16,rem);
    }
    .gap-left-90 {
    padding-left: unit(90/16,rem);
    }
    .gap-left-100 {
    padding-left: unit(100/16,rem);
    }


    // col-?-?.5 \\ we cant use (.) so we use (-) instead
    //=============================================================================

    @media @lg
    {
    // ============ clear fix ===============
    .col-md-1:nth-child(12n+1),
    .col-md-2:nth-child(6n+1),
    .col-md-3:nth-child(4n+1),
    .col-md-4:nth-child(3n+1),
    .col-md-6:nth-child(2n+1),
    .col-sm-1:nth-child(12n+1),
    .col-sm-2:nth-child(6n+1),
    .col-sm-3:nth-child(4n+1),
    .col-sm-4:nth-child(3n+1),
    .col-sm-6:nth-child(2n+1),
    .col-xs-1:nth-child(12n+1),
    .col-xs-2:nth-child(6n+1),
    .col-xs-3:nth-child(4n+1),
    .col-xs-4:nth-child(3n+1),
    .col-xs-6:nth-child(2n+1),
    .col-xxs-1:nth-child(12n+1),
    .col-xxs-2:nth-child(6n+1),
    .col-xxs-3:nth-child(4n+1),
    .col-xxs-4:nth-child(3n+1),
    .col-xxs-6:nth-child(2n+1) {
    clear: none;
    }
    .col-lg-1:nth-child(12n+1),
    .col-lg-2:nth-child(6n+1),
    .col-lg-3:nth-child(4n+1),
    .col-lg-4:nth-child(3n+1),
    .col-lg-6:nth-child(2n+1){
    clear: left;
    }

    //=================================================================

    .col-lg-0-5,
    .col-lg-1-5,
    .col-lg-2-5,
    .col-lg-3-5,
    .col-lg-4-5,
    .col-lg-5-5,
    .col-lg-6-5,
    .col-lg-7-5,
    .col-lg-8-5 {
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: unit(15/16,rem);
    padding-left: unit(15/16,rem);
    }

    .col-lg-0-5 {
    width: percentage((0.5 / 12));
    }

    .col-lg-offset-0-5 {
    margin-left: percentage((0.5 / 12));
    }

    .col-lg-pull-0-5 {
    right: percentage((0.5 / 12));
    }

    .col-lg-push-0-5 {
    left: percentage((0.5 / 12));
    }

    //=================================================================

    .col-lg-1-5 {
    width: percentage((1.5 / 12));
    }

    .col-lg-pull-1-5 {
    right: percentage((1.5 / 12));
    }

    .col-lg-push-1-5 {
    left: percentage((1.5 / 12));
    }

    .col-lg-offset-1-5 {
    margin-left: percentage((1.5 / 12));
    }

    //=================================================================

    .col-lg-2-5 {
    width: percentage((2.5 / 12));
    }

    .col-lg-pull-2-5 {
    right: percentage((2.5 / 12));
    }

    .col-lg-push-2-5 {
    left: percentage((2.5 / 12));
    }

    .col-lg-offset-2-5 {
    margin-left: percentage((2.5 / 12));
    }

    //=================================================================

    .col-lg-3-5 {
    width: percentage((3.5 / 12));
    }

    .col-lg-pull-3-5 {
    right: percentage((3.5 / 12));
    }

    .col-lg-push-3-5 {
    left: percentage((3.5 / 12));
    }

    .col-lg-offset-3-5 {
    margin-left: percentage((3.5 / 12));
    }

    //=================================================================

    .col-lg-4-5 {
    width: percentage((4.5 / 12));
    }

    .col-lg-pull-4-5 {
    right: percentage((4.5 / 12));
    }

    .col-lg-push-4-5 {
    left: percentage((4.5 / 12));
    }

    .col-lg-offset-4-5 {
    margin-left: percentage((4.5 / 12));
    }

    //=================================================================

    .col-lg-5-5 {
    width: percentage((5.5 / 12));
    }

    .col-lg-pull-5-5 {
    right: percentage((5.5 / 12));
    }

    .col-lg-push-5-5 {
    left: percentage((5.5 / 12));
    }

    .col-lg-offset-5-5 {
    margin-left: percentage((5.5 / 12));
    }

    //=================================================================

    .col-lg-6-5 {
    width: percentage((6.5 / 12));
    }

    .col-lg-pull-6-5 {
    right: percentage((6.5 / 12));
    }

    .col-lg-push-6-5 {
    left: percentage((6.5 / 12));
    }

    .col-lg-offset-6-5 {
    margin-left: percentage((6.5 / 12));
    }

    //=================================================================

    .col-lg-7-5 {
    width: percentage((7.5 / 12));
    }

    .col-lg-pull-7-5 {
    right: percentage((7.5 / 12));
    }

    .col-lg-push-7-5 {
    left: percentage((7.5 / 12));
    }

    .col-lg-offset-7-5 {
    margin-left: percentage((7.5 / 12));
    }

    //=================================================================

    .col-lg-8-5 {
    width: percentage((8.5 / 12));
    }

    .col-lg-pull-8-5 {
    right: percentage((8.5 / 12));
    }

    .col-lg-push-8-5 {
    left: percentage((8.5 / 12));
    }

    .col-lg-offset-8-5 {
    margin-left: percentage((8.5 / 12));
    }

    }

    //=================================================================
    //=================================================================

    @media @md
    {
    // ============ clear fix ===============
    .col-lg-1:nth-child(12n+1),
    .col-lg-2:nth-child(6n+1),
    .col-lg-3:nth-child(4n+1),
    .col-lg-4:nth-child(3n+1),
    .col-lg-6:nth-child(2n+1),
    .col-sm-1:nth-child(12n+1),
    .col-sm-2:nth-child(6n+1),
    .col-sm-3:nth-child(4n+1),
    .col-sm-4:nth-child(3n+1),
    .col-sm-6:nth-child(2n+1),
    .col-xs-1:nth-child(12n+1),
    .col-xs-2:nth-child(6n+1),
    .col-xs-3:nth-child(4n+1),
    .col-xs-4:nth-child(3n+1),
    .col-xs-6:nth-child(2n+1),
    .col-xxs-1:nth-child(12n+1),
    .col-xxs-2:nth-child(6n+1),
    .col-xxs-3:nth-child(4n+1),
    .col-xxs-4:nth-child(3n+1),
    .col-xxs-6:nth-child(2n+1) {
    clear: none;
    }
    .col-md-1:nth-child(12n+1),
    .col-md-2:nth-child(6n+1),
    .col-md-3:nth-child(4n+1),
    .col-md-4:nth-child(3n+1),
    .col-md-6:nth-child(2n+1){
    clear: left;
    }

    //=================================================================

    .col-md-0-5,
    .col-md-1-5,
    .col-md-2-5,
    .col-md-3-5,
    .col-md-4-5,
    .col-md-5-5,
    .col-md-6-5,
    .col-md-7-5,
    .col-md-8-5 {
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: unit(15/16,rem);
    padding-left: unit(15/16,rem);
    }

    .col-md-0-5 {
    width: percentage((0.5 / 12));
    }

    .col-md-offset-0-5 {
    margin-left: percentage((0.5 / 12));
    }

    .col-md-pull-0-5 {
    right: percentage((0.5 / 12));
    }

    .col-md-push-0-5 {
    left: percentage((0.5 / 12));
    }

    //=================================================================

    .col-md-1-5 {
    width: percentage((1.5 / 12));
    }

    .col-md-pull-1-5 {
    right: percentage((1.5 / 12));
    }

    .col-md-push-1-5 {
    left: percentage((1.5 / 12));
    }

    .col-md-offset-1-5 {
    margin-left: percentage((1.5 / 12));
    }

    //=================================================================

    .col-md-2-5 {
    width: percentage((2.5 / 12));
    }

    .col-md-pull-2-5 {
    right: percentage((2.5 / 12));
    }

    .col-md-push-2-5 {
    left: percentage((2.5 / 12));
    }

    .col-md-offset-2-5 {
    margin-left: percentage((2.5 / 12));
    }

    //=================================================================

    .col-md-3-5 {
    width: percentage((3.5 / 12));
    }

    .col-md-pull-3-5 {
    right: percentage((3.5 / 12));
    }

    .col-md-push-3-5 {
    left: percentage((3.5 / 12));
    }

    .col-md-offset-3-5 {
    margin-left: percentage((3.5 / 12));
    }

    //=================================================================

    .col-md-4-5 {
    width: percentage((4.5 / 12));
    }

    .col-md-pull-4-5 {
    right: percentage((4.5 / 12));
    }

    .col-md-push-4-5 {
    left: percentage((4.5 / 12));
    }

    .col-md-offset-4-5 {
    margin-left: percentage((4.5 / 12));
    }

    //=================================================================

    .col-md-5-5 {
    width: percentage((5.5 / 12));
    }

    .col-md-pull-5-5 {
    right: percentage((5.5 / 12));
    }

    .col-md-push-5-5 {
    left: percentage((5.5 / 12));
    }

    .col-md-offset-5-5 {
    margin-left: percentage((5.5 / 12));
    }

    //=================================================================

    .col-md-6-5 {
    width: percentage((6.5 / 12));
    }

    .col-md-pull-6-5 {
    right: percentage((6.5 / 12));
    }

    .col-md-push-6-5 {
    left: percentage((6.5 / 12));
    }

    .col-md-offset-6-5 {
    margin-left: percentage((6.5 / 12));
    }

    //=================================================================

    .col-md-7-5 {
    width: percentage((7.5 / 12));
    }

    .col-md-pull-7-5 {
    right: percentage((7.5 / 12));
    }

    .col-md-push-7-5 {
    left: percentage((7.5 / 12));
    }

    .col-md-offset-7-5 {
    margin-left: percentage((7.5 / 12));
    }

    //=================================================================

    .col-md-8-5 {
    width: percentage((8.5 / 12));
    }

    .col-md-pull-8-5 {
    right: percentage((8.5 / 12));
    }

    .col-md-push-8-5 {
    left: percentage((8.5 / 12));
    }

    .col-md-offset-8-5 {
    margin-left: percentage((8.5 / 12));
    }

    }
    //=================================================================
    //=================================================================

    @media @sm
    {
    .text-left-sm {
    text-align: left;
    }
    .text-right-sm {
    text-align: right;
    }
    .text-center-sm {
    text-align: center;
    }
    .text-justify-sm {
    text-align: justify;
    }
    .text-nowrap-sm {
    white-space: nowrap;
    }
    .text-lowercase-sm {
    text-transform: lowercase;
    }
    .text-uppercase-sm {
    text-transform: uppercase;
    }
    .text-capitalize-sm {
    text-transform: capitalize;
    }

    //=================================================================

    .pull-right-sm {
    float: right !important;
    }
    .pull-left-sm {
    float: left !important;
    }

    // ======================= clear fix ===============================

    .col-lg-1:nth-child(12n+1),
    .col-lg-2:nth-child(6n+1),
    .col-lg-3:nth-child(4n+1),
    .col-lg-4:nth-child(3n+1),
    .col-lg-6:nth-child(2n+1),
    .col-md-1:nth-child(12n+1),
    .col-md-2:nth-child(6n+1),
    .col-md-3:nth-child(4n+1),
    .col-md-4:nth-child(3n+1),
    .col-md-6:nth-child(2n+1),
    .col-xs-1:nth-child(12n+1),
    .col-xs-2:nth-child(6n+1),
    .col-xs-3:nth-child(4n+1),
    .col-xs-4:nth-child(3n+1),
    .col-xs-6:nth-child(2n+1),
    .col-xxs-1:nth-child(12n+1),
    .col-xxs-2:nth-child(6n+1),
    .col-xxs-3:nth-child(4n+1),
    .col-xxs-4:nth-child(3n+1),
    .col-xxs-6:nth-child(2n+1) {
    clear: none;
    }
    .col-sm-1:nth-child(12n+1),
    .col-sm-2:nth-child(6n+1),
    .col-sm-3:nth-child(4n+1),
    .col-sm-4:nth-child(3n+1),
    .col-sm-6:nth-child(2n+1){
    clear: left;
    }

    //=================================================================

    .col-sm-0-5,
    .col-sm-1-5,
    .col-sm-2-5,
    .col-sm-3-5,
    .col-sm-4-5,
    .col-sm-5-5,
    .col-sm-6-5,
    .col-sm-7-5,
    .col-sm-8-5 {
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: unit(15/16,rem);
    padding-left: unit(15/16,rem);
    }

    .col-sm-0-5 {
    width: percentage((0.5 / 12));
    }

    .col-sm-offset-0-5 {
    margin-left: percentage((0.5 / 12));
    }

    .col-sm-pull-0-5 {
    right: percentage((0.5 / 12));
    }

    .col-sm-push-0-5 {
    left: percentage((0.5 / 12));
    }

    //=================================================================

    .col-sm-1-5 {
    width: percentage((1.5 / 12));
    }

    .col-sm-pull-1-5 {
    right: percentage((1.5 / 12));
    }

    .col-sm-push-1-5 {
    left: percentage((1.5 / 12));
    }

    .col-sm-offset-1-5 {
    margin-left: percentage((1.5 / 12));
    }

    //=================================================================

    .col-sm-2-5 {
    width: percentage((2.5 / 12));
    }

    .col-sm-pull-2-5 {
    right: percentage((2.5 / 12));
    }

    .col-sm-push-2-5 {
    left: percentage((2.5 / 12));
    }

    .col-sm-offset-2-5 {
    margin-left: percentage((2.5 / 12));
    }

    //=================================================================

    .col-sm-3-5 {
    width: percentage((3.5 / 12));
    }

    .col-sm-pull-3-5 {
    right: percentage((3.5 / 12));
    }

    .col-sm-push-3-5 {
    left: percentage((3.5 / 12));
    }

    .col-sm-offset-3-5 {
    margin-left: percentage((3.5 / 12));
    }

    //=================================================================

    .col-sm-4-5 {
    width: percentage((4.5 / 12));
    }

    .col-sm-pull-4-5 {
    right: percentage((4.5 / 12));
    }

    .col-sm-push-4-5 {
    left: percentage((4.5 / 12));
    }

    .col-sm-offset-4-5 {
    margin-left: percentage((4.5 / 12));
    }

    //=================================================================

    .col-sm-5-5 {
    width: percentage((5.5 / 12));
    }

    .col-sm-pull-5-5 {
    right: percentage((5.5 / 12));
    }

    .col-sm-push-5-5 {
    left: percentage((5.5 / 12));
    }

    .col-sm-offset-5-5 {
    margin-left: percentage((5.5 / 12));
    }

    //=================================================================

    .col-sm-6-5 {
    width: percentage((6.5 / 12));
    }

    .col-sm-pull-6-5 {
    right: percentage((6.5 / 12));
    }

    .col-sm-push-6-5 {
    left: percentage((6.5 / 12));
    }

    .col-sm-offset-6-5 {
    margin-left: percentage((6.5 / 12));
    }

    //=================================================================

    .col-sm-7-5 {
    width: percentage((7.5 / 12));
    }

    .col-sm-pull-7-5 {
    right: percentage((7.5 / 12));
    }

    .col-sm-push-7-5 {
    left: percentage((7.5 / 12));
    }

    .col-sm-offset-7-5 {
    margin-left: percentage((7.5 / 12));
    }

    //=================================================================

    .col-sm-8-5 {
    width: percentage((8.5 / 12));
    }

    .col-sm-pull-8-5 {
    right: percentage((8.5 / 12));
    }

    .col-sm-push-8-5 {
    left: percentage((8.5 / 12));
    }

    .col-sm-offset-8-5 {
    margin-left: percentage((8.5 / 12));
    }

    }
    //=================================================================
    //=================================================================

    @media @xs
    {
    .text-left-xs {
    text-align: left;
    }
    .text-right-xs {
    text-align: right;
    }
    .text-center-xs {
    text-align: center;
    }
    .text-justify-xs {
    text-align: justify;
    }
    .text-nowrap-xs {
    white-space: nowrap;
    }
    .text-lowercase-xs {
    text-transform: lowercase;
    }
    .text-uppercase-xs {
    text-transform: uppercase;
    }
    .text-capitalize-xs {
    text-transform: capitalize;
    }

    //=================================================================

    .pull-right-xs {
    float: right !important;
    }
    .pull-left-xs {
    float: left !important;
    }

    // ============ clear fix ===============
    .col-lg-1:nth-child(12n+1),
    .col-lg-2:nth-child(6n+1),
    .col-lg-3:nth-child(4n+1),
    .col-lg-4:nth-child(3n+1),
    .col-lg-6:nth-child(2n+1),
    .col-md-1:nth-child(12n+1),
    .col-md-2:nth-child(6n+1),
    .col-md-3:nth-child(4n+1),
    .col-md-4:nth-child(3n+1),
    .col-md-6:nth-child(2n+1),
    .col-sm-1:nth-child(12n+1),
    .col-sm-2:nth-child(6n+1),
    .col-sm-3:nth-child(4n+1),
    .col-sm-4:nth-child(3n+1),
    .col-sm-6:nth-child(2n+1),
    .col-xxs-1:nth-child(12n+1),
    .col-xxs-2:nth-child(6n+1),
    .col-xxs-3:nth-child(4n+1),
    .col-xxs-4:nth-child(3n+1),
    .col-xxs-6:nth-child(2n+1) {
    clear: none;
    }
    .col-xs-1:nth-child(12n+1),
    .col-xs-2:nth-child(6n+1),
    .col-xs-3:nth-child(4n+1),
    .col-xs-4:nth-child(3n+1),
    .col-xs-6:nth-child(2n+1){
    clear: left;
    }

    //=================================================================

    .col-xs-0-5,
    .col-xs-1-5,
    .col-xs-2-5,
    .col-xs-3-5,
    .col-xs-4-5,
    .col-xs-5-5,
    .col-xs-6-5,
    .col-xs-7-5,
    .col-xs-8-5 {
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: unit(15/16,rem);
    padding-left: unit(15/16,rem);
    }

    .col-xs-0-5 {
    width: percentage((0.5 / 12));
    }

    .col-xs-offset-0-5 {
    margin-left: percentage((0.5 / 12));
    }

    .col-xs-pull-0-5 {
    right: percentage((0.5 / 12));
    }

    .col-xs-push-0-5 {
    left: percentage((0.5 / 12));
    }

    //=================================================================

    .col-xs-1-5 {
    width: percentage((1.5 / 12));
    }

    .col-xs-pull-1-5 {
    right: percentage((1.5 / 12));
    }

    .col-xs-push-1-5 {
    left: percentage((1.5 / 12));
    }

    .col-xs-offset-1-5 {
    margin-left: percentage((1.5 / 12));
    }

    //=================================================================

    .col-xs-2-5 {
    width: percentage((2.5 / 12));
    }

    .col-xs-pull-2-5 {
    right: percentage((2.5 / 12));
    }

    .col-xs-push-2-5 {
    left: percentage((2.5 / 12));
    }

    .col-xs-offset-2-5 {
    margin-left: percentage((2.5 / 12));
    }

    //=================================================================

    .col-xs-3-5 {
    width: percentage((3.5 / 12));
    }

    .col-xs-pull-3-5 {
    right: percentage((3.5 / 12));
    }

    .col-xs-push-3-5 {
    left: percentage((3.5 / 12));
    }

    .col-xs-offset-3-5 {
    margin-left: percentage((3.5 / 12));
    }

    //=================================================================

    .col-xs-4-5 {
    width: percentage((4.5 / 12));
    }

    .col-xs-pull-4-5 {
    right: percentage((4.5 / 12));
    }

    .col-xs-push-4-5 {
    left: percentage((4.5 / 12));
    }

    .col-xs-offset-4-5 {
    margin-left: percentage((4.5 / 12));
    }

    //=================================================================

    .col-xs-5-5 {
    width: percentage((5.5 / 12));
    }

    .col-xs-pull-5-5 {
    right: percentage((5.5 / 12));
    }

    .col-xs-push-5-5 {
    left: percentage((5.5 / 12));
    }

    .col-xs-offset-5-5 {
    margin-left: percentage((5.5 / 12));
    }

    //=================================================================

    .col-xs-6-5 {
    width: percentage((6.5 / 12));
    }

    .col-xs-pull-6-5 {
    right: percentage((6.5 / 12));
    }

    .col-xs-push-6-5 {
    left: percentage((6.5 / 12));
    }

    .col-xs-offset-6-5 {
    margin-left: percentage((6.5 / 12));
    }

    //=================================================================

    .col-xs-7-5 {
    width: percentage((7.5 / 12));
    }

    .col-xs-pull-7-5 {
    right: percentage((7.5 / 12));
    }

    .col-xs-push-7-5 {
    left: percentage((7.5 / 12));
    }

    .col-xs-offset-7-5 {
    margin-left: percentage((7.5 / 12));
    }

    //=================================================================

    .col-xs-8-5 {
    width: percentage((8.5 / 12));
    }

    .col-xs-pull-8-5 {
    right: percentage((8.5 / 12));
    }

    .col-xs-push-8-5 {
    left: percentage((8.5 / 12));
    }

    .col-xs-offset-8-5 {
    margin-left: percentage((8.5 / 12));
    }

    }

    //=================================================================
    //=================================================================

    @media @xxs
    {
    .text-left-xxs {
    text-align: left;
    }
    .text-right-xxs {
    text-align: right;
    }
    .text-center-xxs {
    text-align: center;
    }
    .text-justify-xxs {
    text-align: justify;
    }
    .text-nowrap-xxs {
    white-space: nowrap;
    }
    .text-lowercase-xxs {
    text-transform: lowercase;
    }
    .text-uppercase-xxs {
    text-transform: uppercase;
    }
    .text-capitalize-xxs {
    text-transform: capitalize;
    }

    //=================================================================

    .pull-right-xxs {
    float: right !important;
    }
    .pull-left-xxs {
    float: left !important;
    }

    // ============ clear fix ===============

    .col-lg-1:nth-child(12n+1),
    .col-lg-2:nth-child(6n+1),
    .col-lg-3:nth-child(4n+1),
    .col-lg-4:nth-child(3n+1),
    .col-lg-6:nth-child(2n+1),
    .col-md-1:nth-child(12n+1),
    .col-md-2:nth-child(6n+1),
    .col-md-3:nth-child(4n+1),
    .col-md-4:nth-child(3n+1),
    .col-md-6:nth-child(2n+1),
    .col-sm-1:nth-child(12n+1),
    .col-sm-2:nth-child(6n+1),
    .col-sm-3:nth-child(4n+1),
    .col-sm-4:nth-child(3n+1),
    .col-sm-6:nth-child(2n+1),
    .col-xs-1:nth-child(12n+1),
    .col-xs-2:nth-child(6n+1),
    .col-xs-3:nth-child(4n+1),
    .col-xs-4:nth-child(3n+1),
    .col-xs-6:nth-child(2n+1) {
    clear: none;
    }
    .col-xxs-1:nth-child(12n+1),
    .col-xxs-2:nth-child(6n+1),
    .col-xxs-3:nth-child(4n+1),
    .col-xxs-4:nth-child(3n+1),
    .col-xxs-6:nth-child(2n+1){
    clear: left;
    }

    //=================================================================

    .col-xxs-0-5,
    .col-xxs-1,
    .col-xxs-1-5,
    .col-xxs-2,
    .col-xxs-2-5,
    .col-xxs-3,
    .col-xxs-3-5,
    .col-xxs-4,
    .col-xxs-4-5,
    .col-xxs-5,
    .col-xxs-5-5,
    .col-xxs-6,
    .col-xxs-6-5,
    .col-xxs-7,
    .col-xxs-7-5,
    .col-xxs-8,
    .col-xxs-8-5,
    .col-xxs-9,
    .col-xxs-10,
    .col-xxs-11,
    .col-xxs-12 {
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: unit(15/16,rem);
    padding-left: unit(15/16,rem);
    }

    .col-xxs-pull-0 {
    right: auto;
    }

    .col-xxs-push-0 {
    left: auto;
    }

    .col-xxs-offset-0 {
    margin-left: 0;
    }

    //=================================================================

    .col-xxs-0-5 {
    width: percentage((0.5 / 12));
    }

    .col-xxs-offset-0-5 {
    margin-left: percentage((0.5 / 12));
    }

    .col-xxs-pull-0-5 {
    right: percentage((0.5 / 12));
    }

    .col-xxs-push-0-5 {
    left: percentage((0.5 / 12));
    }

    //=================================================================

    .col-xxs-1 {
    width: percentage((1 / 12));
    }

    .col-xxs-push-1 {
    left: percentage((1 / 12));
    }

    .col-xxs-pull-1 {
    right: percentage((1 / 12));
    }

    .col-xxs-offset-1 {
    margin-left: percentage((1 / 12));
    }

    //=================================================================

    .col-xxs-1-5 {
    width: percentage((1.5 / 12));
    }

    .col-xxs-pull-1-5 {
    right: percentage((1.5 / 12));
    }

    .col-xxs-push-1-5 {
    left: percentage((1.5 / 12));
    }

    .col-xxs-offset-1-5 {
    margin-left: percentage((1.5 / 12));
    }

    //=================================================================

    .col-xxs-2 {
    width: percentage((2 / 12));
    }

    .col-xxs-pull-2 {
    right: percentage((2 / 12));
    }

    .col-xxs-push-2 {
    left: percentage((2 / 12));
    }

    .col-xxs-offset-2 {
    margin-left: percentage((2 / 12));
    }

    //=================================================================

    .col-xxs-2-5 {
    width: percentage((2.5 / 12));
    }

    .col-xxs-pull-2-5 {
    right: percentage((2.5 / 12));
    }

    .col-xxs-push-2-5 {
    left: percentage((2.5 / 12));
    }

    .col-xxs-offset-2-5 {
    margin-left: percentage((2.5 / 12));
    }

    //=================================================================

    .col-xxs-3 {
    width: percentage((3 / 12));
    }

    .col-xxs-pull-3 {
    right: percentage((3 / 12));
    }

    .col-xxs-push-3 {
    left: percentage((3 / 12));
    }

    .col-xxs-offset-3 {
    margin-left: percentage((3 / 12));
    }

    //=================================================================

    .col-xxs-3-5 {
    width: percentage((3.5 / 12));
    }

    .col-xxs-pull-3-5 {
    right: percentage((3.5 / 12));
    }

    .col-xxs-push-3-5 {
    left: percentage((3.5 / 12));
    }

    .col-xxs-offset-3-5 {
    margin-left: percentage((3.5 / 12));
    }

    //=================================================================

    .col-xxs-4 {
    width: percentage((4 / 12));
    }

    .col-xxs-pull-4 {
    right: percentage((4 / 12));
    }

    .col-xxs-push-4 {
    left: percentage((4 / 12));
    }

    .col-xxs-offset-4 {
    margin-left: percentage((4 / 12));
    }

    //=================================================================

    .col-xxs-4-5 {
    width: percentage((4.5 / 12));
    }

    .col-xxs-pull-4-5 {
    right: percentage((4.5 / 12));
    }

    .col-xxs-push-4-5 {
    left: percentage((4.5 / 12));
    }

    .col-xxs-offset-4-5 {
    margin-left: percentage((4.5 / 12));
    }

    //=================================================================

    .col-xxs-5 {
    width: percentage((5 / 12));
    }

    .col-xxs-pull-5 {
    right: percentage((5 / 12));
    }

    .col-xxs-push-5 {
    left: percentage((5 / 12));
    }

    .col-xxs-offset-5 {
    margin-left: percentage((5 / 12));
    }

    //=================================================================

    .col-xxs-5-5 {
    width: percentage((5.5 / 12));
    }

    .col-xxs-pull-5-5 {
    right: percentage((5.5 / 12));
    }

    .col-xxs-push-5-5 {
    left: percentage((5.5 / 12));
    }

    .col-xxs-offset-5-5 {
    margin-left: percentage((5.5 / 12));
    }

    //=================================================================

    .col-xxs-6 {
    width: percentage((6 / 12));
    }

    .col-xxs-pull-6 {
    right: percentage((6 / 12));
    }

    .col-xxs-push-6 {
    left: percentage((6 / 12));
    }

    .col-xxs-offset-6 {
    margin-left: percentage((6 / 12));
    }

    //=================================================================

    .col-xxs-6-5 {
    width: percentage((6.5 / 12));
    }

    .col-xxs-pull-6-5 {
    right: percentage((6.5 / 12));
    }

    .col-xxs-push-6-5 {
    left: percentage((6.5 / 12));
    }

    .col-xxs-offset-6-5 {
    margin-left: percentage((6.5 / 12));
    }

    //=================================================================

    .col-xxs-7 {
    width: percentage((7 / 12));
    }

    .col-xxs-pull-7 {
    right: percentage((7 / 12));
    }

    .col-xxs-push-7 {
    left: percentage((7 / 12));
    }

    .col-xxs-offset-7 {
    margin-left: percentage((7 / 12));
    }

    //=================================================================

    .col-xxs-7-5 {
    width: percentage((7.5 / 12));
    }

    .col-xxs-pull-7-5 {
    right: percentage((7.5 / 12));
    }

    .col-xxs-push-7-5 {
    left: percentage((7.5 / 12));
    }

    .col-xxs-offset-7-5 {
    margin-left: percentage((7.5 / 12));
    }

    //=================================================================

    .col-xxs-8 {
    width: percentage((8 / 12));
    }

    .col-xxs-pull-8 {
    right: percentage((8 / 12));
    }

    .col-xxs-push-8 {
    left: percentage((8 / 12));
    }

    .col-xxs-offset-8 {
    margin-left: percentage((8 / 12));
    }

    //=================================================================

    .col-xxs-8-5 {
    width: percentage((8.5 / 12));
    }

    .col-xxs-pull-8-5 {
    right: percentage((8.5 / 12));
    }

    .col-xxs-push-8-5 {
    left: percentage((8.5 / 12));
    }

    .col-xxs-offset-8-5 {
    margin-left: percentage((8.5 / 12));
    }

    //=================================================================

    .col-xxs-9 {
    width: percentage((9 / 12));
    }

    .col-xxs-pull-9 {
    right: percentage((9 / 12));
    }

    .col-xxs-push-9 {
    left: percentage((9 / 12));
    }

    .col-xxs-offset-9 {
    margin-left: percentage((9 / 12));
    }

    //=================================================================

    .col-xxs-10 {
    width: percentage((10 / 12));
    }

    .col-xxs-pull-10 {
    right: percentage((10 / 12));
    }

    .col-xxs-push-10 {
    left: percentage((10 / 12));
    }

    .col-xxs-offset-10 {
    margin-left: percentage((10 / 12));
    }

    //=================================================================

    .col-xxs-11 {
    width: percentage((11 / 12));
    }

    .col-xxs-pull-11 {
    right: percentage((11 / 12));
    }

    .col-xxs-push-11 {
    left: percentage((11 / 12));
    }

    .col-xxs-offset-11 {
    margin-left: percentage((11 / 12));
    }

    //=================================================================

    .col-xxs-12 {
    width: percentage((12 / 12));
    }

    .col-xxs-pull-12 {
    right: percentage((12 / 12));
    }

    .col-xxs-push-12 {
    left: percentage((12 / 12));
    }

    .col-xxs-offset-12 {
    margin-left: percentage((12 / 12));
    }

    }


    // visible & hidden
    // dont use the .visible-? ,instead use the .visible-?-?
    //=============================================================================


    // for xs
    .visible-xs {
    @media @xs {
    .responsive-visibility();
    }
    }
    .visible-xs-block {
    @media @xs {
    display: block !important;
    }
    }
    .visible-xs-inline {
    @media @xs {
    display: inline !important;
    }
    }
    .visible-xs-inline-block {
    @media @xs {
    display: inline-block !important;
    }
    }
    .hidden-xs {
    @media @xs {
    .responsive-invisibility();
    }
    }


    // for xxs
    .visible-xxs {
    @media @xxs {
    .responsive-visibility();
    }
    }
    .visible-xxs-block {
    @media @xxs {
    display: block !important;
    }
    }
    .visible-xxs-inline {
    @media @xxs {
    display: inline !important;
    }
    }
    .visible-xxs-inline-block {
    @media @xxs {
    display: inline-block !important;
    }
    }
    .hidden-xxs {
    @media @xxs {
    .responsive-invisibility();
    }
    }