Skip to content
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
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.



  • 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


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">


Border Box class and mixin

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


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

The 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>

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


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

Multiple transitions

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

Opacity Mixin


.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>

Border radius Mixin


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


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


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%.


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

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.

You can’t perform that action at this time.