v.2

Author: Misha Vinokur

README.md

@@ -2,7 +2,7 @@
 A set of CSS designs that include grid functions, responsive font, and basic form styling
 
 ## Get Started
-Open the scaffold.scss file and set the values for `$base-font`, `$ratio`, `$max-width`
+Open the _scaffold.scss file and set the values for `$base-font`, `$ratio`, `$max-width`
 
 ## Examples
 To make a button class in your main .scss file create a new class `.button` and add the following ` @extend .button`

_grid.scss

@@ -1,20 +1,22 @@
 // Grid
 @mixin two-col($gap, $fr1, $fr2 ) {
-    display: grid;
-    grid-gap: $gap;
-    grid-template-columns: $fr1 $fr2;
+  display: grid;
+  grid-gap: $gap;
+  grid-template-columns: $fr1 $fr2;
+  align-items: center;
 
-    @media screen and (max-width: $medium-break) {
-        grid-template-columns: 1fr;
-    }
+  @media screen and (max-width: $medium-break) {
+      grid-template-columns: 1fr;
+  }
 }
 
 @mixin three-col($gap, $fr1, $fr2, $fr3) {
-    display: grid;
-    grid-gap: $gap;
-    grid-template-columns: $fr1 $fr2 $fr3;
+  display: grid;
+  grid-gap: $gap;
+  grid-template-columns: $fr1 $fr2 $fr3;
+  align-items: center;
 
-    @media screen and (max-width: $medium-break) {
-        grid-template-columns: 1fr;
-    }
+  @media screen and (max-width: $medium-break) {
+      grid-template-columns: 1fr;
+  }
 }

_input.scss

@@ -21,12 +21,4 @@ input {
 
 input[type="text"], select, textarea {
     @include form_object;
-}
-
-.button {
-    display: block;
-    width: 200px;
-    padding: 10px;
-    text-align: center;
-    cursor: pointer;
-}
+}

_scaffold.scss

@@ -1,7 +1,7 @@
 // Variables
-$base-font: 19px;
+$base-font: 18px;
 $ratio: 1.618;
-$max-width: 1200px;
+$max-width: 1250px;
 
 // Individual card scss
 @import 'breakpoints';
@@ -11,6 +11,12 @@ $max-width: 1200px;
 @import 'grid';
 @import 'misc';
 
-html, body {
-    overflow-x: hidden !important;
+// html, body {
+//   overflow-x: hidden !important;
+// }
+
+.container {
+  max-width: $max-width;
+  display: block;
+  margin: auto;
 }

_text.scss

@@ -38,15 +38,12 @@ body {
 
 p {
   max-width: 40em;
-  margin-right: auto;
-  margin-left: auto;
-  margin-top: .4em;
+  margin-top: 0;
 }
 
 h1,h2,h3,h4,h5,h6 {
   margin: 0;
   line-height: $ratio;
-  margin-bottom: .4em;
 }
 
 h6 {