Convert the other css package pages to use common.css

AgnosticUI · Oct 4, 2020 · 645668e · 645668e
1 parent 317ab7c
commit 645668e
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 76 deletions.
diff --git a/agnosticui-css/button.html b/agnosticui-css/button.html
@@ -5,33 +5,12 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Button</title>
-
-  <link rel="stylesheet" href="./button.css">
-  <link rel="stylesheet" href="./button-group.css">
-  <link rel="stylesheet" href="./progress.css">
+  <link rel="stylesheet" href="./common.css">
   <style>
     /* these styles are purely demonstration related styles only */
     body {
       width: 450px;
       margin: 40px auto;
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Ubuntu", "Fira Sans", Helvetica, "Droid Sans", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-    }
-
-    h3 {
-      font-weight: 300;
-      text-align: center;
-    }
-
-    div {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      margin-bottom: 40px;
-    }
-
-    .row {
-      flex-direction: row;
     }
 
     .row .btn {

diff --git a/agnosticui-css/card.html b/agnosticui-css/card.html
@@ -4,9 +4,7 @@
 
 <head>
   <title>Card</title>
-  <link rel="stylesheet" href="./card.css">
-  <link rel="stylesheet" href="./button.css">
-  <link rel="stylesheet" href="./button-group.css">
+  <link rel="stylesheet" href="./common.css">
   <style>
     /* Body Layout (just demo stuff really) */
     * {
@@ -15,41 +13,15 @@
 
     body {
       --primary: #E05D26;
-      --grey: #454545;
-      --lightgrey: #666;
-
-      color: var(--grey);
-      line-height: 1.55;
-      display: flex;
-      justify-content: center;
-      flex-wrap: wrap;
-      font-family: "Roboto", Helvetica, Arial, sans-serif;
-      width: 90%;
       margin: 2rem auto;
+      width: 90%;
     }
 
     /* Demo styles */
     body .card {
       margin-bottom: 2rem;
     }
 
-    .quoted::before {
-      /* Many sans fonts do not have smart or book quotes so prefer ones that do */
-      font-family: Georgia, 'Times New Roman', Times, serif;
-      content: open-quote;
-    }
-
-    .quoted::after {
-      /* Many sans fonts do not have smart or book quotes so prefer ones that do */
-      font-family: Georgia, 'Times New Roman', Times, serif;
-      content: close-quote;
-    }
-
-    .quoted {
-      /* Kind of cludgy, but this will preserve your main font within the smart quotes */
-      font-family: inherit;
-      quotes: "“""”""‘""’";
-    }
 
     /* This is demo specific styling for a couple of the cards example's
     child content. The reusable cards stuff is all in card.css */
@@ -89,13 +61,13 @@
     }
 
     .card-rating span {
-      color: var(--grey);
+      color: var(--agnosticui-default-gray-dark);
     }
 
     .card-votes {
       font-size: .825em;
       font-style: italic;
-      color: var(--lightgrey);
+      color: var(--agnosticui-default-gray-light);
     }
 
     .card-image-wrap {
@@ -302,9 +274,9 @@ <h1 style="margin: 0;">Card Base / No Skin</h1>
       <p>If using CSS custom properties theming is not enough customizability for you, this approach may help. So, each
         card's CSS
         is, essentially, split into two classes between a card's base and its skinning styles:
-      <pre>.card-base</pre> and
-      <pre>.card-skin</pre> with
-      <pre>.card</pre> combings these two for convenience. But, check out how you can leave out the skin…
+        <i>.card-base</i> and
+        <i>.card-skin</i> with
+        <i>.card</i> combings these two for convenience. But, check out how you can leave out the skin…
       </p>
       <p>If you inspect this card in devtools, you'll see that we use the <i>card-base</i> class.
         With only the base styles, I can customize the skin exactly to my liking. For example, I've

diff --git a/agnosticui-css/common.css b/agnosticui-css/common.css
@@ -1,12 +1,17 @@
-@import "colors.css";
-@import "spacing.css";
 @import "button.css";
-@import "typography.css";
-@import "input.css";
+@import "button-group.css";
+@import "card.css";
+@import "colors.css";
 @import "flexboxgrid-grid.css";
 @import "flexboxgrid-col.css";
 @import "flexboxgrid-row.css";
-
+@import "header.css";
+@import "headernav.css";
+@import "headernavitem.css";
+@import "input.css";
+@import "progress.css";
+@import "spacing.css";
+@import "typography.css";
 
 body {
   font-family: var(--agnosticui-default-font-family);
@@ -37,6 +42,25 @@ i {
   top: -1px;
 }
 
+.quoted::before {
+  /* Many sans fonts do not have smart or book quotes so prefer ones that do */
+  font-family: Georgia, 'Times New Roman', Times, serif;
+  content: open-quote;
+}
+
+.quoted::after {
+  /* Many sans fonts do not have smart or book quotes so prefer ones that do */
+  font-family: Georgia, 'Times New Roman', Times, serif;
+  content: close-quote;
+}
+
+.quoted {
+  /* Kind of cludgy, but this will preserve your main font within the smart quotes */
+  font-family: inherit;
+  quotes: "“""”""‘""’";
+}
+
+
 p {
   font-size: 18px;
 }

diff --git a/agnosticui-css/flexboxgrid.html b/agnosticui-css/flexboxgrid.html
@@ -4,9 +4,7 @@
 
 <head>
   <title>FlexGrid</title>
-  <link rel="stylesheet" href="./flexboxgrid-grid.css">
-  <link rel="stylesheet" href="./flexboxgrid-row.css">
-  <link rel="stylesheet" href="./flexboxgrid-col.css">
+  <link rel="stylesheet" href="./common.css">
   <style>
     body {
       margin-top: 2em;

diff --git a/agnosticui-css/header.html b/agnosticui-css/header.html
@@ -4,9 +4,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="./header.css">
-  <link rel="stylesheet" href="./headernav.css">
-  <link rel="stylesheet" href="./headernavitem.css">
+  <link rel="stylesheet" href="./common.css">
   <title>Header</title>
 
   <style>

diff --git a/agnosticui-css/index.html b/agnosticui-css/index.html
@@ -4,10 +4,7 @@
 
 <head>
   <title>Button</title>
-  <link rel="stylesheet" href="./button.css">
-  <link rel="stylesheet" href="./button-group.css">
-  <link rel="stylesheet" href="./progress.css">
-  <link rel="stylesheet" href="./header.css">
+  <link rel="stylesheet" href="./common.css">
   <style>
     body {
       width: 750px;

diff --git a/agnosticui-css/input.html b/agnosticui-css/input.html
@@ -5,7 +5,6 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Inputs</title>
-
   <link rel="stylesheet" href="./common.css">
   <style>
     /* these styles are purely demonstration related only, and therefor

diff --git a/agnosticui-css/progress.html b/agnosticui-css/progress.html
@@ -4,9 +4,7 @@
 
 <head>
   <title>Progress</title>
-  <link rel="stylesheet" href="./progress.css">
-  <link rel="stylesheet" href="./button.css">
-  <link rel="stylesheet" href="./button-group.css">
+  <link rel="stylesheet" href="./common.css">
   <style>
     /* these styles are purely demonstration related styles only */
     body {