mixgen

Mixgen

Mixgen is a library that will help you to simplify your css.

The idea of this library is to generate classes that will be directly used in your HTML, you will not have to create weird class name because you need to add a specific css property.

Getting stated

Optionally: to install with bower, use:

bower install mixgen --save
npm install mixgen --save

Add Mixin Styles

Add the sass module you need, and call the mixin to generate your classes.

Ex: If you want to generate generic padding classes you will add the padding.scss file and call the mixin like that:

@include generate-paddings();

By default some mixin are using default values located in the variables.scss

Generic Mixin Class Generator

All mixin used to generate your css classes are using the generic mixin called css-generator, this mixin allows you to generate any css class you need.

How it's work

Mixin definition :

@mixin css-generator($className, $cssProperty, $values, $breakpoints);

Arguments	Type	Description
$className	String	The name of your generated class name
$cssProperty	Css property	The css property to use (Ex: padding, background-color, ...)
$values	(List of map) or (map)	The generated values for the css property and optionally class name concatenated with $className
$breakpoints	Map	The breakpoints values (Ex: ('xs': 0, 'sm': 544px, 'md': 768px, 'lg': 992px, 'xl': 1200px))

Example 1

@include css-generator($className: 'color', $cssProperty: color, $values: ('red': #ff0000), $breakpoints: (xs: 0, sm: 544px));

will generate

.color-red-xs {
  color: #ff0000 !important; }

@media (min-width: 544px) {
  .color-red-sm {
    color: #ff0000 !important; } }

Example 2

@include css-generator($className: 'border-top', $cssProperty: border-top, $values: (('xs': 1px), solid, ('red': #ff0000)), $breakpoints: null);

will generate

.border-top-xs-red {
  border-top: 1px solid #ff0000 !important; }

Advanced example :

css-generator('box-shadow', box-shadow, (('h10': 10px), ('v10': 10px), ('s5': 5px), ('red': red)), null);

will generate

.box-shadow-h10-v10-s5-red {
  box-shadow: 10px 10px 5px red !important; }

Included mixin

All mixin using the breakpoints to disable it you have to set the $breakpoints value to null

Borders

Arguments	Type	Required	Description
$colors	Map	true	The color you want to apply to the border (Ex: ('red': #ffffff, 'blue': #ffffff))
$values	Map	optional (default values used from variables.scss)	The differents values to apply to this border (Ex: ('xs': 1px, 'sm': 2px))
$type	Css property	optional (default value is solid)	The type of the border (Ex: solid, dotted ...)
$breakpoints	Map	optional (default values used from variables.scss)	The breakpoints values (Ex: ('xs': 0, 'sm': 544px, 'md': 768px, 'lg': 992px, 'xl': 1200px))

Colors (will generate the background-color and text-color class)

Arguments	Type	Required	Description
$colors	List or Map	true	The color you want to apply to the border (Ex: ('red': red, 'white': white))
$breakpoints	Map	optional (default values used from varaibles.scss)	The breakpoints values (Ex: ('xs': 0, 'sm': 544px, 'md': 768px, 'lg': 992px, 'xl': 1200px))

Float (will generate the pull-left and pull-right)

Arguments	Type	Required	Description
$breakpoints	Map	optional (default values used from varaibles.scss)	The breakpoints values (Ex: ('xs': 0, 'sm': 544px, 'md': 768px, 'lg': 992px, 'xl': 1200px))

Line Height

Arguments	Type	Required	Description
$values	Map	optional (default values used from variables.scss)	The differents values to apply to this border (Ex: ('xs': 1, 'sm': 2))
$breakpoints	Map	optional (default values used from varaibles.scss)	The breakpoints values (Ex: ('xs': 0, 'sm': 544px, 'md': 768px, 'lg': 992px, 'xl': 1200px))

Margins and Paddings

Arguments	Type	Required	Description
$sizes	Map	optional (default values used from variables.scss)	The differents values to apply to this border (Ex: ('xs': 1px, 'sm': 2px))
$sides	List of css property	optional (default value used from variables.scss)	The type of the border (Ex: left, right, bottom)
$breakpoints	Map	optional (default values used from varaibles.scss)	The breakpoints values (Ex: ('xs': 0, 'sm': 544px, 'md': 768px, 'lg': 992px, 'xl': 1200px))

Text align

Arguments	Type	Required	Description
$sides	List of css property	optional (default value used from variables.scss)	The type of the border (Ex: left, center, right)
$breakpoints	Map	optional (default values used from varaibles.scss)	The breakpoints values (Ex: ('xs': 0, 'sm': 544px, 'md': 768px, 'lg': 992px, 'xl': 1200px))

Texts

Arguments	Type	Required	Description
$sizes	Map	optional (default values used from variables.scss)	The differents values to apply to this border (Ex: ('xs': 10px, 'sm': 15px))
$breakpoints	Map	optional (default values used from varaibles.scss)	The breakpoints values (Ex: ('xs': 0, 'sm': 544px, 'md': 768px, 'lg': 992px, 'xl': 1200px))