frontendler-sass

    1.5.5 • Public • Published

    FRONTENDLER SASS LIBRARY

    npm version

    This package contains all scss files used in frontendler project.

    Dependencies

    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.

    Documentation

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

    Grid

    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". https://en.wikipedia.org/wiki/Principles_of_grouping#Proximity

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

    https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62

    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
      )!default;

    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);

    or

    @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

    font-family-base var

    $font-family-base: -apple-systemsystem-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 http://type-scale.com/.

    // 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

    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
      )
      !default;

    color function

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

    Animations

    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)
      )
      !default;

    animation-keyframes var

    $animation-keyframes: (
        "fade-in",
        "fade-out",
        "bounce-in-down",
        "bounce-in-up",
        "rubber-band",
        "zoom-in",
        "slide-in-up",
        "slide-in-down",
        "alert"
      )
      !default;

    Utils

    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)

    Keywords

    none

    Install

    npm i frontendler-sass

    DownloadsWeekly Downloads

    9

    Version

    1.5.5

    License

    MIT

    Last publish

    Collaborators

    • dbeff