mistergraphx
11/26/2014 - 2:02 PM

A very simple Baseline SCSS mixin for providing a visual baseline in your project, in CSS.

A very simple Baseline SCSS mixin for providing a visual baseline in your project, in CSS.

readme.md
content_copyfile_download
  • Rendered
  • Source

#Sass Baseline Mixin

A very simple Baseline SCSS mixin for providing a visual baseline in your project, in CSS.

##The Mixin

In the mixin it has two arguments, $baseline-height and $baseline-color. These are set to defaults in the mixin, but feel free to change it to any colour and line-height you like.

##Usage in projects

When using the mixin, you may want to set a condition for showing the grid, such as this:

// style.scss
$show-baseline: true!default; //Set to false when not in use.

body {
    //...add your body styles here

    @if $show-baseline == true {
        // Include the baseline mixin
        @include baseline;
    }
}

And then you should have a suitable baseline for your project! Have fun!

@iainspad

_baseline.scss
content_copyfile_download
// Set up line-height and colour defaults for this mixin.
$line-height: 20px!default;
$line-color: #94d4ff!default;

/**
*
* Baseline Mixin
* Handy dandy mixin to provide a baseline for your typography.
*
* The mixin carries two arguments — the $baseline, which should match your line-height, and $baseline-color, the colour you want the lines to be.
* When using the mixin, you can change to the line-height and colour to what you desire.
*
* You can use this in your design to help with your typography, or you can use it as part of your design.
*
* Have fun!
*
**/
@mixin baseline($baseline: $line-height, $baseline-color: $line-color) {

	// Background Image property with  repeating gradients to provide the lines.
	background-image: -webkit-repeating-linear-gradient(180deg, transparent, transparent ($baseline - 1), $baseline-color ($baseline - 1), $baseline-color $baseline);
	background-image: -moz-repeating-linear-gradient(180deg, transparent, transparent ($baseline - 1), $baseline-color ($baseline - 1), $baseline-color $baseline);
	background-image: repeating-linear-gradient(180deg, transparent, transparent ($baseline - 1), $baseline-color ($baseline - 1), $baseline-color $baseline);

	// Background Sizing to contstrain the size of the gradient to the desired height.
	-webkit-background-size: 1px $baseline;
	background-size: 1px $baseline;
}