Frontendler

The responsive frontend kit.

Simple, efficient.

http://frontendler.io/

---

Dependencies

Frontendler need Nodejs and Gulp to run.

Node.Js - How to install

Gulp $ npm install gulp -g

Install

Install project node dependencies $ npm install

Run frontendler

watch

$ gulp watch

build

$ gulp build

Sass

Reset

reset

@include reset;

Grid

grid-gutter

$grid-gutter: 40px !default;

grid-breakpoints

$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

@include grid-row()

grid-column

@include grid-column($column, $columns: 12, $gutter: $grid-gutter)

grid-column-breakpoint

@include grid-column-breakpoint($breakpoint, $column, $columns: 12, $gutter: false)

or

@include grid-column-breakpoint($breakpoint, $column, $columns: 12, $gutter: false) {
    //optional custom css
}

grid-breakpoint

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

grid-breakpoint-hide

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

grid-breakpoint-show

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

Colors

colors

$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 color($color-name,$amount:50%)

Animations

animations

@include animations;

animation-duration

$animation-duration: 0.25s !default;

animation-time-functions

$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

$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

More about this mixin in this link.

@include clearfix;

box-shadow

Based in this awesome freebie.

@include box-shadow ($level);

---

Made with ♥ by Daniel Beff (@dbeff)