IainIsCreative · November 26, 2014 14:02 · Nov 26, 2014
diff --git a/_baseline.scss b/_baseline.scss
@@ -0,0 +1,28 @@
+// 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;
+}
diff --git a/readme.md b/readme.md
@@ -0,0 +1,31 @@
+#Sass Baseline Mixin
+
+A very simple Baseline SCSS mixin for providing a visual baseline in your project, in CSS.
+
+![An example of the baseline](http://cl.ly/image/2I2k3S2P0A0m/baseline-example.png)
+
+##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](https://twitter.com/iainspad)