Frontendler

Import

First you need to import frontendler sass library.

@import "frontendler";

Settings

Frontendler has a settings file with default values:

                      
                      //FONT
                      //-----------------------------------------------------------
                      $font-family: "Open Sans", "Helvetica", sans-serif !default;
                      $font-size: 14px !default;
                      
                      
                      //ANIMATION
                      //-----------------------------------------------------------
                      $animation-duration: 0.25s !default;
                      $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:(
                      	"fade-in",
                      	"fade-out",
                      	"bounce-in-down",
                      	"bounce-in-up",
                      	"rubber-band",
                      	"zoom-in",
                      	"slide-in-up",
                      	"slide-in-down",
                      	"alert"
                      ) !default;
                      
                      
                      //GRID
                      //-----------------------------------------------------------
                      $grid-gutter: 40px !default;
                      $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;
                      
                      
                      //COLOR
                      //-----------------------------------------------------------
                      $colors:(
                      	"ocean":   #00a7ca,
                      	"blue":    #0075d3,
                      	"purple":  #8244a7,
                      	"pink":    #dd318a,
                      	"green":   #71be48,
                      	"yellow":  #f59d37,
                      	"orange":  #f75925,
                      	"red":     #dd202b,
                      	"dark":    #1c2731,
                      	"gray":    #606c78,
                      	"silver":  #939fac
                      ) !default;
                      
                      

But you can customize these in your own settings file like this:

                      
                      // your settings.scss
                      //-----------------------------------------------------------
                      						
                      // FONT
                      //-----------------------------------------------------------
                      $font-family: "Arial";
                      $font-size: 13px;	
                      
                      // GRID
                      //-----------------------------------------------------------	
                      $grid-breakpoints:(
                      	"phone": 100% max 600px,
                      	"tablet":  100% min 601px max 1280px,
                      	"desktop": 100% min 1281px
                      )!default;
                      
                      // COLOR
                      //-----------------------------------------------------------
                      $colors:(
                      	"background":    #0075d3,
                      	"text":    #1c2731
                      );
                      
                      // ANIMATION
                      //-----------------------------------------------------------
                      $animation-keyframes:(
                      	"fade-in",
                      	"fade-out",
                      );
                      
                      

Reset

After your settings, include reset css to normalize your styles with the settings values.

@include reset();

These is a example of how frontendler grid works.

grid-gutter

$grid-gutter: 40px;

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){
                      	...
                      };

grid-breakpoint

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

grid-breakpoint-hide

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

grid-breakpoint-show

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