feat: add very basic row/col layout

Author: fuzzzerd

demo/index.html

@@ -16,6 +16,8 @@
         <a href="#paragraph">Paragraph Content.</a>
         <a href="#tabledata">Table Data</a>
         <a href="#formdata">Form Data</a>
+        <a href="#layout">Layout</a>
+        <a href="#layoutex">Layout Examples</a>
       </nav>
     </header>
     <main>
@@ -134,6 +136,47 @@ <h2 id="formdata">Form</h2>
           <input type="submit" value="Send message" />
         </fieldset>
       </form>
+      <h2 id="layout">Layout</h2>
+      <div class="container">
+        <div class="row">
+          <div class="col col-small">Small Column 1</div>
+          <div class="col col-small">Small Column 2</div>
+          <div class="col col-small">Small Column 3</div>
+          <div class="col col-small">Small Column 4</div>
+        </div>
+        <div class="row">
+          <div class="col col-small">Small Column 1</div>
+          <div class="col col-small">Small Column 2</div>
+          <div class="col col-medium">Medium Column 1</div>
+        </div>
+        <div class="row">
+          <div class="col col-medium">Medium Column 1</div>
+          <div class="col col-medium">Medium Column 2</div>
+        </div>
+        <div class="row">
+          <div class="col col-large">Large Column</div>
+        </div>
+      </div>
+      <h2 id="layoutex">Layout Examples</h2>
+      <div class="container">
+        <div class="row">
+          <div class="col col-medium">
+            <form>
+              <input type="text" placeholder="Search..." />
+              <input type="submit" value="Search" />
+            </form>
+          </div>
+          <div class="col col-medium">
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a
+              mauris eleifend, posuere ipsum sit amet, mattis elit. Integer nec
+              tortor augue. Quisque dignissim odio id urna tempor efficitur.
+              Vivamus tincidunt consectetur magna, sit amet rutrum sapien
+              fermentum eget. Integer consectetur ac massa ac consectetur.
+            </p>
+          </div>
+        </div>
+      </div>
     </main>
     <footer>author, (c), etc</footer>
   </body>

demo/tinycss.css

@@ -1,6 +1,9 @@
 * {
   box-sizing: border-box;
 }
+p {
+  margin: 0;
+}
 
 :root {
   --sans-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
@@ -42,10 +45,6 @@ footer {
   color: var(--text-light);
 }
 
-body {
-  padding: 0 1rem;
-}
-
 a {
   color: var(--accent-dark);
   text-decoration: underline;

demo/tinycss.css.map

@@ -1,5 +1,6 @@
 input,
 select,
+button,
 textarea {
   font-size: inherit;
   font-family: inherit;

src/base.scss

@@ -0,0 +1,60 @@
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 1rem;
+  padding-left: 1rem;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  margin-right: -1rem;
+  margin-left: -1rem;
+  justify-content: space-between;
+}
+
+.col {
+  padding: 1rem;
+  box-sizing: border-box;
+  flex-grow: 1;
+}
+
+.col-small {
+  flex-basis: 25%;
+}
+
+.col-medium {
+  flex-basis: 50%;
+}
+
+.col-large {
+  flex-basis: 100%;
+}
+
+@media (max-width: 1200px) {
+  .col-small {
+    flex-basis: 33.33%;
+  }
+  .col-medium {
+    flex-basis: 50%;
+  }
+}
+
+@media (max-width: 992px) {
+  .col-small {
+    flex-basis: 50%;
+  }
+  .col-medium {
+    flex-basis: 100%;
+  }
+}
+
+@media (max-width: 768px) {
+  .col-small, .col-medium {
+    flex-basis: 100%;
+  }
+}

src/forms.scss

@@ -4,3 +4,4 @@
 @use "src/nav.scss";
 @use "src/table.scss";
 @use "src/forms.scss";
+@use "src/layout.scss";