Styles

Media query breakpoints

LightKit framework has three media query breakpoints: desktop, tablet, and mobile. Sass variables with breakpoints values are stored in _variables.scss file.

$mobile-width: 551px; $tablet-width: 768px; $desktop-width: 1024px;

Further altering media query breakpoints can be done by changing mixins from _mixin.scss file.


          @mixin mobile {
            @media (max-width: #{$mobile-width}) {
              @content;}}


          @mixin tablet {
              @media (min-width: #{$mobile-width + 1px}) and (max-width: #{$tablet-width}) {
                @content;}}


          @mixin desktop {
            @media (min-width: #{$tablet-width + 1px}) {
                @content;}}