A CSS collection of useful mixings for websites and UI's using SCSS to help you have a cleaner, faster front-end CSS
CSS Makefile
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
LICENSE
Makefile
README.md
odyssey.css
odyssey.scss

README.md

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.