05.mixins.md

Functions

Gridle offer a bunch of usefull SASS mixins that you can use.

Generate custom class

Gridle allows you to generate some classes that are integrated with the gridle states system.

@include g-custom-class( {classname} , {statesNames} )

@include g-custom-class('center') {
	text-align: center;
}

This will generate the classes according the fact that you have the (tablet, desktop) states registered:

.center
.center@tablet
.center@desktop

State

Gridle provide a nice way to customize the look and feel of your site depending on the current state. Here's how:

@include g-state({stateName}) {
  {custom-css-code}
}

#sidebar {
	background : red;

	@include g-state(tablet) {
		background : green;
	}
}

Setup

This mixin is used to setup your grid.

@include g-setup({settings});

@include g-setup((
  min-width: null,
  max-width: null,
  query: null,
  columns: 12,
  rows: 12,
  column-width: 60,
  width: 1200,
  container-width: 85vw,
  container-max-width: 1200px
));

Register default mobile first states

This mixin is useful to register quickly some nice mobile first states. Here's the states that will be registered by this mixin:

@include g-register-mobile-first-states();
- tablet : 640px to infinite
- desktop : 992px to infinite
- large : 1200px to infinite

// setup
@include g-setup(());
// register states
@include g-register-mobile-first-state();
// generate classes
@include g-classes();

Generate classes

To output your grid, you'll need to call this mixin where you want the grid classes.

@include g-classes();