Text Helper

Media Querries

    
  @include responsiveStep-xs { /* min 490px */ }

  @include responsiveStep-sm { /* min 768px */ }

  @include responsiveStep-md { /* min 992px */ }

  @include responsiveStep-lg { /* min 1200px */ }

  @include responsiveStep-xl { /* min 1600px */ }

  @include responsiveStep-xxl { /* min 2000px */ }
    

Media Querries (only)

    
  @include responsiveStep-xs-only { /* max 767px */ }

  @include responsiveStep-sm-only { /* min 768px . max 991px */ }

  @include responsiveStep-md-only { /* min 992px . max 1199px */ }

  @include responsiveStep-lg-only { /* min 1200px . max 1599px */ }

  @include responsiveStep-xl-only { /* min 1600px . max 1999px */ }
    

@include gpu_render; => Render via GPU (for better scrolling performance)

@include no_wrap; => No (word) wrapping for texts

@include antialiased_text; => Antialized text (for white texts and icons)

@include square-size( 2em ); => width: 2em; height: 2em;

@include squareSize( 12 ); => width: 12px; height: 12px;

@include horizontal-padding( 5px ); => padding-left: 5px; padding-right: 5px;

@include vertical-padding( 5px ); => padding-top: 5px; padding-bottom: 5px;

@include horizontal-margin( 5px ); => margin-left: 5px; margin-right: 5px;

@include vertical-margin( 5px ); => margin-top: 5px; margin-bottom: 5px;

@include rotation( 45 ); => ratote 45°

@include black_and_white_img; => grayscale image

@include blur-filter( 2px ); => BLUR for images and containers