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

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

Used by

Author

  • Adonis K.

functions

functions

px2em

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

Description

A function that convert pixels into em values

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$pixels

the value in pixels you want to convert into em

Numbernone
$base

the base value for em, defaults to 16

Number16

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

Author

  • Adonis K.

float

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

Description

Generate helper classes for floating elements.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$direction

is the value that defines the align class' direction.

Stringnone
$important

is the value that declares whether the float will be forced via !important or not.

Booleanfalse

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

Author

  • Adonis K.

invisible

@mixin invisible() { ... }

Description

A mixin that generates CSS for invisible

Parameters

None.

Example

.invisible{
	@include invisible;
}

Used by

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

Author

  • Adonis K.

placeholders

clearfix

%clearfix { ... }

Requires

Author

  • Adonis K.

hidden

%hidden { ... }

Requires

Author

  • Adonis K.

invisible

%invisible { ... }

Requires

Author

  • Adonis K.

ir

%ir { ... }

Requires

  • [mixin] ir

Author

  • Adonis K.

visuallyhidden

%visuallyhidden { ... }

Requires

Author

  • Adonis K.

layout

mixins

blockquote

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

Description

A mixin that generates CSS for a styled blockquote

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$border-color

is the value that defines the blockquote's border color

Stringnone

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$font-color

is the value that defines the button's font color

Stringnone
$bg-color

is the value that defines the button's background color

Stringnone
$radius

is the value that defines the button's border radius

Number0

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.

loading

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

Description

A mixin that generates CSS for an animated loading element

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$width

is the value that defines the loading element's size

Number1.5em
$style

is the value that defines the loading's style

Number1
$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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$direction

is the value that defines the media object's direction

Stringleft

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

Author

  • Adonis K.

triangle

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

Description

A mixin that generates CSS for a triangle

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$size

is the value that defines the triangle's size

Numbernone
$color

is the value that defines the triangle's color

Stringnone
$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]

Stringnone

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$width

is the value that defines where the text will be truncated

Number100%

Example

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

Author

  • Adonis K.

placeholders

form

%form { ... }

Requires

Author

  • Adonis K.

vertical-form

%vertical-form { ... }

Requires

Author

  • Adonis K.

unstyled-list

%unstyled-list { ... }

Requires

Used by

Author

  • Adonis K.

floated-list

%floated-list { ... }

Requires

Used by

Author

  • Adonis K.

inline-list

%inline-list { ... }

Requires

Used by

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

parameterNameparameterDescriptionparameterTypeparameterDefault 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

Author

  • Adonis K.

inline-list

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

Description

A mixin that generates CSS for inline lists

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault 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

Author

  • Adonis K.

modules

mixins

grid

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

Description

A mixin that generates CSS for a grid system

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$N

is the value that defines the grid's amount of columns

Number12
$gutter

is the value that defines the grid's gutter spacing

Number0

Example

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

Requires

Author

  • Adonis K.

normalize

@mixin normalize() { ... }

Description

Normalize.css

Parameters

None.

Example

	@include normalize;

Author

  • Adonis K.