effects

css

.effect.chessboard

Since 1.0.0
.effect.chessboard { ... }

Description

Chessboard effect - black and white geometric checkered pattern. Mostly best for backgrounds.

Links

em.oji

Since 1.0.0
em.oji { ... }

Description

Emoji are ideograms and smileys used in electronic messages and web pages. Emoji exist in various genres.

Links

em.kaomoji

Since 1.0.0
em.kaomoji { ... }

Description

Kaomoji (顔文字) is a popular Japanese emoticon style made up of Japanese characters and grammar punctuations, and are used to express emotion in texting and cyber communication.

Links

.effect.rotate

Since 1.0.0
.effect.rotate { ... }

Description

Rotate in percentage units.

Links

.effect.spinner

Since 1.0.0
.effect.spinner { ... }

Description

Spinner animation

Links

elements

css

.box

Since 1.0.0
.box { ... }

Description

Box - A white box to contain other elements.

Links

.button

Since 1.0.0
.button { ... }

Description

Button - The classic button, in different colors, sizes, and states.

Links

.content

Since 1.0.0
.content { ... }

Description

Content - A single class to handle WYSIWYG generated content, where only HTML tags are available.

Links

.icon

Since 1.0.0
.icon { ... }

Description

Icon - Put inside the code any icon you like.

Links

.image

Since 1.0.0
.image { ... }

Description

Image - A container for responsive images.

Links

.notification

Since 1.0.0
.notification { ... }

Description

Notification - Bold notification blocks, to alert your users of something.

Links

.block

Since 1.0.0
.block { ... }

Description

Block

Links

.delete

Since 1.0.0
.delete { ... }

Description

Delete

Links

.heading

Since 1.0.0
.heading { ... }

Description

Heading

Links

.highlight

Since 1.0.0
.highlight { ... }

Description

Highlight

Links

.loader

Since 1.0.0
.loader { ... }

Description

Loader

Links

.number

Since 1.0.0
.number { ... }

Description

Number

Links

.progress

Since 1.0.0
.progress { ... }

Description

Progress - Native HTML progress bars.

Links

.table

Since 1.0.0
.table { ... }

Description

Table - The inevitable HTML table, with special case cells.

Links

.tag

Since 1.0.0
.tag { ... }

Description

Tags - Small tag labels to insert anywhere.

Links

.title

Since 1.0.0
.title { ... }

Description

Title - Simple headings to add depth to your page.

Links

.subtitle

Since 1.0.0
.subtitle { ... }

Description

Subtitle - More informations for your headings..

Links

filters

css

.filter.seventyseven

Since 1.0.0
.filter.seventyseven { ... }

Description

1977 effect. As the name suggests, this filter gives a you nostalgic 70’s feel by making photos brighter as well as faded.

Links

.filter.aden

Since 1.0.0
.filter.aden { ... }

Description

Aden is famous for its retro, pastel-y look, which works great if you need to soften harsh lights.

Links

.filter.amaro

Since 1.0.0
.filter.amaro { ... }

Description

This filter adds more light to the centre of the photo and darkens around the edges.

Links

.filter.blur

Since 1.0.0
.filter.blur { ... }

Description

Applies a blur effect to the image. A larger value will create more blur.

Links

.filter.brannan

Since 1.0.0
.filter.brannan { ... }

Description

Brannan adds high contrast and exposure to your photo, giving it some stylish metallic tint. This photo effect is soft and washed out, like a photo from old granny’s album.

Links

.filter.brightness

Since 1.0.0
.filter.brightness { ... }

Description

The Brightness filter provides advanced options for adjusting brightness.

Links

.filter.brooklyn

Since 1.0.0
.filter.brooklyn { ... }

Description

Brooklyn brightens up your image and boosts its yellow tones. Depending on the image, it can give it an ethereal look.

Links

.filter.clarendon

Since 1.0.0
.filter.clarendon { ... }

Description

Clarendon filter will brighten the highlights found in your photos, while also making the shadows a bit bolder.

Links

.filter.contrast

Since 1.0.0
.filter.contrast { ... }

Description

Contrast filter adjusts the contrast of an image.

Links

.filter.earlybird

Since 1.0.0
.filter.earlybird { ... }

Description

Earlybird to get a retro “Polaroid” feel with soft faded colors and a hint of yellow.

Links

.filter.gingham

Since 1.0.0
.filter.gingham { ... }

Description

Gingham muddy highlights, brightness, a slight haze and a subtle warm up of the tones by carefully applying red and magenta to selected parts of the image.

Links

.filter.grayscale

Since 1.0.0
.filter.grayscale { ... }

Description

Converts the image to grayscale.

Links

.filter.hudson

Since 1.0.0
.filter.hudson { ... }

Description

Hudson emphasizes light in your image and gives your photos a bluish, colder feel.

Links

.filter.hue-rotate

Since 1.0.0
.filter.hue-rotate { ... }

Description

Applies a hue rotation on the image. The value defines the number of degrees around the color circle the image samples will be adjusted.

Links

.filter.inkwell

Since 1.0.0
.filter.inkwell { ... }

Description

Inkwell adds high contrast and also makes your photos black and white.

Links

.filter.invert

Since 1.0.0
.filter.invert { ... }

Description

Inverts the samples in the image. 0% (0) is default and represents the original image. 100% (100) will make the image completely inverted.

Links

.filter.opacity

Since 1.0.0
.filter.opacity { ... }

Description

Sets the opacity level for the image. The opacity-level describes the transparency-level, where: 0% (0) is completely transparent. 100% (100) is default and represents the original image (no transparency).

Links

.filter.saturate

Since 1.0.0
.filter.saturate { ... }

Description

Saturates the image. 0% (0) will make the image completely un-saturated. 100% (100) is default and represents the original image. Values over 100% provides super-saturated results.

Links

.filter.sepia

Since 1.0.0
.filter.sepia { ... }

Description

Converts the image to sepia. 0% (0) is default and represents the original image. 100% (100) will make the image completely sepia.

Links

form

mixins

.input

Since 1.0.0
@mixin .input() { ... }

Description

Input

Parameters

None.

Links

css

.textarea

Since 1.0.0
.textarea { ... }

Description

Textarea

Links

.checkbox, .radio

Since 1.0.0
.checkbox, .radio { ... }

Description

Checkbox, Radio

Links

.radio

Since 1.0.0
.radio { ... }

Description

Radio

Links

.select

Since 1.0.0
.select { ... }

Description

Select

Links

.file

Since 1.0.0
.file { ... }

Description

File

Links

layout

css

.container

Since 1.0.0
.container { ... }

Description

Container - A simple container to center your content horizontally.

Links