Intial Commit

_sass/basscss/_base-buttons.scss

@@ -0,0 +1,29 @@
+/* Basscss Base Buttons */
+
+button,
+.button {
+  font-family: $button-font-family;
+  font-size: $button-font-size;
+  font-weight: $button-font-weight;
+  text-decoration: none;
+  cursor: pointer;
+  display: inline-block;
+  box-sizing: border-box;
+  line-height: $button-line-height;
+  padding: $button-padding-y $button-padding-x;
+  margin: 0;
+  height: auto;
+  border: 1px solid transparent;
+  vertical-align: middle;
+  -webkit-appearance: none;
+}
+
+::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+.button:hover {
+  text-decoration: none;
+  border: 1px solid transparent;
+}

_sass/basscss/_base-forms.scss

@@ -0,0 +1,57 @@
+/* Basscss Base Forms */
+
+input,
+select,
+textarea,
+fieldset {
+  font-size: $form-field-font-size;
+  margin-top: 0;
+  margin-bottom: $space-1;
+}
+
+input[type=text],
+input[type=datetime],
+input[type=datetime-local],
+input[type=email],
+input[type=month],
+input[type=number],
+input[type=password],
+input[type=search],
+input[type=tel],
+input[type=time],
+input[type=url],
+input[type=week] {
+  box-sizing: border-box;
+  height: $form-field-height;
+  padding: $form-field-padding-y $form-field-padding-x;
+  vertical-align: middle;
+  -webkit-appearance: none;
+}
+
+select {
+  box-sizing: border-box;
+  line-height: 1.75;
+  padding: $form-field-padding-y $form-field-padding-x;
+}
+
+select:not([multiple]) {
+  height: $form-field-height;
+  vertical-align: middle;
+}
+
+textarea {
+  box-sizing: border-box;
+  line-height: 1.75;
+  padding: $form-field-padding-y $form-field-padding-x;
+}
+
+.fieldset-reset {
+  padding: 0;
+  margin-left: 0;
+  margin-right: 0;
+  border: 0;
+}
+
+.fieldset-reset legend {
+  padding: 0;
+}

_sass/basscss/_base-reset.scss

@@ -0,0 +1,20 @@
+body,
+button {
+  margin: 0;
+}
+
+button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+}
+
+img {
+  max-width: 100%;
+}
+
+svg {
+  max-height: 100%;
+}

_sass/basscss/_base-typography.scss

@@ -0,0 +1,101 @@
+/* Basscss Base Typography */
+
+body {
+  font-family: $font-family;
+  line-height: $line-height;
+  font-size: 88%;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $heading-font-family;
+  font-weight: $heading-font-weight;
+  line-height: $heading-line-height;
+  margin-top: 1em;
+  margin-bottom: .5em;
+}
+
+p,
+dl,
+ol,
+ul {
+  font-size: $h5;
+  margin-top: 0;
+  margin-bottom: $space-2;
+}
+
+ol,
+ul {
+  padding-left: $space-3;
+}
+
+pre,
+code,
+samp {
+  font-family: $monospace-font-family;
+  font-size: inherit;
+}
+
+pre {
+  margin-top: 0;
+  margin-bottom: $space-2;
+  overflow-x: scroll;
+}
+
+hr {
+  margin-top: $space-3;
+  margin-bottom: $space-3;
+}
+
+blockquote {
+  margin-top: $space-3;
+  margin-bottom: $space-3;
+  margin-left: 0;
+  padding-left: $space-2;
+  padding-right: $space-2;
+}
+
+blockquote,
+blockquote p {
+  font-size: $h3;
+  font-style: italic;
+}
+
+h1,
+.h1 {
+  font-size: $h1;
+}
+
+h2,
+.h2 {
+  font-size: $h2;
+}
+
+h3,
+.h3 {
+  font-size: $h3;
+}
+
+h4,
+.h4 {
+  font-size: $h4;
+}
+
+h5,
+.h5 {
+  font-size: $h5;
+}
+
+h6,
+.h6 {
+  font-size: $h6;
+}
+
+.list-reset {
+  list-style: none;
+  padding-left: 0;
+}

_sass/basscss/_buttons-blue.scss

@@ -0,0 +1,27 @@
+.button-blue {
+  color: white;
+  background-color: $blue;
+  border-radius: $border-radius;
+  transition-duration: .1s;
+  transition-timing-function: ease-out;
+  transition-property: box-shadow, background-color;
+}
+
+.button-blue:hover {
+  opacity: .875;
+}
+
+.button-blue:active,
+.button-blue.is-active {
+  box-shadow: inset 0 0 0 32px rgba(#000,.125), inset 0 2px 3px 0 rgba(#000,.25);
+}
+
+.button-blue:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(white, .5), 0 0 1px 4px rgba($blue, .5);
+}
+
+.button-blue:disabled,
+.button-blue.is-disabled {
+  opacity: .5;
+}

_sass/basscss/_color-base.scss

@@ -0,0 +1,28 @@
+/* Basscss Color Base */
+
+body {
+  color: $dark-gray;
+  background-color: white;
+}
+
+a {
+  color: $blue;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+pre,
+code {
+  background-color: $lighter-gray;
+  border-radius: $border-radius;
+}
+
+hr {
+  border: 0;
+  border-bottom-style: solid;
+  border-bottom-width: $border-width;
+  border-bottom-color: $border-color;
+}

_sass/basscss/_colors.scss

@@ -0,0 +1,97 @@
+/* Basscss Colors */
+
+.dark-gray {
+  color: $dark-gray;
+}
+
+.white {
+  color: white;
+}
+
+.blue {
+  color: $blue;
+}
+
+.mid-gray {
+  color: $mid-gray;
+}
+
+.light-gray {
+  color: $light-gray;
+}
+
+.lighter-gray {
+  color: $lighter-gray;
+}
+
+.red {
+  color: $red;
+}
+
+.green {
+  color: $green;
+}
+
+.yellow {
+  color: $yellow;
+}
+
+.orange {
+  color: $orange;
+}
+
+.bg-dark-gray {
+  background-color: $dark-gray;
+}
+
+.bg-white {
+  background-color: white;
+}
+
+.bg-blue {
+  background-color: $blue;
+}
+
+.bg-mid-gray {
+  background-color: $mid-gray;
+}
+
+.bg-light-gray {
+  background-color: $light-gray;
+}
+
+.bg-lighter-gray {
+  background-color: $lighter-gray;
+}
+
+.bg-red {
+  background-color: $red;
+}
+
+.bg-green {
+  background-color: $green;
+}
+
+.bg-yellow {
+  background-color: $yellow;
+}
+
+.bg-orange {
+  background-color: $orange;
+}
+
+.bg-darken-1 {
+  background-color: $darken-1;
+}
+
+.bg-darken-2 {
+  background-color: $darken-2;
+}
+
+.bg-darken-3 {
+  background-color: $darken-3;
+}
+
+.bg-darken-4 {
+  background-color: $darken-4;
+}

_sass/basscss/_syntax-highlighting.scss

@@ -0,0 +1,119 @@
+.highlight {
+  -webkit-text-size-adjust: none;
+}
+
+.highlight .c,
+.highlight .cs,
+.highlight .cm,
+.highlight .cp,
+.highlight .c1 {
+  color: $hljs-comment;
+  font-style: italic;
+}
+
+.highlight .k,
+.highlight .kc,
+.highlight .kd,
+.highlight .kn,
+.highlight .kr,
+.highlight .kt,
+.highlight .kp {
+  color: $hljs-keyword;
+}
+
+.highlight .na,
+.highlight .nb,
+.highlight .nc,
+.highlight .no,
+.highlight .nd,
+.highlight .ni,
+.highlight .ne,
+.highlight .nf,
+.highlight .nl,
+.highlight .nn,
+.highlight .nx {
+  color: $hljs-name;
+}
+
+.highlight .mi,
+.highlight .il {
+  color: $hljs-number;
+}
+
+.highlight .s,
+.highlight .sb,
+.highlight .sc,
+.highlight .sd,
+.highlight .s2,
+.highlight .s3,
+.highlight .sh,
+.highlight .si,
+.highlight .sx,
+.highlight .sr,
+.highlight .ss,
+.highlight .s1 {
+  color: $hljs-string;
+}
+
+.hljs-title,
+.hljs-id,
+.scss .hljs-preprocessor {
+  color: $hljs-title;
+  font-weight: bold;
+}
+
+.highlight .k {
+  font-weight: normal;
+}
+
+.highlight .nc,
+.highlight .no {
+  color: $hljs-type;
+}
+
+.highlight .o {
+  color: $hljs-tag;
+  font-weight: normal;
+}
+
+.highlight .nb {
+  color: $hljs-attribute;
+}
+
+.highlight .sr {
+  color: $hljs-regexp;
+}
+
+.highlight .ss {
+  color: $hljs-symbol;
+}
+
+.hljs-built_in {
+  color: $hljs-built-in;
+}
+
+.hljs-preprocessor,
+.hljs-pragma,
+.hljs-pi,
+.hljs-doctype,
+.hljs-shebang,
+.hljs-cdata {
+  color: $hljs-preprocessor;
+  font-weight: bold;
+}
+
+.hljs-deletion {
+  background: $hljs-deletion;
+}
+
+.hljs-addition {
+  background: $hljs-addition;
+}
+
+.diff .hljs-change {
+  background: $hljs-change;
+}
+
+.hljs-chunk {
+  color: $hljs-chunk;
+}

_sass/basscss/_utility-headings.scss

@@ -0,0 +1,37 @@
+/* Basscss Utility Headings */
+
+.h00 {
+  font-size: $h00;
+}
+
+.h0 {
+  font-size: $h0;
+}
+
+@media #{$breakpoint-md} {
+  .h00-responsive {
+    font-size: $h00-responsive;
+  }
+
+  .h0-responsive {
+    font-size: $h0-responsive;
+  }
+
+  .h1-responsive {
+    font-size: $h1-responsive;
+  }
+}
+
+@media #{$breakpoint-xl} {
+  .h00-responsive {
+    font-size: $h00-responsive-max;
+  }
+
+  .h0-responsive {
+    font-size: $h0-responsive-max;
+  }
+
+  .h1-responsive {
+    font-size: $h1-responsive-max;
+  }
+}

_sass/basscss/_utility-typography.scss

@@ -0,0 +1,38 @@
+/* Basscss Utility Typography */
+
+.bold {
+  font-weight: $bold-font-weight;
+}
+
+.regular {
+  font-weight: normal;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.caps {
+  text-transform: uppercase;
+  letter-spacing: .2em;
+}
+
+.left-align {
+  text-align: left;
+}
+
+.center {
+  text-align: center;
+}
+
+.right-align {
+  text-align: right;
+}
+
+.justify {
+  text-align: justify;
+}
+
+.nowrap {
+  white-space: nowrap;
+}

_sass/basscss/_utility-white-space.scss

@@ -0,0 +1,182 @@
+/* Basscss Utility White Space */
+
+.m0 {
+  margin: 0;
+}
+
+.mt0 {
+  margin-top: 0;
+}
+
+.mr0 {
+  margin-right: 0;
+}
+
+.mb0 {
+  margin-bottom: 0;
+}
+
+.ml0 {
+  margin-left: 0;
+}
+
+.m1 {
+  margin: $space-1;
+}
+
+.mt1 {
+  margin-top: $space-1;
+}
+
+.mr1 {
+  margin-right: $space-1;
+}
+
+.mb1 {
+  margin-bottom: $space-1;
+}
+
+.ml1 {
+  margin-left: $space-1;
+}
+
+.m2 {
+  margin: $space-2;
+}
+
+.mt2 {
+  margin-top: $space-2;
+}
+
+.mr2 {
+  margin-right: $space-2;
+}
+
+.mb2 {
+  margin-bottom: $space-2;
+}
+
+.ml2 {
+  margin-left: $space-2;
+}
+
+.m3 {
+  margin: $space-3;
+}
+
+.mt3 {
+  margin-top: $space-3;
+}
+
+.mr3 {
+  margin-right: $space-3;
+}
+
+.mb3 {
+  margin-bottom: $space-3;
+}
+
+.ml3 {
+  margin-left: $space-3;
+}
+
+.m4 {
+  margin: $space-4;
+}
+
+.mt4 {
+  margin-top: $space-4;
+}
+
+.mr4 {
+  margin-right: $space-4;
+}
+
+.mb4 {
+  margin-bottom: $space-4;
+}
+
+.ml4 {
+  margin-left: $space-4;
+}
+
+.mxn1 {
+  margin-left: -$space-1;
+  margin-right: -$space-1;
+}
+
+.mxn2 {
+  margin-left: -$space-2;
+  margin-right: -$space-2;
+}
+
+.mxn3 {
+  margin-left: -$space-3;
+  margin-right: -$space-3;
+}
+
+.mxn4 {
+  margin-left: -$space-4;
+  margin-right: -$space-4;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.p1 {
+  padding: $space-1;
+}
+
+.py1 {
+  padding-top: $space-1;
+  padding-bottom: $space-1;
+}
+
+.px1 {
+  padding-left: $space-1;
+  padding-right: $space-1;
+}
+
+.p2 {
+  padding: $space-2;
+}
+
+.py2 {
+  padding-top: $space-2;
+  padding-bottom: $space-2;
+}
+
+.px2 {
+  padding-left: $space-2;
+  padding-right: $space-2;
+}
+
+.p3 {
+  padding: $space-3;
+}
+
+.py3 {
+  padding-top: $space-2;
+  padding-bottom: $space-1 + $space-2;
+}
+
+.px3 {
+  padding-left: $space-3;
+  padding-right: $space-3;
+}
+
+.p4 {
+  padding: $space-4;
+}
+
+.py4 {
+  padding-top: $space-4;
+  padding-bottom: $space-4;
+}
+
+.px4 {
+  padding-left: $space-4;
+  padding-right: $space-4;
+}