Atom Packages Directory

a package directory for a text editor of the 21st Century

Frontendler Atom Snippets

Install with:
    apm install frontendler-atom-snippets

Frontendler Atom Snippets

Atom snippets for:

Frontendler Sass Library


Frontendler Sass Library

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

scss $grid-gutter: 40px !default;

grid-breakpoints var

scss $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

scss @include grid-row()

grid-column mixin

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

grid-column-breakpoint mixin

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


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

grid-breakpoint mixin

scss @include grid-breakpoint($breakpoints...) { ... };

grid-breakpoint-hide mixin

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


colors var

scss $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

scss @function color($color-name,$amount:50%)


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

scss @include animations;

animation-duration var

scss $animation-duration: 0.25s !default;

animation-time-functions var

scss $animation-time-functions: ( "in-out-quad": cubic-bezier(0.455, 0.030, 0.515, 0.955), "in-out-cubic": cubic-bezier(0.645, 0.045, 0.355, 1.000), "in-out-quart": cubic-bezier(0.770, 0.000, 0.175, 1.000), "in-out-quint": cubic-bezier(0.860, 0.000, 0.070, 1.000), "in-out-sine": cubic-bezier(0.445, 0.050, 0.550, 0.950), "in-out-expo": cubic-bezier(1.000, 0.000, 0.000, 1.000), "in-out-circ": cubic-bezier(0.785, 0.135, 0.150, 0.860), ) !default;

animation-keyframes var

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


clearfix mixin

More about this mixin in this link.

scss @include clearfix;

box-shadow mixin

Based in this awesome freebie.

scss @include box-shadow ($level);

Made with ♥ by Daniel Beff (@dbeff)

Keywords: frontendler, atom, snippet, snippets Suggest keywords
Fork me on GitHub