3.10.1

• Update fs-scale() docs
• Update deploy script

3.10

You can now specify $initial: false to prevent fs-scale() from outputting the initial value, which is not inside a media query. This was achieved in the old fs-scale() mixin with $fallback: false.

Example

.heading {
  @include fs-scale(font-size, (1000px: 50px, 1200px: 70px), $initial: false);
}

Output

@media all and (min-width: 75em) {
  .test {
    font-size: calc(10vw + -3.125rem);
  }
}
@media all and (min-width: 75em) {
  .test {
    font-size: 4.375rem;
  }
}

3.9.1

• Update minimum Node version to 14.x
• Update gulpfile.js
• Update Sassdocs, add deprecation warnings
• Add test for fs-scale() function
• Minor syntax updates
• Fix version number in package.json which got off after merging an old update

3.9

New and improved inline SVG mixin and global variable

The new $fs-svgs variable should contain the full SVG markup for each icon. No additional properties are required (e.g. heigh, width).

$fs-svgs: (
  'chevDown': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 10" preserveAspectRatio="xMidYMid meet"><path d="M12 0l2 2-7 7.1-7-7L2-.1l5 5z"/></svg>'
);

The new fs-svg-url() mixin supports multiple SVG attributes using a map:

.foo {
  background-image: fs-svg-url('chevDown', (fill: none, stroke: red, stroke-width: 1px));
}

fs-scale() mixin now supports map syntax

The fs-scale() mixin now accepts a map for the breakpoints and values, inspired by poly-fluid-sizing (see #14).

.foo {
  @include fs-scale(font-size, (320px: 18px, 768px: 26px, 1024px: 38px));
}

.bar {
  @include fs-scale(margin-bottom margin-top, (320px: 18px, 768px: 26px, 1024px: 38px));
}

We can now do in one line what used to require multiple lines and manually setting $fallback: false:

Old Syntax

.title {
  @include fs-scale(font-size, 18px, 26px, 320px, $bp-row - 1px);
  @include fs-scale(font-size, 18px, 26px, $bp-row, 1000px, $fallback: false);
}

New Syntax

.title {
  @include fs-scale(font-size, (
    320px: 18px,
    $bp-row - 1px: 26px,
    $bp-row: 18px,
    1000px: 26px
  ));
}

Note: The old syntax will still be supported until the next major release but you will see the following deprecation warning:

WARNING: Upgrade fs-scale() to new map syntax, fs-scale(font-size, (360px: 18px, 900px: 28px))
    node_modules/frontline-sass/dist/_frontline.scss 2200:3        fs-scale-legacy()
    node_modules/frontline-sass/dist/_frontline.scss 2170:5        fs-scale()
    resources/assets/styles/mixins/_rich-text-headings.scss 29:3   h5()
    resources/assets/styles/mixins/_richtext-mixin.scss 43:23      richtext()
    resources/assets/styles/helpers/_universal-helpers.scss 12:16  @import
    resources/assets/styles/main.scss 25:214                       root stylesheet

Migration

You can use this RegEx formula to do a find-and-replace for the basic fs-scale() usage (i.e. no $fallback or multi-line support):

Find old syntax

@include fs-scale\(([\w\s-]+), ([\w\d$-]+), ([\w\d$-]+), ([\w\d$-]+), ([\w\d$-]+)\)

Replace with new syntax

@include fs-scale($1, ($4: $2, $5: $3))

3.8

Update scale() function and mixin to support optional $units param that accepts rem or em.

v3.7.2

Minor updates:

• Add deprecation warning to the old fs-strip function
• Minor update to remove deprecation warning regarding 0px == 0
• Use fs-min-width() mixin in fs-scale() instead of plain @media syntax
• Change @error to @warn in color contrast function

Scaling functions and mixins

New Features

• fs-scale function (docs)
• fs-scale mixin (docs)
• fs-scale-mq mixin (docs)

Changes

Upgraded to Node 8.1.2 and updated npm dependencies

Parent Pseudo Mixin

New Features

• Parent Pseudo Mixins - _pseudos-parent.scss
  • fs-static-parent
  • fs-attention-parent
  • fs-all-states-parent

Changes

• Rename fs-strip to fs-strip-unit
  • fs-strip still exists and just calls fs-strip-unit

v1.1.0

Fix typos, update the fs-color function, add fs-link-colors and fs-theme-color helper mixins