https://github.com/Jakobud/poly-fluid-sizing

SASS mixin for linear interpolation between multiple values across multiple breakpoints using CSS calc() and viewport units
https://github.com/Jakobud/poly-fluid-sizing

Last synced: 29 days ago
JSON representation

SASS mixin for linear interpolation between multiple values across multiple breakpoints using CSS calc() and viewport units

• Host: GitHub
• URL: https://github.com/Jakobud/poly-fluid-sizing
• Owner: Jakobud
• License: mit
• Created: 2017-05-24T15:57:18.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2021-11-11T23:20:56.000Z (over 2 years ago)
• Last Synced: 2024-05-11T23:21:57.557Z (about 1 month ago)
• Language: SCSS
• Homepage:
• Size: 13.7 KB
• Stars: 87
• Watchers: 4
• Forks: 14
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-stars - poly-fluid-sizing

README

        
# Poly Fluid Sizing

Poly Fluid Sizing is a SASS mixin to linear interpolation size values using calc() across multiple breakpoints. It uses some basic math behind the scenes. You don't need to know the math or understand it to use this mixin.

## Usage

```scss

// Import Poly Fluid Sizing mixin

@import 'poly-fluid-sizing';

h1 {

  @include poly-fluid-sizing('font-size', (320px:18px, 768px:26px, 1024px:38px, 1440px:46px));

}

```

This outputs the following CSS (The comments are not generated and are only here for clarity)

```css

h1 {

  /* The minimum font-size */

  font-size: 18px;

}

@media (min-width: 320px) {

  h1 {

    /* Interpolate the font-size between 18px @ 320px and 26px @ 768px viewport */

    font-size: calc(1.78571429vw + 12.28571429px);

  }

}

@media (min-width: 768px) {

  h1 {

    /* Interpolate the font-size between 26px @ 768px and 38px @ 1024px viewport */

    font-size: calc(4.6875vw - 10px);

  }

}

@media (min-width: 1024px) {

  h1 {

    /* Interpolate the font-size between 38px @ 1024px and 46px @ 1440px viewport */

    font-size: calc(1.92307692vw + 18.30769231px);

  }

}

@media (min-width: 1440px) {

  h1 {

    /* The maximum font-size */

    font-size: 46px;

  }

}

```

## It can do more than `font-size`

Using Poly Fluid Sizing on `font-size` is an obvious use case. But it can be used for any CSS property that uses a numeric size value. For example, `padding`, `margin`, `border-width`, `margin-left`, etc...

```sass

section {

  @include poly-fluid-sizing('margin-right', (768px:40px, 1024px:60px));

}

blockquote {

  @include poly-fluid-sizing('padding', (768px:30px 15px, 1024px:50px 25px));

}

```

## SASS map order

The SASS map that is passed into the mixin can be in any order. It doesn't have to be ordered from smallest viewport to largest viewport. The functions will automatically sort it for you. This is perfectly valid syntax:

```sass

article {

  @include poly-fluid-sizing('font-size', (1024px:22px, 500px:16px, 1440px:24px, 768px:18px));

}

```

## Limitations

* You can't mix value types. For example, trying to use `2em` `font-size` @ `786px` viewport width. SASS just really won't know what to do mathematically when 1 value is using `em` and the other is using `px`.

## Coverage

[Smashing Magazine: Fluid Responsive Typography With CSS Poly Fluid Sizing](https://www.smashingmagazine.com/2017/05/fluid-responsive-typography-css-poly-fluid-sizing/)

[Medium.com/@jakobud CSS Poly Fluid Sizing using calc(), vw, breakpoints and linear equations](https://medium.com/@jakobud/css-polyfluidsizing-using-calc-vw-breakpoints-and-linear-equations-8e15505d21ab)

## MIT License (see LICENSE file)