SASS Mixins to develop mobile-first CSS.
CSS HTML JavaScript Shell
Permalink
Failed to load latest commit information.
example
src
.gitignore
CHANGELOG.md
LICENSE
README.md
bower.json
package.json
scss.sh

README.md

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.

Installation

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

bower install bluejay
npm install bluejay
git clone git@github.com:kalebheitzman/bluejay.git ./sass/bluejay

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

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

Variables

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.

Inspiration