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 firstname.lastname@example.org:kalebheitzman/bluejay.git ./sass/bluejay
Include Bluejay in the top of your main sass file. Bower example:
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
/* 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.
- Do you really need another grid system Original source of inspiration for bluejay
- Pure CSS Size inspiration for breakpoints and mixins to include.
- Sassy Button Mixin Consistent global hovers and active states
- Useful SASS Mixins Ideas for Extras
- 8 Sass mixins you must have Ideas for Extras
- Hamburger Codepen by Luiz Mobile Hamburger menu icon
- Pure CSS Off Canvas Menu Responsive Menu