Forem

Kabue Charles
Kabue Charles

Posted on

3 3

Setting Minimum and maximum CSS values for `font-size`, `padding`, `margin`, and many more not just `height` and `width`

SEE GIST BELOW

Usage:
 ======

 /* Single property 
 html {
   @include fluid-type(font-size, 320px, 1366px, 14px, 18px);
 }

 /* Multiple properties with same values */
 h1 {
   @include fluid-type(padding-bottom padding-top, 20em, 70em, 2em, 4em);
 }

////////////////////////////////////////////////////////////////////////////

div {
    @include fluid - type(font - size, 600px, 1200px, 16px, 32px);
}

@media screen and(max - width: 600px) {
    div {
        font - size: 16px;
    }
}

@media screen and(min - width: 1200px) {
    div {
        font - size: 36px;
    }
}
//
// https://stackoverflow.com/a/40530033
//
// ----
// libsass (v3.3.6)
// ----
// =========================================================================
//
// PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
// ---------------------------------------------------
// Indrek Paas @indrekpaas
//
// Inspired by Mike Riethmuller's Precise control over responsive typography
// http://madebymike.com.au/writing/precise-control-responsive-typography/
//
// `strip-unit()` function by Hugo Giraudel
//
// 11.08.2016 Remove redundant `&` self-reference
// 31.03.2016 Remove redundant parenthesis from output
// 02.10.2015 Add support for multiple properties
// 24.04.2015 Initial release
//
// =========================================================================
@function strip-unit($value) {
@return $value / ($value * 0 + 1);
}
@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {
@each $property in $properties {
#{$property}: $min-value;
}
@media screen and (min-width: $min-vw) {
@each $property in $properties {
#{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
}
}
@media screen and (min-width: $max-vw) {
@each $property in $properties {
#{$property}: $max-value;
}
}
}
// Usage:
// ======
// /* Single property */
// html {
// @include fluid-type(font-size, 320px, 1366px, 14px, 18px);
// }
// /* Multiple properties with same values */
// h1 {
// @include fluid-type(padding-bottom padding-top, 20em, 70em, 2em, 4em);
// }
////////////////////////////////////////////////////////////////////////////
div {
@include fluid-type(font-size, 600px, 1200px, 16px, 32px);
}
@media screen and (max-width: 600px) {
div {
font-size: 16px;
}
}
@media screen and (min-width: 1200px) {
div {
font-size: 36px;
}
}

Top comments (0)

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay