Flexbox grid and widths helpers

README.md

@@ -97,6 +97,8 @@ $hp-base-font-family: "Open Sans", sans-serif
 1. Normalize
 2. Box-sizing global reset
 3. Vertical rhythm
+4. Grid based on flexbox
+5. Widths helpers in fraction format
 
 ## Contributing
 

core/_functions.sass

@@ -0,0 +1,35 @@
+/*
+ * Source:
+ * https://github.com/inuitcss/tools.functions
+ */
+
+@function hp-quarter($value)
+  @return $value / 4
+
+@function hp-third($value)
+  @return $value / 3
+
+@function hp-half($value)
+  @return $value / 2
+
+@function hp-double($value)
+  @return $value * 2
+
+@function hp-triple($value)
+  @return $value * 3
+
+@function hp-quadruple($value)
+  @return $value * 4
+
+@function hp-vertical-rhythm-exponent($base, $exponent)
+  @if pow(2, 2) == 4
+    @return pow($base, $exponent)
+
+  $value: $base
+  @if $exponent > 1
+    @for $i from 2 through $exponent
+      $value: $value * $base
+  @if $exponent < 1
+    @for $i from 0 through -$exponent
+      $value: $value / $base
+  @return $value

core/_grid.sass

@@ -0,0 +1,53 @@
+/*
+ * Source:
+ * https://github.com/kristoferjoseph/flexboxgrid
+ */
+
+.container
+  max-width: $hp-grid-container
+  margin: auto
+  padding-left: $hp-grid-gutter
+  padding-right: $hp-grid-gutter
+
+.grid
+  display: flex
+  flex: 0 1 auto
+  flex-direction: row
+  flex-wrap: wrap
+  margin-left: hp-half($hp-grid-gutter) * -1
+  margin-right: hp-half($hp-grid-gutter) * -1
+
+.grid-item
+  display: flex
+  flex: 0 1 auto
+  flex-direction: column
+  flex-grow: 0
+  flex-shrink: 0
+  padding-left: hp-half($hp-grid-gutter)
+  padding-right: hp-half($hp-grid-gutter)
+
+.left-grid
+  justify-content: flext-start
+
+.center-grid
+  justify-content: center
+
+.right-grid
+  justify-content: flex-end
+
+.top-grid
+  align-items: flex-start
+
+.middle-grid
+  align-items: center
+
+.bottom-grid
+  align-items: flex-end
+
+.no-gutter-grid
+  margin-left: 0
+  margin-right: 0
+
+  > .grid-item
+    padding-left: 0
+    padding-right: 0

core/_settings.sass

@@ -1,3 +1,9 @@
 $hp-base-font-size: 16 !default
 $hp-base-line-height: 1.4 !default
 $hp-vertical-align-factor: 1.5 !default
+
+$hp-font-size-factor: 16
+$hp-spacing-unit: round($hp-base-font-size * $hp-base-line-height) / $hp-font-size-factor * 1rem
+
+$hp-grid-container: 68rem !default
+$hp-grid-gutter: $hp-spacing-unit !default

core/_widths.sass

@@ -0,0 +1,145 @@
+/*
+ * Source:
+ * https://github.com/inuitcss/trumps.widths
+ */
+
+[class~="1/1"]
+  max-width: 100%
+  flex-basis: 100%
+
+[class~="1/2"],
+[class~="2/4"],
+[class~="3/6"],
+[class~="4/8"],
+[class~="5/10"],
+[class~="6/12"]
+  max-width: 50%
+  flex-basis: 50%
+
+[class~="1/3"],
+[class~="2/6"],
+[class~="3/9"],
+[class~="4/12"]
+  max-width: 33.3333%
+  flex-basis: 33.3333%
+
+[class~="2/3"],
+[class~="4/6"],
+[class~="6/9"],
+[class~="8/12"]
+  max-width: 66.6666%
+  flex-basis: 66.6666%
+
+[class~="1/4"],
+[class~="2/8"],
+[class~="3/12"]
+  max-width: 25%
+  flex-basis: 25%
+
+[class~="3/4"],
+[class~="6/8"],
+[class~="9/12"]
+  max-width: 75%
+  flex-basis: 75%
+
+[class~="1/5"],
+[class~="2/10"]
+  max-width: 20%
+  flex-basis: 20%
+
+[class~="2/5"],
+[class~="4/10"]
+  max-width: 40%
+  flex-basis: 40%
+
+[class~="3/5"],
+[class~="6/10"]
+  max-width: 60%
+  flex-basis: 60%
+
+[class~="4/5"],
+[class~="8/10"],
+  max-width: 80%
+  flex-basis: 80%
+
+[class~="1/6"],
+[class~="2/12"]
+  max-width: 16.6666%
+  flex-basis: 16.6666%
+
+[class~="5/6"],
+[class~="10/12"]
+  max-width: 83.3333%
+  flex-basis: 83.3333%
+
+[class~="1/8"]
+  max-width: 12.5%
+  flex-basis: 12.5%
+
+[class~="3/8"]
+  max-width: 37.5%
+  flex-basis: 37.5%
+
+[class~="5/8"]
+  max-width: 62.5%
+  flex-basis: 62.5%
+
+[class~="7/8"]
+  max-width: 87.5%
+  flex-basis: 87.5%
+
+[class~="1/9"]
+  max-width: 11.1111%
+  flex-basis: 11.1111%
+
+[class~="2/9"]
+  max-width: 22.2222%
+  flex-basis: 22.2222%
+
+[class~="4/9"]
+  max-width: 44.4444%
+  flex-basis: 44.4444%
+
+[class~="5/9"]
+  max-width: 55.5555%
+  flex-basis: 55.5555%
+
+[class~="7/9"]
+  max-width: 77.7777%
+  flex-basis: 77.7777%
+
+[class~="8/9"]
+  max-width: 88.8888%
+  flex-basis: 88.8888%
+
+[class~="1/10"]
+  max-width: 10%
+  flex-basis: 10%
+
+[class~="3/10"]
+  max-width: 30%
+  flex-basis: 30%
+
+[class~="7/10"]
+  max-width: 70%
+  flex-basis: 70%
+
+[class~="9/10"]
+  max-width: 90%
+  flex-basis: 90%
+
+[class~="1/12"]
+  max-width: 8.3333%
+  flex-basis: 8.3333%
+
+[class~="5/12"]
+  max-width: 41.6666%
+  flex-basis: 41.6666%
+
+[class~="7/12"]
+  max-width: 58.3333%
+  flex-basis: 58.3333%
+
+[class~="11/12"]
+  max-width: 91.6666%
+  flex-basis: 91.6666%

_hocus-pocus.sass → hocus-pocus.sass

@@ -1,8 +1,8 @@
 @import 'core/settings'
-@import 'core/constants'
-@import 'core/private-functions'
 @import 'core/functions'
 @import 'core/normalize'
 @import 'core/box-sizing'
 @import 'core/vertical-rhythm'
 @import 'core/base'
+@import 'core/grid'
+@import 'core/widths'