FRONTENDLER SASS LIBRARY
This package contains all scss files used in frontendler project.
Dependencies
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.
Documentation
IMPORTANT: Now the Frontendler grid is entirely based on the flexbox display property.
Grid
grid-gutter var
;
grid-spaces var
Simple example:
;
This space list have the objective to keep the proportionality of the grid in all the spaces between all elements with the goal to get groups of content based on the proportional proximity respecting the responsive aspects.
The Gestalt law of proximity states that "objects or shapes that are close to one another appear to form groups". https://en.wikipedia.org/wiki/Principles_of_grouping#Proximity
In the link below you can get a very well done explanation about space scales.
https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62
With Frontendler you can define you own list of spaces as you can do in grid-breakpoints, colors, font-sizes, etc.. However the default value of the space list, based in geometric progression, is:
Default value:
;
grid-spaces function
Return a list of spaces in em unit based in a scale factor (multiplier) .
grid-spaces($grid-gutter, $scale-factor)
grid-space function
.class
grid-breakpoints var
;
grid-row mixin
grid-column mixin
grid-column-breakpoint mixin
or
grid-breakpoint mixin
;
grid-breakpoint-hide mixin
Font
font-family-base var
;
font-family-mono var
;
font-family-fallback var
;
font-family var
;
font-size var
;
font-sizes var
Simple example:
;
Default value:
;
font-sizes function
Return a list of font sizes based in a type scale factor. Based on this very useful tool http://type-scale.com/.
// Example of use in settings file: ;
Where $perfect-fourth
is a predefined value as these values below:
;;;;;;;;
font-size function
font-weights var
;
font-weight function
Colors
colors var
;
color function
.class
Animations
animations include
Add animation keyframes listed in $animation-keyframes
.
animation-duration var
;
animation-time-functions var
;
animation-keyframes var
;
Utils
clearfix mixin
More about this mixin in this link.
box-shadow mixin
Based in this awesome freebie.
Made with ♥ by Daniel Beff (@dbeff)