Lem mixins

Documentation

adaptive-font-size

Arguments

Name	Type	Default	Description
$viewport-width-from	number(without unit)		Media breakpoint from
$viewport-width-to	number(without unit)		Media breakpoint to
$font-size-from	number(without unit)		Calculate font size from
$font-size-to	number(without unit)	null	Calculate font size to
$sticky	boolean	false	When breakpoint is lower then $viewport-width-to stay in $font-size-to

Example

.page-lem-mixins .demo-adaptive-font-size {
  @include adaptive-font-size(1400, 700, 50, 30, true)
}


// CSS Output
@media (max-width: 1400px) and (min-width: 701px) {
  .page-lem-mixins .demo-adaptive-font-size {
    font-size: calc(20 * ((100vw - 700px) / 700) + 30px);
  }
}

@media (max-width: 700px) {
  .page-lem-mixins .demo-adaptive-font-size {
    font-size: 30px;
  }
}

Demo

Resize browser and see how calculate font-size

adaptive-padding

Arguments

Name	Type	Default	Description
$viewport-width-from	number(without unit)		Media breakpoint from
$viewport-width-to	number(without unit)		Media breakpoint to
$padding-from	number(without unit)		Calculate padding from
$padding-to	number(without unit)	null	Calculate padding to
$sticky	boolean	false	When breakpoint is lower then $viewport-width-to stay in $padding-to

Example

.page-lem-mixins .demo-adaptive-padding {
  @include adaptive-padding(1000, 400, 60 0, 40 0, true);
}


// CSS Output
@media (max-width: 1000px) and (min-width: 401px) {
  .page-lem-mixins .demo-adaptive-padding {
    padding: calc(50 * ((100vw - 400px) / 600) + 50px) calc(20 * ((100vw - 400px) / 600) + 20px);
  }
}

@media (max-width: 400px) {
  .page-lem-mixins .demo-adaptive-padding {
    padding: 50px 20px;
  }
}

Demo

Resize browser and see how calculate padding

adaptive-margin

Arguments

Name	Type	Default	Description
$viewport-width-from	number(without unit)		Media breakpoint from
$viewport-width-to	number(without unit)		Media breakpoint to
$margin-from	number(without unit)		Calculate margin from
$margin-to	number(without unit)	null	Calculate margin to
$sticky	boolean	false	When breakpoint is lower then $viewport-width-to stay in $margin-to

Example

.page-lem-mixins .demo-adaptive-margin li {
  @include adaptive-margin(800, 400, 50 0 0, 10 0 0, true)
}


// CSS Output
@media (max-width: 800px) and (min-width: 401px) {
  .page-lem-mixins .demo-adaptive-margin li {
    margin: calc(40 * ((100vw - 400px) / 400) + 10px) 0px 0px;
  }
}

@media (max-width: 400px) {
  .page-lem-mixins .demo-adaptive-margin li {
    margin: 10px 0px 0px;
  }
}

Demo

Resize browser and see how calculate margin

List item 1
List item 2
List item 3
List item 4

adaptive-height

Arguments

Name	Type	Default	Description
$viewport-width-from	number(without unit)		Media breakpoint from
$viewport-width-to	number(without unit)		Media breakpoint to
$height-from	number(without unit)		Calculate height from
$height-to	number(without unit)	null	Calculate height to
$sticky	boolean	false	When breakpoint is lower then $viewport-width-to stay in $height-to

Example

.page-lem-mixins .demo-adaptive-height {
  @include adaptive-height(1000, 500, 100, 200)
}


// CSS Output
@media (max-width: 1000px) and (min-width: 501px) {
  .page-lem-mixins .demo-adaptive-height {
    height: calc(-100 * ((100vw - 500px) / 500) + 200px);
  }
}

Resize browser and see how calculate height

adaptive-width

Arguments

Name	Type	Default	Description
$viewport-width-from	number(without unit)		Media breakpoint from
$viewport-width-to	number(without unit)		Media breakpoint to
$width-from	number(without unit)		Calculate width from
$width-to	number(without unit)	null	Calculate width to
$sticky	boolean	false	When breakpoint is lower then $viewport-width-to stay in $width-to

Example

.page-lem-mixins .demo-adaptive-width {
  @include adaptive-width(1000, 500, 100, 500, true)
}


// CSS Output
@media (max-width: 1000px) and (min-width: 501px) {
  .page-lem-mixins .demo-adaptive-width {
    width: calc(-400 * ((100vw - 500px) / 500) + 500px);
  }
}

@media (max-width: 500px) {
  .page-lem-mixins .demo-adaptive-width {
    width: 500px;
  }
}

Resize browser and see how calculate width

adaptive-property

Arguments

Name	Type	Default	Description
$property	string		CSS property
$viewport-width-from	number(without unit)		Media breakpoint from
$viewport-width-to	number(without unit)		Media breakpoint to
$property-from	number(without unit)		Calculate property from
$property-to	number(without unit)	null	Calculate property to
$sticky	boolean	false	When breakpoint is lower then $viewport-width-to stay in $property-to

Example

.page-lem-mixins .demo-adaptive-property {
  @include adaptive-property('max-width', 1000, 500, 500, 100, true)
}


// CSS Output
@media (max-width: 1000px) and (min-width: 501px) {
  .page-lem-mixins .demo-adaptive-property {
    max-width: calc(400 * ((100vw - 500px) / 500) + 100px);
  }
}

@media (max-width: 500px) {
  .page-lem-mixins .demo-adaptive-property {
    max-width: 100px;
  }
}

Resize browser and see how calculate custom property