WIP styles

Author: leoj3n

bit-docs.js

@@ -11,6 +11,8 @@ var mergeOnto = function(prop, dest, source){
 /**
  * @module {function} bit-docs-generate-html
  * @group bit-docs-generate-html/modules modules
+ * @group bit-docs-generate-html/styles styles
+ * @group bit-docs-generate-html/templates templates
  * @parent plugins
  *
  * @description Generates HTML for a docMap.  Supports plugins.

site/default/static/styles/mixins.less

@@ -0,0 +1,247 @@
+/**
+ * @parent bit-docs-generate-html/styles
+ * @page bit-docs-generate-html/styles/mixins mixins
+ * @group bit-docs-generate-html/styles/mixins/helper #helper
+ *
+ * @description Mixins for site-wide visual layout.
+ *
+ * @body
+ *
+ * Mixins are useful as reusable rules that can be added into any declaration.
+ */
+
+#helper {
+  /**
+   * @function bit-docs-generate-html/styles/mixins/helper/padding .padding
+   * @parent bit-docs-generate-html/styles/mixins/helper
+   *
+   * Sets padding for passed sides.
+   *
+   * @signature `#helper.padding(@sides; @amount: @defaultPadding)`
+   *
+   * @param {String} @sides A space-separated list of "sides", like `left right`.
+   *
+   * @param {Number} @amount An amount of padding in pixels, defaults to
+   * [bit-docs-generate-html/styles/variables/@defaultPadding @defaultPadding].
+   * 
+   * @body
+   *
+   * ### Use
+   *
+   * ```less
+   * .container {
+   *   #helper.padding(left right; 50px);
+   * }
+   * ```
+   */
+  .padding(@sides; @amount: @defaultPadding) {
+    .property-names(padding; @sides; @amount);
+  }
+
+  /**
+   * @function bit-docs-generate-html/styles/mixins/helper/flex .flex
+   * @parent bit-docs-generate-html/styles/mixins/helper
+   *
+   * Sets flexbox "grow" and "shrink" in most compatible way.
+   *
+   * @signature `#helper.flex(@grow: 0, @shrink: 1)`
+   *
+   * @param {Number} @grow The amount this flex item should grow, defaults to 0.
+   *
+   * @param {Number} @shrink The amount this flex item should shrink, defaults to 1.
+   * 
+   * @body
+   *
+   * ### Use
+   *
+   * ```less
+   * .flex-none {
+   *   #helper.flex(0; 0);
+   * }
+   * ```
+   */
+  .flex(@grow: 0, @shrink: 1) {
+    -webkit-box-flex: @grow;
+    -webkit-flex: @grow @shrink auto;
+    -moz-box-flex: @grow;
+    -ms-flex: @grow @shrink auto;
+    flex: @grow @shrink auto;
+  }
+
+  /**
+   * @function bit-docs-generate-html/styles/mixins/helper/property-names .property-names
+   * @parent bit-docs-generate-html/styles/mixins/helper
+   * @hide
+   *
+   * Helper for setting multiple dash properties to same value.
+   *
+   * @signature `#helper.property-names(@p; @s; @v)`
+   *
+   * @param {String} @p The property name to prepend before the dash and string.
+   *
+   * @param {String} @s A space-separated list of strings to iterate over.
+   *
+   * @param {Number} @v The value to set each concatenated property to.
+   * 
+   * @body
+   *
+   * ### Use
+   *
+   * ```less
+   * .top-left-margin {
+   *   .property-names(margin; top left; 100px);
+   * }
+   *
+   * .special img {
+   *   .top-left-margin;
+   * }
+   * ```
+   */
+  .property-names(@p; @s; @v) {
+    .-(@i: length(@s)) when (@i > 0) {
+      @n: extract(@s, @i);
+      & {@{p}-@{n}: @v}
+      .-((@i - 1));
+    } .-;
+  }
+}
+
+// Flexbox (flexbugs: https://github.com/philipwalton/flexbugs)
+
+/**
+ * @property .display-flex
+ * @parent bit-docs-generate-html/styles/mixins
+ *
+ * Sets the display to flex using vendor prefixes.
+ *
+ * @body
+ *
+ * ### Use
+ *
+ * ```less
+ * body {
+ *   .display-flex;
+ * }
+ * ```
+ */
+.display-flex {
+	display: -webkit-box;
+	display: -webkit-flex;
+	display: -moz-box;
+	display: -ms-flexbox;
+	display: flex;
+}
+
+/**
+ * @property .flex-row
+ * @parent bit-docs-generate-html/styles/mixins
+ *
+ * Sets the display to flex and direction to row using vendor prefixes.
+ *
+ * @body
+ *
+ * ### Use
+ *
+ * ```less
+ * body {
+ *   .flex-row;
+ * }
+ * ```
+ */
+.flex-row {
+  .display-flex;
+	-webkit-box-orient: horizontal;
+	-webkit-box-direction: normal;
+	-webkit-flex-direction: row;
+	-moz-box-orient: horizontal;
+	-moz-box-direction: normal;
+	-ms-flex-direction: row;
+	flex-direction: row;
+}
+
+/**
+ * @property .flex-column
+ * @parent bit-docs-generate-html/styles/mixins
+ *
+ * Sets the display to flex and direction to column using vendor prefixes.
+ *
+ * @body
+ *
+ * ### Use
+ *
+ * ```less
+ * body {
+ *   .flex-column;
+ * }
+ * ```
+ */
+.flex-column {
+  .display-flex;
+	-webkit-box-orient: vertical;
+	-webkit-box-direction: normal;
+	-webkit-flex-direction: column;
+	-moz-box-orient: vertical;
+	-moz-box-direction: normal;
+	-ms-flex-direction: column;
+	flex-direction: column;
+}
+
+/**
+ * @property .flex-initial
+ * @parent bit-docs-generate-html/styles/mixins
+ *
+ * Emulates `flex: initial;` in a compatible way using vendor prefixes.
+ *
+ * @body
+ *
+ * ### Use
+ *
+ * ```less
+ * body {
+ *   .flex-initial;
+ * }
+ * ```
+ */
+.flex-initial {
+  #helper.flex();
+}
+
+/**
+ * @property .flex-auto
+ * @parent bit-docs-generate-html/styles/mixins
+ *
+ * Emulates `flex: auto;` in a compatible way using vendor prefixes.
+ *
+ * @body
+ *
+ * ### Use
+ *
+ * ```less
+ * body {
+ *   .flex-auto;
+ * }
+ * ```
+ */
+.flex-auto {
+  #helper.flex(1);
+}
+
+/**
+ * @property .flex-none
+ * @parent bit-docs-generate-html/styles/mixins
+ *
+ * Emulates `flex: none;` in a compatible way using vendor prefixes.
+ *
+ * @body
+ *
+ * ### Use
+ *
+ * ```less
+ * body {
+ *   .flex-none;
+ * }
+ * ```
+ */
+.flex-none {
+  #helper.flex(0; 0);
+}