Skip to content
Frontendler sass library
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


npm version

This package contains all scss files used in frontendler project.


This library is browser prefixes free so if you want to use this package in your personal project we strongly recommend you to use Autoprefixer for manager your prefixes.


IMPORTANT: Now the Frontendler grid is entirely based on the flexbox display property.


grid-gutter var

$grid-gutter: 2em !default;

grid-spaces var

Simple example:

$grid-spaces: ("small": 1em, "medium": 2em, "large": 4em)!default;

This space list have the objective to keep the proportionality of the grid in all the spaces between all elements with the goal to get groups of content based on the proportional proximity respecting the responsive aspects.

The Gestalt law of proximity states that "objects or shapes that are close to one another appear to form groups".

In the link below you can get a very well done explanation about space scales.

With Frontendler you can define you own list of spaces as you can do in grid-breakpoints, colors, font-sizes, etc.. However the default value of the space list, based in geometric progression, is:

Default value:

$grid-spaces: grid-spaces($grid-gutter, 2) !default;

grid-spaces function

Return a list of spaces in em unit based in a scale factor (multiplier) .

grid-spaces($grid-gutter, $scale-factor)

grid-space function

.class {
  padding: grid-space($grid-space-name);

grid-breakpoints var

$grid-breakpoints: (
    "xsmall": 100% max 600px,
    "small": 100% min 601px max 960px,
    "medium": 100% min 961px max 1280px,
    "large": 1280px min 1281px max 1600px,
    "xlarge": 1600px min 1601px

grid-row mixin

@include grid-row();

grid-column mixin

@include grid-column($flex: 1, $gutter: $grid-gutter);

grid-column-breakpoint mixin

@include grid-column-breakpoint($breakpoint, $flex: 1, $gutter: false);


@include grid-column-breakpoint($breakpoint, $flex: 1, $gutter: false) {

grid-breakpoint mixin

@include grid-breakpoint($breakpoints...) {

grid-breakpoint-hide mixin

@include grid-breakpoint-hide ($breakpoints...);


font-family-base var

$font-family-base: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
  Roboto !default;

font-family-mono var

$font-family-mono: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier,
  monospace !default;

font-family-fallback var

$font-family-fallback: "Helvetica Neue", sans-serif !default;

font-family var

$font-family: $font-family-base, $font-family-fallback !default;

font-size var

$font-size: 16px !default;

font-sizes var

Simple example:

$font-sizes: (
  "small": 0.8em,
  "medium": 1em,
  "large": 2em

Default value:

$font-sizes: font-sizes($perfect-fourth);

font-sizes function

Return a list of font sizes based in a type scale factor. Based on this very useful tool

// Example of use in settings file:
$font-sizes: font-sizes($perfect-fourth);

Where $perfect-fourth is a predefined value as these values below:

$minor-second: 1.067;
$major-second: 1.125;
$minor-third: 1.2;
$major-third: 1.25;
$perfect-fourth: 1.333;
$augmented-fourth: 1.414;
$perfect-fifth: 1.5;
$golden-ratio: 1.618;

font-size function

@function font-size($size-name);

font-weights var

$font-weights: ("light" : lighter, "regular" : normal, "bold" : bold)!default;

font-weight function

@function font-weight($weight-name);


colors var

$colors: (
    "ocean": #00a7ca,
    "blue": #0075d3,
    "purple": #8244a7,
    "pink": #dd318a,
    "green": #71be48,
    "yellow": #f59d37,
    "orange": #f75925,
    "red": #dd202b,
    "dark": #1c2731,
    "gray": #606c78,
    "silver": #939fac

color function

.class {
  color: color($color-name, $amount:50%);


animations include Add animation keyframes listed in $animation-keyframes.

@include animations;

animation-duration var

$animation-duration: 0.25s !default;

animation-time-functions var

$animation-time-functions: (
    "in-out-quad": cubic-bezier(0.455, 0.03, 0.515, 0.955),
    "in-out-cubic": cubic-bezier(0.645, 0.045, 0.355, 1),
    "in-out-quart": cubic-bezier(0.77, 0, 0.175, 1),
    "in-out-quint": cubic-bezier(0.86, 0, 0.07, 1),
    "in-out-sine": cubic-bezier(0.445, 0.05, 0.55, 0.95),
    "in-out-expo": cubic-bezier(1, 0, 0, 1),
    "in-out-circ": cubic-bezier(0.785, 0.135, 0.15, 0.86)

animation-keyframes var

$animation-keyframes: (


clearfix mixin

More about this mixin in this link.

@include clearfix;

box-shadow mixin

Based in this awesome freebie.

@include box-shadow ($level);

Made with ♥ by Daniel Beff (@dbeff)

You can’t perform that action at this time.