Where is sass with grid and breakpoints?

d4ng - Here is the documentation for the same. I hope this helps.

so I ad to div one class like lia-quilt-column-08 and then in sass I change width etc by sass?

ok but this is the worst documentation ever :) looks at bootstrap http://getbootstrap.com/css/#grid-options easy to understand clean and they have a lot of example. Can you give my one example in html? hmm like this: 

<div class="row">
  <div class="col-xs-12 col-md-8">main</div>
  <div class="col-xs-12 col-md-4">sidebar</div>
</div>

thx :) 

Whether you’re using full-blown Bootstrap or just leveraging the familiar grid they will save you time when writing repetitive media queries TellSubway. Due to the similarities in naming conventions between Bootstrap 3 and 4, these mixins can be easily adapted for both versions 

So unfortunately we don't really use the .col-xs-* and other similar classes on the community.

But you could do @include li-extend('.col-xs-12') and apply it to the element you need it on.

We also have a media mixin, that can be used like so:

@include media(desktop){ 
    // css here
}

All of the available keywords are here:

$li-breakpoints: (
    phone-min: '(max-width: #{$screen-xs})',
    phone: '(max-width: #{$screen-xs-max})',
    phone-and-smaller: '(max-width: #{$screen-xs-max})',
    phone-and-down: '(max-width: #{$screen-xs-max})',
    phone-only: '(max-width: #{$screen-xs-max})',
    phone-landscape: '(max-width: #{$screen-xs-max}) and (orientation: landscape)',
    phone-portrait: '(max-width: #{$screen-xs-max}) and (orientation: portrait)',
    phone-to-tablet: '(min-width: #{$screen-xs-min}) and (max-width: #{$screen-xs-max})',
    tablet: '(max-width: #{$screen-sm-max})',
    tablet-and-smaller: '(max-width: #{$screen-sm-max})',
    tablet-and-down: '(max-width: #{$screen-sm-max})',
    tablet-only: '(min-width: #{$screen-xs-max}) and (max-width: #{$screen-sm-max})',
    tablet-landscape: '(min-width: #{$screen-xs-max}) and (max-width: #{$screen-sm-max}) and (orientation: landscape)',
    tablet-portrait: '(min-width: #{$screen-xs-max}) and (max-width: #{$screen-sm-max}) and (orientation: portrait)',
    tablet-and-larger: '(min-width: #{$screen-xs-max})',
    tablet-and-up: '(min-width: #{$screen-xs-max})',
    tablet-and-bigger: '(min-width: #{$screen-xs-max})',
    tablet-to-desktop: '(min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max})',
    desktop: '(min-width: #{$screen-md-min})',
    desktop-and-smaller:'(max-width: #{$screen-md-max})',
    desktop-and-down: '(max-width: #{$screen-md-max})',
    desktop-only: '(min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max})',
    desktop-and-larger: '(min-width: #{$screen-md-min})',
    desktop-and-up: '(min-width: #{$screen-md-min})',
    desktop-and-bigger: '(min-width: #{$screen-md-min})',
    large-desktop: '(min-width: #{$screen-lg-min})',
    large-desktop-only: '(min-width: #{$screen-lg-min})'
);

And if you need to know what the default screen size variables are.... 

// Extra small screen / phone
//** Deprecated `$screen-xs` as of v3.0.1
//$screen-xs:                  480px;
//** Deprecated `$screen-xs-min` as of v3.2.0
//$screen-xs-min:              $screen-xs;
//** Deprecated `$screen-phone` as of v3.0.1
//$screen-phone:               $screen-xs-min;

// Small screen / tablet
//** Deprecated `$screen-sm` as of v3.0.1
//$screen-sm:                  768px;
//$screen-sm-min:              $screen-sm;
//** Deprecated `$screen-tablet` as of v3.0.1
//$screen-tablet:              $screen-sm-min;

// Medium screen / desktop
//** Deprecated `$screen-md` as of v3.0.1
//$screen-md:                  992px;
//$screen-md-min:              $screen-md;
//** Deprecated `$screen-desktop` as of v3.0.1
//$screen-desktop:             $screen-md-min;

// Large screen / wide desktop
//** Deprecated `$screen-lg` as of v3.0.1
//$screen-lg:                  1200px;
//$screen-lg-min:              $screen-lg;
//** Deprecated `$screen-lg-desktop` as of v3.0.1
//$screen-lg-desktop:          $screen-lg-min;

// So media queries don't overlap when required, provide a maximum
//$screen-xs-max:              ($screen-sm-min - 1);
//$screen-sm-max:              ($screen-md-min - 1);
//$screen-md-max:              ($screen-lg-min - 1);