SASS Mixins to develop mobile-first CSS.
CSS HTML JavaScript Shell
Failed to load latest commit information.

Bluejay CSS3 Framework

Bluejay is an opinionated mobile-first CSS3 framework that I use to design websites quickly and easily. It is yours free of charge to do with whatever you want. Tweak it by importing a _variables.scss and Bluejay into your project.

Bluejay is built on top of Normalize.css. Normalize is a great start for HTML5-based web design. Bluejay are simply my opionated, repeatable styles for Grids, Forms, Buttons, Tables, and Menus built on top of normalize. Use them at your own risk.

View a demo of a clean Bluejay site.


Install via Bower (Recommended). You can also install it via NPM or Git.

bower install bluejay
npm install bluejay
git clone ./sass/bluejay

Include Bluejay in the top of your main sass file. Bower example:

@import 'bower_components/bluejay/src/scss/bluejay.scss';


Bluejay was created to be easily tweaked. I wanted something I could drop into my css to easily adjust and produce a different look for any sites I created. I've bundled all of my own personal styles into Bluejay with the ability to easily override the most common UI elements I use on websites.

Here is an example of altering the max row width using $wrapper and the column gutter width using $gutter.

/* defined in a _variables.scss file thats in the same
   directory as your styles.scss file. */
$wrapper: 95rem; // max-width of your grid
$gutter: 0.5rem; // gutter for columns

// your main styles file
@import 'variables';
@import 'bluejay';

Be sure to look at src/_variables.scss for details on each variable.