Odyssey

Features:

• Border Box class
• Responsive YouTube video (100% width of parent) class
• Max website content width class
• Transition class, ideal for multiple transitions without using 'all' selector (Mixin)
• Opacity class (Mixin)
• Circled class, takes an ideally squared block and rounds it to a circle
• Border radius class (Mixin)
• Six whitespaces at the bottom of a block

To Do: Docs for:

• vertical-align
• border-box
• circled

Install

Just download the odyssey.scss, modify it for your needs, compile it and add it before your other css files. Note: This classes arent prefixed.

You can run SASS with -w for SASS to watch the odyssey.scss

$	sass -w odyssey.scss

Add the compiled odyssey.css to your project.

<link rel="stylesheet" href="/path/to/odyssey.css">

Usage

Border Box class and mixin

Add the class .border-box to an element in order to change it's box model.

Example

<div class="myAwesomeDiv border-box">
	<p>Hello World!</p>
</div>

The border.box properties can also be added using a minxin as follows.

.yourClass {
	@include border-box;
}

Responsive YouTube video

Add the following HTLM code to place a YouTube video:

<div class="embed-container">
	<iframe src="{{youtube-video-link}}" frameborder='0' allowfullscreen></iframe>
</div>

Please note that the video will take the whole width of it's parent element.

Customizable content width class

Change the following code in the odyssey.scss file

$content-max-width: 960px;

Transition Mixin

Example

.yourClass {
	@include transition(120ms background-color ease);
}

Multiple transitions

.yourClass {
	@include transition((120ms background-color, 200ms color, 70ms font-size) ease);
}

Opacity Mixin

Example

.yourClass {
	@include opacity(0.85);
}

Circled class

Turns a squared block into a circle by adding the .circled class to a block.

<div class="circled">
	<p>If I was a square now I am a circle! :D</p>
</div>

Border radius Mixin

Example

.yourClass {
	@include border-radius(12%);
}
.anotherClass {
	@include border-radius(4px);
}

Whitespace

Add one of the following CSS classes to your element in order to provide whitespace (similar to padding) at the bottom of an element.

.espacio-small
.espacio-medium
.espacio-large
.espacio-xlarge
.espacio-xxlarge
.espacio-sick

Text Align to Center class

Please note that in order to make this work as it should be desired, the width of the element is set to 100%.

Example

<div class="text-align-center">
	<p>Centered</p>
</div>
<div class="text-align-center-important">
	<p>Centered and Forced</p>
</div>

CSS Only Classes

Add the class pull-bottom to set : vertical-align: bottom. }

Add the class pull-text-bottom to set : vertical-align: bottom.

Add the class pull-top to set : vertical-align: top.

Add the class pull-text-top to set : vertical-align: top.

Add the class cursor-default to set : cursor: default, it also adds it on hover.

Add the class cursor-pointer to set : cursor: pointer, it also adds it on hover.

Add the class phantom to set : pointer-events: none.