use milligram to replace skeleton (#861)

electrode-io · Jul 16, 2018 · eaf008f · eaf008f
1 parent 6ce6414
commit eaf008f
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 512 deletions.
diff --git a/packages/generator-electrode/generators/app/templates/_package.js b/packages/generator-electrode/generators/app/templates/_package.js
@@ -41,7 +41,8 @@ return {
     "electrode-auto-ssr": "^1.0.0", //<% } %>
     lodash: "^4.17.10",
     "react-router-config": "^1.0.0-beta.4",
-    "react-router-dom": "^4.3.1"
+    "react-router-dom": "^4.3.1",
+    milligram: "^1.3.0"
   },
   devDependencies: {
     "electrode-archetype-react-app-dev": "^5.3.4"

diff --git a/packages/generator-electrode/generators/app/templates/src/client/components/demo-buttons.jsx b/packages/generator-electrode/generators/app/templates/src/client/components/demo-buttons.jsx
@@ -1,6 +1,6 @@
 import React from "react";
-import skeleton from "../styles/skeleton.css";
 import custom from "../styles/custom.css";
+import milligram from "milligram";
 
 /*
  * Demostrates a simple pure functional component
@@ -9,23 +9,23 @@ import custom from "../styles/custom.css";
 export const DemoButtons = () => (
   <div>
     <h6 className={custom["docs-header"]}>
-      demo CSS modules with buttons from <a href="http://getskeleton.com/">skeleton</a>
+      demo CSS modules with buttons from <a href="https://milligram.io/">milligram</a>
     </h6>
     <div className={custom["docs-example"]}>
-      <a className={skeleton.button} href="#">
+      <a className={milligram.button} href="#">
         Anchor button
       </a>
       <button>Button element</button>
       <input type="submit" value="submit input" />
       <input type="button" value="button input" />
     </div>
     <div className={custom["docs-example"]}>
-      <a className={`${skeleton.button} ${skeleton["button-primary"]}`} href="#">
+      <a className={`${milligram.button} ${milligram["button-outline"]}`} href="#">
         Anchor button
       </a>
-      <button className={skeleton["button-primary"]}>Button element</button>
-      <input className={skeleton["button-primary"]} type="submit" value="submit input" />
-      <input className={skeleton["button-primary"]} type="button" value="button input" />
+      <button className={milligram["button-outline"]}>Button element</button>
+      <input className={milligram["button-outline"]} type="submit" value="submit input" />
+      <input className={milligram["button-outline"]} type="button" value="button input" />
     </div>
   </div>
 );
diff --git a/packages/generator-electrode/generators/app/templates/src/client/components/home.jsx b/packages/generator-electrode/generators/app/templates/src/client/components/home.jsx
@@ -1,6 +1,6 @@
 /*
  * This is a demo component the Eletrode app generator included
- * to show using Skeleton CSS lib (named base.css) and Redux
+ * to show using Milligram CSS lib and Redux
  * store for display HTML elements and managing states.
  *
  * To start your own app, please replace or remove these files:

diff --git a/packages/generator-electrode/generators/app/templates/src/client/styles/custom.css b/packages/generator-electrode/generators/app/templates/src/client/styles/custom.css
@@ -32,6 +32,11 @@
 .docs-example h6 {
   margin-bottom: 1rem;
 }
+.docs-example a,
+.docs-example button,
+.docs-example input {
+  margin-right: 1rem;
+}
 .heading-font-size {
   font-size: 1.2rem;
   color: #999;