The responsive front-end kit.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app
.editorconfig
.eslintignore
.eslintrc
.gitattributes
.gitignore
.travis.yml
LICENSE
README.md
gulpfile.js
manifest.json
package.json

README.md

Frontendler

Frontendler version Build Status

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)