Turning breakpoints bit into it's own seperate module

It really should have been it's own seperate module all along

Author: Dan503

src/_modules/breakpoints/breakpoints.pug

@@ -0,0 +1,9 @@
+
+mixin breakpoints
+	.breakpoints&attributes(attributes)
+		h2 Breakpoints
+		.breakpoints__size.-minimum
+		.breakpoints__size.-small
+		.breakpoints__size.-medium
+		.breakpoints__size.-large
+		.breakpoints__size.-page

src/_modules/breakpoints/breakpoints.scss

@@ -0,0 +1,20 @@
+
+.breakpoints {
+	padding: 20px;
+	border: 2px solid #000;
+
+	&__size {
+		@each $name, $value in $breakpoints {
+			&.-#{$name} {
+				&::before {
+					content: 'BP-#{$name}: ';
+				}
+				&::after {
+					content: '#{$value}';
+					font-weight: bold;
+					font-size: 1.2em;
+				}
+			}
+		}
+	}
+}

src/_modules/tests/tests.pug

@@ -1,14 +1,6 @@
 
 include ../../../unit-tests/height/insideHeight/insideHeight
 
-.breakpoints
-  h2 Breakpoints
-  .breakpoints__size.-minimum
-  .breakpoints__size.-small
-  .breakpoints__size.-medium
-  .breakpoints__size.-large
-  .breakpoints__size.-page
-
 h2#tests Tests
 
 -

src/index.pug

@@ -2,11 +2,14 @@ extends _layouts/base
 
 block append includes
   include /_modules/demo/demo
+  include /_modules/breakpoints/breakpoints
 
 block content
   :marked
     This is a testing/demo site for mq-scss. Full documentation can be found on [GitHub](https://github.com/Dan503/mq-scss) and [npm](https://www.npmjs.com/package/mq-scss).
 
     This site is best viewed on desktop. Resizing the browser window will cause different media queries to activate at different screen sizes.
 
+  +breakpoints
+
   include /_modules/tests/tests