Improved helper box mixin and added it in docs

diff --git a/docs/pages/prototyping.md b/docs/pages/prototyping.md
index 7a02430ca7602318a251f56d2b03abd99e01c775..f2c14991e293cb709d66c489416e3dd9c1a33921 100644 (file)
--- a/docs/pages/prototyping.md
+++ b/docs/pages/prototyping.md
@@ -627,3 +627,25 @@ Oppositely, if you are looking for text wrapping into the next line, you can use
 ```html
 <p class="text-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam voluptatem similique officiis recusandae esse cum in totam quisquam perspiciatis quod! Magnam culpa vitae, tempore eos explicabo cupiditate. Deserunt, quisquam, quos!</p>
 ``` 
+
+---
+
+## Helper Box Mixin
+
+This mixin helps you to easily create a square, rectangle or a circle
+
+#### Box: Usage a mixin 
+
+```scss 
+.foo {
+       @include box(1rem, 2rem); // Rectangle
+}
+.bar {
+       @include box(1rem); // Square
+}
+.baz {
+       @include box(1rem, $circle: true); // Circle
+}
+``` 
+
+Sass Reference [here](#box)

diff --git a/scss/prototype/_box.scss b/scss/prototype/_box.scss
index aa949f3c665aadd91ac84930613cc962ce0181eb..f5cfcd95d4b1aade757943a97a2d098c943c0960 100644 (file)
--- a/scss/prototype/_box.scss
+++ b/scss/prototype/_box.scss
@@ -1,8 +1,12 @@
 /// Box Mixin: Easily create a square, rectangle or a circle
 /// @param {Number} $width[] Width of the box
-/// @param {Number} $height[] Height of the box
+/// @param {Number} $height[$width] Height of the box, defaults to `$width` to easily make a square
 /// @param {Boolean} $circle[false] Makes the box a circle, by default `false`.
-@mixin box($width, $height, $circle: false) {
+@mixin box(
+       $width, 
+       $height: $width, 
+       $circle: false
+) {
   width: $width;
   height: $height;
   @if $circle {