Skip to content
The responsive front-end kit.
JavaScript HTML CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
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)

You can’t perform that action at this time.