SASS Mixins to develop mobile-first CSS
npm install bluejayA collection of sass mixin's to generate mobile-first css. Bluejay contains
mixins to create grids, menus, buttons, etc.
Install via Bower (Recommended)
``bash`
bower install bluejay
Install via NPM
`bash`
npm install bluejay
Install via Git
`bash`
git clone git@github.com:kalebheitzman/bluejay.git ./sass/bluejay
Include bluejay in your main sass file. _Bower example:_
`sass`
@import 'bower_components/bluejay/src/bluejay.scss';
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.
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`.
`sass
@import 'bluejay';
$wrapper: 95rem;
$gutter: 0.5rem;
`
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.
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-.
`sass`
@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.
`css
.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.
Creating rows are simple. Simply include the row mixin inside of your `.row` class. Use any class name you would like, for example `.wrapper`.
`sass`
.row {
@include row;
}
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`.
`sass`
.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.
`sass`
@for $i from 1 through 5 {
.col-1-#{$i} {
@include col(1/$i);
}
}
This will output the following css.
`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; }
`
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.
`sass`
/ 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);
}
These are default breakpoints for small, medium, large, and extra-large screens. They can be adjusted in the `sass/_variables` file.
`sass`
$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.
`sass
.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);
}
}
`
Form mixins
Buttons are easy. Create consistent global hovers and active states using the button-bg($color) mixin.
`sass`
.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);
}
Table mixins
Create a clean horizontal menu.
`sass`
ul {
@include horizontal-list;
}
A handful of extra mixins for things like letterpress and emboss.
Create an embossed box.
`sass`
.box {
@include box-emboss(0.8, 0.5);
}
Create a letterpress effect.
`sass`
p {
@include letterpress(0.5);
}
Calculate rem font size based on px.
`sass`
p {
@include font-size(16px);
}
Visually hide an element while still being friendly to screen readers.
`sass``
.hide {
@extend %hide;
}
* 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
v1.0.0 Initial Release