forms

mixins

form

@mixin form() { ... }

Description

A mixin that generates CSS for a footer that is fixed on the bottom of the page (Don't forget to add a bottom margin to the previous element to avoid overlapping the footer)

Parameters

None.

Example

.form{
	@include form;
}

Used by

[mixin] vertical-form
[placeholder] form

Author

Adonis K.

vertical-form

@mixin vertical-form() { ... }

Description

A mixin that generates CSS for a vertical form

Parameters

None.

Example

.vertical-form{
	@include vertical-form;
}

Requires

[mixin] form

Used by

[placeholder] vertical-form

Author

Adonis K.

functions

px2em

@function px2em($pixels, $base: 16) { ... }

Description

A function that convert pixels into em values

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$pixels`	the value in pixels you want to convert into em	`Number`	—none
`$base`	the base value for em, defaults to 16	`Number`	`16`

Example

.a{
	padding: px2em(12, 16); // padding: 0.75em;
}

Author

Adonis K.

unitless

@function unitless() { ... }

Parameters

None.

Example

.a{
	padding:#{unitless(1em)}rem; // padding: 1rem;
}

Author

Adonis K.

helpers

mixins

align

@mixin align() { ... }

Parameters

None.

Example

.a{
	@include align(right); // text-align: right;
}
.b{
	@include align(left, important); // text-align: left !important;
}

Author

Adonis K.

clearfix

@mixin clearfix() { ... }

Description

A mixin that generates CSS for an element that needs to be cleared

Parameters

None.

Example

.a{
	@include clearfix;
}

Used by

[placeholder] clearfix
[mixin] media
[mixin] floated-list
[mixin] grid

Author

Adonis K.

float

@mixin float($direction, $important: false) { ... }

Description

Generate helper classes for floating elements.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$direction`	is the value that defines the align class' direction.	`String`	—none
`$important`	is the value that declares whether the float will be forced via !important or not.	`Boolean`	`false`

Example

.a{
	@include float(right); // float: right;
}
.b{
	@include float(left, important); // float: left !important;
}

Author

Adonis K.

hidden

@mixin hidden() { ... }

Description

A mixin that generates CSS for hidden

Parameters

None.

Example

.hidden{
	@include hidden;
}

Used by

[placeholder] hidden

Author

Adonis K.

invisible

@mixin invisible() { ... }

Description

A mixin that generates CSS for invisible

Parameters

None.

Example

.invisible{
	@include invisible;
}

Used by

[placeholder] invisible

Author

Adonis K.

ir

@mixin ir() { ... }

Description

A mixin that generates CSS for image replacement

Parameters

None.

Example

.image-replacement{
	@include ir;
}

Used by

[placeholder] ir

Author

Adonis K.

visuallyhidden

@mixin visuallyhidden() { ... }

Description

A mixin that generates CSS for visuallyhidden

Parameters

None.

Example

.visuallyhidden{
	@include visuallyhidden;
}

Used by

[placeholder] visuallyhidden

Author

Adonis K.

placeholders

clearfix

%clearfix { ... }

Requires

[mixin] clearfix

Author

Adonis K.

hidden

%hidden { ... }

Requires

[mixin] hidden

Author

Adonis K.

invisible

%invisible { ... }

Requires

[mixin] invisible

Author

Adonis K.

ir

%ir { ... }

Requires

[mixin] ir

Author

Adonis K.

visuallyhidden

%visuallyhidden { ... }

Requires

[mixin] visuallyhidden

Author

Adonis K.

layout

mixins

blockquote

@mixin blockquote($border-color) { ... }

Description

A mixin that generates CSS for a styled blockquote

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$border-color`	is the value that defines the blockquote's border color	`String`	—none

Example

.a{
	@include blockquote(#ccc);
}

Author

Adonis K.

button

@mixin button($font-color, $bg-color, $radius: 0) { ... }

Description

A mixin that generates CSS for a styled button

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$font-color`	is the value that defines the button's font color	`String`	—none
`$bg-color`	is the value that defines the button's background color	`String`	—none
`$radius`	is the value that defines the button's border radius	`Number`	`0`

Example

.blue-flat-button{
	@include button(#fff, #09f, 0);
}

.blue-curved-button{
	@include button(#fff, #09f, 2px);
}

.white-flat-button{
	@include button(#222, #fff, 0);
}

.white-curved-button{
	@include button(#222, #fff, 2px);
}

.dark-blue-flat-button{
	@include button(#fff, #458, 0);
}

.dark-blue-curved-button{
	@include button(#fff, #458, 2px);
}

Author

Adonis K.

fixed-footer

@mixin fixed-footer() { ... }

Description

A mixin that generates CSS for a footer that is fixed on the bottom of the page (Don't forget to add a bottom margin to the previous element to avoid overlapping the footer)

Parameters

None.

Example

.fixed-footer{
	@include footer;
}

Used by

[placeholder] fixed-footer

Author

Adonis K.

loading

@mixin loading($width: 1.5em, $style: 1, $color: #666) { ... }

Description

A mixin that generates CSS for an animated loading element

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$width`	is the value that defines the loading element's size	`Number`	`1.5em`
`$style`	is the value that defines the loading's style	`Number`	`1`
`$color`	is the value that defines the loading's color	`String`	`#666`

Example

.loading1{
	@include loading(1.5em);
}

.loading2{
	@include loading(1.5em, 2);
}

Author

Adonis K.

media

@mixin media($direction: left) { ... }

Description

A mixin that generates CSS for a media object

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$direction`	is the value that defines the media object's direction	`String`	`left`

Example

<div class="media">
	<div class="img">
		<img src="http://placekitten.com/50/50">
	</div>
	<div>
		<p>Your content goes here</p>
	</div>
</div>

.media{
	@include media;
}

.media-right{
	@include media(right);
}

Requires

[mixin] clearfix

Author

Adonis K.

triangle

@mixin triangle($size, $color, $direction) { ... }

Description

A mixin that generates CSS for a triangle

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$size`	is the value that defines the triangle's size	`Number`	—none
`$color`	is the value that defines the triangle's color	`String`	—none
`$direction`	is the value that defines the triangle's directions color [top, left, bottom, right, top left, bottom left, bottom right, top right, left right, top bottom, top left right, bottom left right, top bottom left, top bottom right]	`String`	—none

Example

.triangle-top{
	include triangle(30px, #0099ff, top);
}
.triangle-left{
	include triangle(30px, #0099ff, left);
}
.triangle-bottom{
	include triangle(30px, #0099ff, bottom);
}
.triangle-right{
	include triangle(30px, #0099ff, right);
}
.triangle-topleft{
	include triangle(30px, #0099ff, top left);
}
.triangle-bottomleft{
	include triangle(30px, #0099ff, bottom left);
}
.triangle-bottomright{
	include triangle(30px, #0099ff, bottom right);
}
.triangle-topright{
	include triangle(30px, #0099ff, top right);
}
.triangle-leftright{
	include triangle(30px, #0099ff, left right);
}
.triangle-topbottom{
	include triangle(30px, #0099ff, top bottom);
}
.triangle-topleftright{
	include triangle(30px, #0099ff, top left right);
}
.triangle-bottomleftright{
	include triangle(30px, #0099ff, bottom left right);
}
.triangle-topbottomleft{
	include triangle(30px, #0099ff, top bottom left);
}
.triangle-topbottomright{
	include triangle(30px, #0099ff, top bottom right);
}

Author

Adonis K.

truncate

@mixin truncate($width: 100%) { ... }

Description

A mixin that generates CSS for an effect added to a string containing element whose text will be truncated and then an extra character of ellipsis will be added.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$width`	is the value that defines where the text will be truncated	`Number`	`100%`

Example

.truncate{
	@include truncate(2em);
}

Author

Adonis K.

placeholders

fixed-footer

%fixed-footer { ... }

Requires

[mixin] fixed-footer

Author

Adonis K.

form

%form { ... }

Requires

[mixin] form

Author

Adonis K.

vertical-form

%vertical-form { ... }

Requires

[mixin] vertical-form

Author

Adonis K.

unstyled-list

%unstyled-list { ... }

Requires

[placeholder] unstyled-list

Used by

[placeholder] unstyled-list
[mixin] floated-list
[mixin] inline-list

Author

Adonis K.

floated-list

%floated-list { ... }

Requires

[placeholder] floated-list

Used by

[placeholder] floated-list

Author

Adonis K.

inline-list

%inline-list { ... }

Requires

[placeholder] inline-list

Used by

[placeholder] inline-list

Author

Adonis K.

list

mixins

unstyled-list

@mixin unstyled-list() { ... }

Description

A mixin that generates CSS for unstyled lists

Parameters

None.

Example

.list{
	@include unstyled-list;
}

Author

Adonis K.

floated-list

@mixin floated-list($spacing, $direction) { ... }

Description

A mixin that generates CSS for floated lists

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$spacing`	{Number} [0] $spacing is the value that defines the floated-list's spacing		—none
`$direction`	{String} $direction [left] is the value that defines the floated-list's direction .list{ @include floated-list; }		—none

Example

Requires

[placeholder] unstyled-list
[mixin] clearfix

Author

Adonis K.

inline-list

@mixin inline-list($spacing, $direction) { ... }

Description

A mixin that generates CSS for inline lists

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$spacing`	$spacing {Number} is the value that defines the inline-list's spacing (defaults to 0)		—none
`$direction`	$direction {String} [left] is the value that defines the inline-list's direction		—none

Example

.my-list{
	@include inline-list;
}

Requires

[placeholder] unstyled-list

Author

Adonis K.

modules

mixins

grid

@mixin grid($N: 12, $gutter: 0) { ... }

Description

A mixin that generates CSS for a grid system

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$N`	is the value that defines the grid's amount of columns	`Number`	`12`
`$gutter`	is the value that defines the grid's gutter spacing	`Number`	`0`

Example

.grid{
	@include grid(16, 1em);
}

Requires

[mixin] clearfix

Author

Adonis K.

normalize

@mixin normalize() { ... }

Description

Normalize.css

Parameters

None.

Example

	@include normalize;

Author

Adonis K.