Bluebird Sass Mixins

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

Installation

Install via Bower (Preferred)

bower install bluebird-sass

Install via NPM

npm install

Install via Git

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

Include Bluebird in your main sass file. Bower example:

@import 'bower_components/bluebird-sass/sass/bluebird.scss';

Base

These mixins are built on top of Normalize.css. Normalize is a great start for HTML5-based design. Bluebird 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 'bluebird';

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

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;

  // font-family: sans-serif;
  // font-size: 1em;
}

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;

  // background: rgb( 255, 255, 255 );
}

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

Button mixins

Tables

Table mixins

Menus

Menu mixins

Inspiration

• Do you really need another grid system Original source of inspiration for Bluebird
• Pure CSS Size inspiration for breakpoints and mixins to include.

Changelog

v1.0.0 Initial Release