working ratios

.gitignore

@@ -0,0 +1 @@
+.DS_STORE

_variables.sss

@@ -0,0 +1,60 @@
+@import './partials/_ratios.sss'
+
+/**
+  * Misc
+  */
+$transition: 300ms
+
+/**
+  * Page
+  */
+$max-width: 80vw
+
+
+/**
+  * Fonts
+  */
+$sans: 'helvetica', 'calibri', 'sans-serif'
+$serif: 'georgia', 'serif'
+$mono: 'input', 'consolas','monospace'
+
+
+/**
+  * Modular Scale
+  */
+$base: 0.5em
+$scale: $golden
+
+$ms-0: calc($base)
+$ms-1: calc($ms-0 * $scale)
+$ms-2: calc($ms-1 * $scale)
+$ms-3: calc($ms-2 * $scale)
+$ms-4: calc($ms-3 * $scale)
+$ms-5: calc($ms-4 * $scale)
+$ms-6: calc($ms-5 * $scale)
+$ms-7: calc($ms-6 * $scale)
+$ms-8: calc($ms-7 * $scale)
+$ms-9: calc($ms-8 * $scale)
+
+/**
+  * Color Scale
+  */
+$cbase: 0.5
+$cs-0: calc($cbase)
+$cs-1: calc($cs-0 * $scale)
+$cs-2: calc($cs-1 * $scale)
+$cs-3: calc($cs-2 * $scale)
+$cs-4: calc($cs-3 * $scale)
+$cs-5: calc($cs-4 * $scale)
+
+
+/** 
+  * Named Breakpoints
+  */
+@custom-media --tiny-viewport (min-width: 375px)
+@custom-media --small-viewport (min-width: 480px)
+@custom-media --medium-viewport (min-width: 768px)
+@custom-media --large-viewport (min-width: 960px)
+@custom-media --extra-large-viewport (min-width: 1080px)
+@custom-media --huge-viewport (min-width: 1200px)
+@custom-media --ultra-viewport (min-width: 1440px)

import.css

@@ -0,0 +1,4 @@
+@import './partials/_reset.sss'
+@import './partials/_ratios.sss'
+@import './partials/_helpers.sss'
+@import './partials/_typography.sss'

index.js

@@ -1,6 +0,0 @@
-// Include all your *.sss Sugarss files
-import './partials/_reset.sss'
-import './partials/_layout.sss'
-import './partials/_typography.sss'
-import './partials/_selectors.sss'
-import './partials/_helpers.sss'

partials/_helpers.sss

@@ -1,61 +1,226 @@
-/* Helpers */
-@import '../variables.sss'
-@import '_selectors.sss'
+@import '../_variables.sss'
+@import '../theme.sss'
 
-:--headings
-    color: $color-primary
-p
-    line-height: 1.5em
-
-
-%flexer
+.w
+    &-full
+        width: 100%
+    &-half
+        width: 50%
+    
+/* Flex box  */
+%flexy
     display: flex
+    justify-content: center
+    align-items: center
 
 .f
     &-row, &-col
-        @extend %flexer
+        @extend %flexy
+        &.start
+            align-items: flex-start
+            justify-content: flex-start
+        &.end 
+            align-items: flex-end
+            justify-content: flex-end
+        &.between
+            justify-content: space-between
+        &.around
+            justify-content: space-around
+        &.even
+            justify-content: space-evenly
+        &.stretch
+            align-content: stretch
+        &.baseline
+            align-items: baseline
+        &.stretch
+            justify-content: space-stretch
+        &.center
+            justify-content: center
+            align-items: center
+
+        &.wrap
+            flex-wrap: wrap
     &-row
         flex-direction: row
     &-col
         flex-direction: column
-    &-cntr
-        justify-content: center
-        align-items: center
     &-grow
-        flex-grow: 10
-
-%borderer
-    border-width: 1px 
-    border-color: $primary
-
+        flex-grow: 1
 
+/* Borders */
 .b
     &-none
-        border-style: none
+        border: none
     &-solid
-        @extend %borderer
-        border-style: solid
-    &-dash
-        @extend %borderer
-        border-style: dashed
+        border: 1px solid $dark
     &-dot
-        @extend %borderer
-        border-style: dotted
-    &-pill
-        border-radius: 999px
-    &-rnd
-        border-radius: $ms
+        border: 1px dotted $dark
+    &-solid, &-dot
+        &.rounded
+            border-radius: $ms-0
+        &.invert
+            border-color: $light
 
-.p
-    &-all
-        padding: $ms
-    &-horz
-        padding-left: $ms
-        padding-right: @padding-left
-    &-vert
-        padding-top: $ms
-        padding-bottom: @padding-top
+button
+    &:hover
+        cursor: pointer
+        transition: $transition
+    &.b
+        &-pill
+            padding: $ms-1 $ms-0
+            line-height: $ms-1
+            text-transform: uppercase
 
+/* Backgrounds */
 .bg
     &-none
-        background: none
+        background-color: none
+    &-primary
+        background-color: $primary
+    &-dark
+        background-color: $dark
+    &-light
+        background-color: $light
+    &-cover
+        background-size: cover
+    &-contain
+        background-size: contain
+    &-repeat
+        background-repeat: repeat
+
+/* Colors */
+.primary
+    color: $primary
+.dark
+    color: $dark
+.light
+    color: $light
+
+/* Padding */
+.p
+    &-none
+        padding: none
+    &-0
+        padding: $ms-0
+    &-1
+        padding: $ms-1
+    &-2
+        padding: $ms-2
+    &h
+        &-0
+            padding: 0 $ms-0
+        &-1
+            padding: 0 $ms-1
+        &-2
+            padding: 0 $ms-2
+    &v
+        &-0
+            padding: $ms-0 0
+        &-1
+            padding: $ms-1 0
+        &-2
+            padding: $ms-2 0
+    &t
+        &-0
+            padding-top: $ms-0
+        &-1
+            padding-top: $ms-1
+        &-2
+            padding-top: $ms-2
+    &b
+        &-0
+            padding-bottom: $ms-0
+        &-1
+            padding-bottom: $ms-1
+        &-2
+            padding-bottom: $ms-2
+    &l
+        &-0
+            padding-left: $ms-0
+        &-1
+            padding-left: $ms-1
+        &-2
+            padding-left: $ms-2
+    &r
+        &-0
+            padding-right: $ms-0
+        &-1
+            padding-right: $ms-1
+        &-2
+            padding-right: $ms-2
+
+/* Margin */
+.m
+    &-none
+        margin: none
+    &-0
+        margin: $ms-0
+    &-1
+        margin: $ms-1
+    &-2
+        margin: $ms-2
+    &h
+        &-0
+            margin: 0 $ms-0
+        &-1
+            margin: 0 $ms-1
+        &-2
+            margin: 0 $ms-2
+    &v
+        &-0
+            margin: $ms-0 0
+        &-1
+            margin: $ms-1 0
+        &-2
+            margin: $ms-2 0
+    &t
+        &-0
+            margin-top: $ms-0
+        &-1
+            margin-top: $ms-1
+        &-2
+            margin-top: $ms-2
+    &b
+        &-0
+            margin-bottom: $ms-0
+        &-1
+            margin-bottom: $ms-1
+        &-2
+            margin-bottom: $ms-2
+    &l
+        &-0
+            margin-left: $ms-0
+        &-1
+            margin-left: $ms-1
+        &-2
+            margin-left: $ms-2
+    &r
+        &-0
+            margin-right: $ms-0
+        &-1
+            margin-right: $ms-1
+        &-2
+            margin-right: $ms-2
+
+.z
+    &-bottom
+        position: relative
+        z-index: -1
+    &-10
+        position: relative
+        z-index: 10
+    &-20
+        position: relative
+        z-index: 20
+    &-30
+        position: relative
+        z-index: 30
+    &-40
+        position: relative
+        z-index: 40
+    &-50
+        position: relative
+        z-index: 50
+    &-top
+        position: relative
+        z-index: 10001

partials/_layout.sss

@@ -1,27 +0,0 @@
-/* Layout */
-@import '../variables.sss'
-
-nav, nav > ul, nav > ul li, body > header, body > main, footer, footer > ul
-    display: flex
-    justify-content: center
-    position: relative
-    z-index: $zcontent
-
-._maxwidth
-    width: 480px
-
-@media (min-width: 768px)
-    ._maxwidth
-        width: 600px
-
-@media (min-width: 1080px)
-    ._maxwidth
-        width: 960px
-
-@media (min-width: 1200px)
-    ._maxwidth
-        width: 1080px
-
-@media (min-width: 1920px)
-    ._maxwidth
-        width: $maxwidth

partials/_ratios.sss

@@ -0,0 +1,13 @@
+$minor-second: 1.067
+$major-second: 1.125
+$minor-third: 1.2
+$major-third: 1.25
+$perfect-fourth: 1.333
+$augmented-fourth: 1.414
+$perfect-fifth: 1.5
+$minor-sixth: 1.6
+$golden: 1.618
+$major-sixth: 1.667
+$minor-seventh: 1.778
+$major-seventh: 1.875
+$octave: 2

partials/_reset.sss

@@ -1,4 +1,6 @@
-// Kill margins and paddings; add border-box
+@import '../_variables.sss'
+@import '../theme.sss'
+
 *
     margin: 0
     padding: 0
@@ -6,7 +8,7 @@
     &:before, &:after
         background-repeat: no-repeat
         box-sizing: inherit
-    &:focus
+    $:focus
         outline: none !important
 
 ::before, ::after
@@ -16,28 +18,23 @@
 html
     cursor: default
     font-family: system-ui
-    line-height: 1.15
+    line-height: $ms-0
     tab-size: 4
 
-// Always set color/background/font-size on root
 body
     margin: 0
-    color: $primary
-    font-size: $ms
-    font-family: Helvetica, Arial, sans-serif
+    font-size: $ms-1
+    font-family: $sans
 
-// Remove list-style in navigation tags
 nav
     ol, ul
         list-style: none
 
-// Useful for single page apps to use up all available space
+// Good for SPAs
 html, body
     height: 100%
 
-// Reset some other default styles
 button, input, select, textarea
     font-family: inherit
     font-size: inherit
-    line-height: inherit
-
+    line-height: inherit

partials/_selectors.sss

@@ -1,4 +0,0 @@
-@custom-selector :--headings h1, h2, h3, h4, h5, h6
-
---ms-bases: 1, 0.75
---ms-ratios: 2

partials/_typography.sss

@@ -1,17 +1,32 @@
-@import '../variables.sss'
+@import '../_variables.sss'
+@import '../theme.sss'
 
-:--headings
-    color: $primary
+h1
+    font-size: $ms-5
+    line-height: $ms-4
+h2
+    font-size: $ms-3
+    line-height: $ms-2
+h3
+    font-size: $ms-2
+    line-height: $ms-1
+h4
+    font-size: $ms-1
+    line-height: $ms-0
+p
+    font-size: $ms-1
+    line-height: $ms-0
 
 .t
-    &-cntr
+    &-center
+        width: 100%
         text-align: center
+    &-right
+        width: 100%
+        text-align: right
     &-left
+        width: 100%
         text-align: left
-    &-b
-        text-weight: bold
-    &-i
-        text-style: italic
     &-up
         text-transform: uppercase
     &-cap

style.sss

@@ -1,13 +0,0 @@
-@import './partials/_reset.sss'
-@import './variables.sss'
-@import './partials/_layout.sss'
-@import './partials/_helpers.sss'
-@import './partials/_selectors.sss'
-
-html
-    background-color: $primary
-    
-body
-    display: flex
-    flex-direction: column
-

theme.sss

@@ -0,0 +1,16 @@
+@import './_variables.sss'
+
+/**
+  * Colors
+*/
+$hue: 200
+$bg: calc($hue * $cs-1)
+$bright: 50%
+$opacity: 1
+
+$primary: hsla($hue, 20%, calc($bright * $cs-1), $opacity)
+$secondary: hsla($bg, 20%, calc($bright * $cs-1), $opacity)
+$hilite: hsla($hue, 50%, calc($bright * $cs-0), $opacity)
+
+$light: hsla(255, 50%, calc($bright * $cs-0), $opacity)
+$dark: hsla(001, 50%, calc($bright * $cs-0), $opacity)

variables.sss

@@ -1,29 +0,0 @@
-// Colors
-$blue: #0076A3
-$chart-bg: rgba(20,20,20)
-$background: #444
-$background-light: #505050
-$dark: #3F3F3F
-$darker: #383838
-$light: #BBBBBB
-$lighter: #CCCCCC
-$primary: #008462
-$primary-light: #00D6A3
-$primary-lighter: #CEFFF3
-$primary-dark: #007351
-
-// Fonts
-$sans: 'sans-serif'
-$serif: 'serif'
-$mono: 'monospace'
-
-// Proportion (to be replaced with modular scale)
-$ms: 0.5em
-
-// Circles for add page
-$radius: 2.5vw
-$path: 4px
-
-$transition: 300ms
-
-