base-scss

SCSS utilities for projects from scratch.

• Reset CSS
• Media Queries
• Scaling Flex Layout (see explanation below)
• Easing Variables
• Font Mixin

Installation

Install by using your favorite package manager.

yarn add -D @newnow/base-scss
npm i -D @newnow/base-scss

Or copy the /src folder to your project.

Configuration

Create a configuration file and include in your main scss file. See /impl for usage examples.

Configuration file

The configuration file will setup the library with breakpoints and flex layout if $bases is set.

lib/_nn.scss

// $bases enables scaling layout
// use px value to stop scaling
@forward "@newnow/base-scss" with (
  $reset: true, // include reset, default true
  $font-smoothing: true, // include font-smoothing, default true

  $breakpoints: (
    tablet: 720px,
    desktop: 1024px,
    box: 1280px
  ),

  // breakpoints names and size values may be used as keys
  $bases: (
    // scaling
    0: 420,
    tablet: 768,
    desktop: 1024,

    // stop scaling
    box: 1px
  ),

  $container: (
    0: (
      max-width: 1200px,
      padding: 1.6rem,
      margin: auto // center
    ),

    tablet: (
      padding: 2.4rem
    ),

    desktop: (
      padding: 3.2rem
    )
  )
);

Main SCSS

@use "lib/nn";

This will setup the breakpoints and flex layout if enabled in the configuration file.

In Components

@use "../lib/nn" as *;

This will make mixins and placeholders available in the component.

Usage

The library aims to provide utilities and add as little css as possible by itself. The only css that is added is by the reset and the flex layout. If you disable both, no css is written when including the library.

Reset

We reset (not normalize) styles because we want full control and no default styles to interfere.

The default is to include the reset. You may disable by setting $reset: false in the configuration file.

Flex Layout

The idea behind the flex layout is to have the page scale like an image. To achieve this, we use vw units for sizing. By setting the root font size in vw, we can use rem units for everything else. The trick is to define the root font size that a pixel in the design matches 1rem in code. Due to a chrome issue, we sadly have to use a factor of 10 (1px = 0.1rem) though. That way, we can easily translate pixel based designs into rem based code.

The configuration consists of key value pairs. The key is the breakpoint and the value is the pixel width of the design used between the breakpoint and the next larger breakpoint.

The breakpoint may be defined as a breakpoint name as defined in $breakpoints or a pixel value (0 is also fine).

The value (base) should either be a unitless number or 1px. A unitless number will tell the layout to scale and use the number as the pixel width of the design. 1px will stop the scaling and will make 0.1rem = 1px.

Example time!

Your designer has designed for three screens: mobile, tablet, desktop. The designs are done using screen widths of 420px, 768px, 1280px.

First the mobile design should be used, starting at 720px the tablet design and at 1024px the desktop design. All designs should scale. At 1280px the desktop design should stop scaling, so that the page does not get too huge.

The configuration for that case looks like this:

$bases: (
  0: 420,
  720px: 768,
  1024px: 1280,
  1280px: 1px,
);

Using breakpoint names:

$breakpoints: (
  tablet: 720px,
  desktop: 1024px,
  box: 1280px,
);

$bases: (
  0: 420,
  tablet: 768,
  desktop: 1024,
  box: 1px,
);

Now when developing components, you can just use the pixel size values in the design and translate them into rem units (keep the factor 10 in mind).

For example:

.hero {
  padding: 2.4rem; // 24px at 420px width
  min-height: 40rem; // 400px at 420px width

  @include mq-from(tablet) {
    padding: 3.6rem; // 36px at 768px width
    min-height: 50rem; // 500px at 768px width
  }
}

If you do not configure $bases, flex layout will not be used.

Media Queries

Available media query mixins:

@include mq-from() {
}
@include mq-to() {
}
@include mq-between() {
}

You can use breakpoint names or pixels.

@include mq-from(tablet) {
}
@include mq-to(1000px) {
}
@include mq-between(mobile, 2000px) {
}

The media queries include the lower bound and exclude the upper bound.

@include mq-to(1000px) {
} // 0px to 999px
@include mq-from(1000px) {
} // 1000px and up
@include mq-between(1000px, 2000px) {
} // 1000px to 1999px

Container

$container: (
  0: (
    max-width: 1200px,
    padding: 1.6rem,
    margin: auto // center,,,
  ),
  tablet: (
    padding: 2.4rem,
  ),
  desktop: (
    padding: 3.2rem,
  ),
);

@include container; // responsive container using all configured breakpoints
@include container(desktop); // specific container at that breakpoint
padding: container-padding(tablet); // container padding at that breakpoint

Easings

Available easing variables:

$linear: cubic-bezier(0.25, 0.25, 0.75, 0.75);
$ease: cubic-bezier(0.25, 0.1, 0.25, 1);
$easeIn: cubic-bezier(0.42, 0, 1, 1);
$easeOut: cubic-bezier(0, 0, 0.58, 1);
$easeInOut: cubic-bezier(0.42, 0, 0.58, 1);

$easeInQuad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
$easeInCubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
$easeInQuart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
$easeInQuint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
$easeInSine: cubic-bezier(0.47, 0, 0.745, 0.715);
$easeInExpo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
$easeInCirc: cubic-bezier(0.6, 0.04, 0.98, 0.335);
$easeInBack: cubic-bezier(0.6, -0.28, 0.735, 0.045);

$easeOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
$easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1);
$easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1);
$easeOutQuint: cubic-bezier(0.23, 1, 0.32, 1);
$easeOutSine: cubic-bezier(0.39, 0.575, 0.565, 1);
$easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1);
$easeOutCirc: cubic-bezier(0.075, 0.82, 0.165, 1);
$easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);

$easeInOutQuad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
$easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1);
$easeInOutQuart: cubic-bezier(0.77, 0, 0.175, 1);
$easeInOutQuint: cubic-bezier(0.86, 0, 0.07, 1);
$easeInOutSine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
$easeInOutExpo: cubic-bezier(1, 0, 0, 1);
$easeInOutCirc: cubic-bezier(0.785, 0.135, 0.15, 0.86);
$easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55);

Fonts

Load fonts using the font-face mixin:

@include font-face(Roboto, "../../fonts/Roboto", normal, normal);

The mixin takes the following arguments:

@mixin font-face(
  $name,
  $path,
  $weight: null,
  $style: null,
  $exts: eot woff2 woff ttf svg
);