Bluejay Sass Mixins

A collection of sass mixin's to generate mobile-first css. Bluejay contains mixins to create grids, menus, buttons, etc.

Installation

Install via Bower (Recommended)

bower install bluejay

Install via NPM

npm install bluejay

Install via Git

git clone [email protected]:kalebheitzman/bluejay.git ./sass/bluejay

Include bluejay in your main sass file. Bower example:

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

Base

These mixins are built on top of Normalize.css. Normalize is a great start for HTML5-based design. bluejay builds upon this base with grids, forms, buttons, tables, and menus mixins.

Variables

Override variables in the file your creating your sass. Adjusting any of the variables will alter the output of your css. Here is an example of altering the max row width using $wrapper and the column gutter width using $gutter.

@import 'bluejay';

$wrapper: 95rem;
$gutter: 0.5rem;

Grids

Mixins to create rows and columns in your sass. Grids consist of 3 concepts: rows, columns, and breakpoints. These three mixins help create any grid system you choose.

Automagic

Creating a grid for prototyping is easy. It's as simple as knowing how many columns you want to work with. Here is an example of how to create a 5 column grid. Columns are automatically prefixed with col-.

@include grid(5)

This will output a mobile-first grid system including offsets that you can easily protype with. This is the .col-1-2 section from using the grid(5) mixin.

.col-1-2 {
  float: left;
  width: 100%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

@media only screen and (min-width: 48rem) {

  .col-1-2 {
    float: left;
    width: 50%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .push-1-2 {
    position: relative;
    left: 50%;
  }

  .pull-1-2 {
    position: relative;
    right: 50%;
  }

}

You can also forgo the grid and create a custom rows and columns based layout that semantically matches classes throughout your website using the row, col, push, and pull mixins.

Rows

Creating rows are simple. Simply include the row mixin inside of your .row class. Use any class name you would like, for example .wrapper.

.row {
  @include row;
}

Columns

Columns are simple too. Include the column mixin inside of your .column class. Use any class name you would like, for example .sidebar and .main.

.column {
  @include col;
}

A common sass trick is iterating through a loop to output grid classes. It's easy using the bluejay col mixin to do this. col mixin to do this.

@for $i from 1 through 5 {
  .col-1-#{$i} {
    @include col(1/$i);
  }
}

This will output the following css.

.col-1-1 {
  float: left;
  width: 100%;
  padding-left: 0.5rem;
  padding-right: 0.5rem; }

.col-1-2 {
  float: left;
  width: 50%;
  padding-left: 0.5rem;
  padding-right: 0.5rem; }

.col-1-3 {
  float: left;
  width: 33.33333%;
  padding-left: 0.5rem;
  padding-right: 0.5rem; }

.col-1-4 {
  float: left;
  width: 25%;
  padding-left: 0.5rem;
  padding-right: 0.5rem; }

.col-1-5 {
  float: left;
  width: 20%;
  padding-left: 0.5rem;
  padding-right: 0.5rem; }

Offsets

In order to present your content semantically you need offset classes. You may visually want your sidebar to be on the left side of your page but in your code it's on the right side because that's more semantically correction. You can use the push and pull mixins to position your content visually while maintaining correct semantic markup.

A Main Content and Sidebar example.

/* push .main to the right by 25% */
.main {
  @include col(3/4);
  @include push(1/4);
}
/* pull .sidebar to the left by 75% */
.sidebar {
  @include col(1/4);
  @include pull(3/4);
}

Breakpoints

These are default breakpoints for small, medium, large, and extra-large screens. They can be adjusted in the sass/_variables file.

$mq-sm: 35.5rem;
$mq-md: 48rem;
$mq-lg: 64rem;
$mq-xl: 80rem;

Use these breakpoints in your columns to setup mobile-first css design.

.column {
  @include col;

  /* extra-large screen 4 cols */
  @include mq($mq-xl) {
    @include col(1/4);
  }
  /* large screen 4 cols */
  @include mq($mq-lg) {
    @include col(1/4);
  }
  /* medium screen 2 cols */
  @include mq($mq-md) {
    @include col(1/2);
  }
  /* small screen 1 col */
  @include mq($mq-sm) {
    @include col(1);
  }
}

Forms

Form mixins

Buttons

Buttons are easy. Create consistent global hovers and active states using the button-bg($color) mixin.

.btn-green {
   @include button-bg($btn-green);
}
.btn-blue {
   @include button-bg($btn-blue);
}
.btn-yellow{
   @include button-bg($btn-yello);
}
.btn-red {
   @include button-bg($btn-red);
}

Tables

Table mixins

Menus

Create a clean horizontal menu.

ul {
  @include horizontal-list;
}

Extras

A handful of extra mixins for things like letterpress and emboss.

Create an embossed box.

.box {
  @include box-emboss(0.8, 0.5);
}

Create a letterpress effect.

p {
  @include letterpress(0.5);
}

Calculate rem font size based on px.

p {
  @include font-size(16px);
}

Visually hide an element while still being friendly to screen readers.

.hide {
  @extend %hide;
}

Inspiration

• 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

Changelog

v1.0.0 Initial Release