template all meta data

simgooder · Sep 13, 2018 · b68fddc · b68fddc
1 parent 2578589
commit b68fddc
Show file tree

Hide file tree

Showing 67 changed files with 497 additions and 232 deletions.
diff --git a/README.md b/README.md
@@ -13,16 +13,18 @@
 ----
 
 ## ToDo
-- [ ] Implement Prettify.js for code snippets in the demo
-- [ ] Add `danger` button
-- [ ] Add `loading` states
-- [ ] Implement a typographic scale
-- [ ] Handle build errors (especially Handlebars compilation and image processing)
-- [ ] After these are wrapped up, merge `newVersion` as `Master`
+- [ ] Add Pagesimple usage clause to `README.md`
+- [ ] Update `documentation` to provide information about site structure and templating
+- [ ] Merge `newVersion` as `Master` v0.3.0
+- [ ] Create build task to generate `theme.json` file
 
 
 ## Changelog
 
+__Updates__ - *v0.2.5* 
+- Add `assets` folder to `src`, move `img` folder into `assets`
+- 
+
 __Updates__ - *v0.2.0*
 - Moved to Gulp for faster build process
 - Added image compression to build process

diff --git a/src/img/ex-gohobo.jpg → dist/assets/img/ex-gohobo.jpg b/src/img/ex-gohobo.jpg → dist/assets/img/ex-gohobo.jpg
diff --git a/src/img/[email protected] → dist/assets/img/[email protected] b/src/img/[email protected] → dist/assets/img/[email protected]
diff --git a/src/img/ex-the-idea.jpg → dist/assets/img/ex-the-idea.jpg b/src/img/ex-the-idea.jpg → dist/assets/img/ex-the-idea.jpg
diff --git a/src/img/[email protected] → dist/assets/img/[email protected] b/src/img/[email protected] → dist/assets/img/[email protected]
diff --git a/dist/img/favicon/favicon.ico → dist/assets/img/favicon/favicon.ico b/dist/img/favicon/favicon.ico → dist/assets/img/favicon/favicon.ico
diff --git a/src/img/favicon/favicon.png → dist/assets/img/favicon/favicon.png b/src/img/favicon/favicon.png → dist/assets/img/favicon/favicon.png
diff --git a/src/img/favicon/favicon.svg → dist/assets/img/favicon/favicon.svg b/src/img/favicon/favicon.svg → dist/assets/img/favicon/favicon.svg
diff --git a/src/img/github-logo.svg → dist/assets/img/github-logo.svg b/src/img/github-logo.svg → dist/assets/img/github-logo.svg
diff --git a/src/img/gulp-logo.svg → dist/assets/img/gulp-logo.svg b/src/img/gulp-logo.svg → dist/assets/img/gulp-logo.svg
diff --git a/src/img/sass-logo.svg → dist/assets/img/sass-logo.svg b/src/img/sass-logo.svg → dist/assets/img/sass-logo.svg
diff --git a/dist/img/slim-starterkit-logo.svg → dist/assets/img/slim-starterkit-logo.svg b/dist/img/slim-starterkit-logo.svg → dist/assets/img/slim-starterkit-logo.svg
diff --git a/dist/img/slim-starterkit-logomark.svg → dist/assets/img/slim-starterkit-logomark.svg b/dist/img/slim-starterkit-logomark.svg → dist/assets/img/slim-starterkit-logomark.svg
diff --git a/dist/css/main.css b/dist/css/main.css
diff --git a/dist/documentation.html b/dist/documentation.html
@@ -12,12 +12,13 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <link rel="canonical" href="">
 
     <link rel="shortcut icon" href="img/favicon/favicon.png?v=1" type="image/x-icon">
     <link rel="icon" href="img/favicon/favicon.ico?v=1" type="image/x-icon">
     <link rel="mask-icon" href="img/favicon/favicon.svg?v=1" color="#6473fa" type="">
 
+    <link rel="canonical" href="https://simgooder.github.io/slimstarterkit/documentation.html">
+
     <meta name="theme-color" content="#6473fa">
 
     <!-- Scripts -->
@@ -27,23 +28,19 @@
     <link rel="stylesheet" href="css/main.css">
 
     <!-- Third Party Assets -->
-    <link href="https://fonts.googleapis.com/css?family=Work+Sans:400,600" rel="stylesheet">
 
     <!-- Meta Tags -->
     <meta name="description" content="A simple, starting point for website projects. Also known as a boilerplate.">
 
     <!-- Open Graph Markup for Social Sharing -->
     <meta property="og:title" content="Slim Starterkit" />
     <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://simgooder.github.io/slimStarterkit/" />
+    <meta property="og:url" content="https://simgooder.github.io/slimstarterkit/" />
     <meta property="og:image" content="img/slim-starterkit-logo.svg" />
-    <meta property="og:site_name" content="SlimStarterkit" />
+    <meta property="og:site_name" content="Slim Starterkit" />
     <meta property="og:description" content="A simple, starting point for website projects. Also known as a boilerplate." />
 
-    <!-- <meta name="twitter:card" content="">
-    <meta name="twitter:site" content="">
-    <meta name="twitter:creator" content="">
-    <meta name="twitter:image" content=""> -->
+
 
 </head>
 
@@ -90,7 +87,8 @@
 
 
         <main role="main">
-<aside class="sidebar">
+<aside class="sidebar" data-idea-target="toc">
+    <h5>Table of Contents</h5>
     <nav>
         <li class="sidebar-item">
             <a href="#layout">
@@ -102,8 +100,8 @@
                         </a>
                     </li>
                     <li class="sidebar-item-sub">
-                        <a href="#positioning">
-                            Positioning
+                        <a href="#spacing">
+                            Spacing
                         </a>
                     </li>
                     <li class="sidebar-item-sub">
@@ -133,10 +131,14 @@
             </a>
         </li>
     </nav>
+    <button class="sidebar-tab" data-idea-toggle="toc">|||</button>
 </aside>
-<section class="container">
+<section class="container push-left">
     <header>
-        <h1>Documentation</h1>
+        <h1>
+            Documentation <br>
+            &amp; Styleguide
+        </h1>
     </header>
 
 
@@ -170,11 +172,11 @@ <h3 id="grid">
 
     <section class="section">
 
-        <h3 id="positioning">
-            Positioning
+        <h3 id="spacing">
+            Spacing
         </h3>
         <p>Based on a simple
-            <code>$space</code> variable, and a set of helper classes, positioning your elements with padding or extra margin is as easy as adding a
+            <code>$space</code> variable, and a set of helper classes, spacing your elements with padding or extra margin is as easy as adding a
             class. In this case,
             <code>$space</code> is equal to
             <code>1em</code>.</p>
@@ -264,14 +266,18 @@ <h3 id="containers">
                     <tr>
                         <th class="no-wrap">Container</th>
                         <th class="no-wrap">Max-width</th>
+                        <th class="no-wrap">Var</th>
                         <th class="no-wrap">Class</th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr>
                         <td>Extra Large</td>
                         <td class="no-wrap">
-                            <code>1880px ($bp-xl)</code>
+                            <code>1880px</code>
+                        </td>
+                        <td class="no-wrap">
+                            <code>$bp-xl</code>
                         </td>
                         <td class="no-wrap">
                             <code>.container-xl</code>
@@ -280,7 +286,10 @@ <h3 id="containers">
                     <tr>
                         <td>Large</td>
                         <td class="no-wrap">
-                            <code>1260px ($bp-lg)</code>
+                            <code>1260px</code>
+                        </td>
+                        <td class="no-wrap">
+                            <code>$bp-lg</code>
                         </td>
                         <td class="no-wrap">
                             <code>.container-lg</code>
@@ -289,7 +298,10 @@ <h3 id="containers">
                     <tr>
                         <td>Medium</td>
                         <td class="no-wrap">
-                            <code>1024px ($bp-md)</code>
+                            <code>1024px</code>
+                        </td>
+                        <td class="no-wrap">
+                            <code>$bp-md</code>
                         </td>
                         <td class="no-wrap">
                             <code>.container</code>
@@ -298,7 +310,10 @@ <h3 id="containers">
                     <tr>
                         <td>Small</td>
                         <td class="no-wrap">
-                            <code>760px ($bp-sm)</code>
+                            <code>760px</code>
+                        </td>
+                        <td class="no-wrap">
+                            <code>$bp-sm</code>
                         </td>
                         <td class="no-wrap">
                             <code>.container-sm</code>
@@ -307,7 +322,10 @@ <h3 id="containers">
                     <tr>
                         <td>Extra Small</td>
                         <td class="no-wrap">
-                            <code>520px ($bp-xs)</code>
+                            <code>520px</code>
+                        </td>
+                        <td class="no-wrap">
+                            <code>$bp-xs</code>
                         </td>
                         <td class="no-wrap">
                             <code>.container-xs</code>
@@ -422,28 +440,28 @@ <h2>Color System</h2>
                 </thead>
                 <tbody>
                     <tr>
-                        <td class="color-block c-primary"></td>
+                        <td class="color-block c-primary-500"></td>
                         <td class="no-wrap">
-                            Primary
+                            Primary 500
                         </td>
                         <td class="no-wrap">
-                            <code>$color-primary</code>
+                            <code>$color-primary-300</code>
                         </td>
                         <td>
-                            Used for actionable items
+                            Slightly darker shade of
+                            <code>primary</code>. Used for alternate states (hover, etc).
                         </td>
                     </tr>
                     <tr>
-                        <td class="color-block c-primary-500"></td>
+                        <td class="color-block c-primary"></td>
                         <td class="no-wrap">
-                            Primary 500
+                            Primary/400
                         </td>
                         <td class="no-wrap">
-                            <code>$color-primary-300</code>
+                            <code>$color-primary</code>
                         </td>
                         <td>
-                            Slightly darker shade of
-                            <code>primary</code>. Used for alternate states (hover, etc).
+                            Used for actionable items
                         </td>
                     </tr>
                     <tr>
@@ -455,7 +473,7 @@ <h2>Color System</h2>
                             <code>$color-primary-300</code>
                         </td>
                         <td>
-                            Slightly lighter shade of
+                            Lighter shade of
                             <code>primary</code>. Used for alternate states (hover, etc).
                         </td>
                     </tr>
@@ -475,7 +493,7 @@ <h2>Color System</h2>
                     <tr>
                         <td class="color-block c-accent"></td>
                         <td class="no-wrap">
-                            accent
+                            Accent
                         </td>
                         <td class="no-wrap">
                             <code>$color-accent</code>
@@ -485,44 +503,18 @@ <h2>Color System</h2>
                         </td>
                     </tr>
                     <tr>
-                        <td class="color-block c-light"></td>
-                        <td class="no-wrap">
-                            Light
-                        </td>
-                        <td class="no-wrap">
-                            <code>$color-light</code>
-                        </td>
-                        <td>
-                            Your favourite shade of
-                            <code>white</code>.
-                        </td>
-                    </tr>
-                    <tr>
-                        <td class="color-block c-black"></td>
-                        <td class="no-wrap">
-                            Black
-                        </td>
-                        <td class="no-wrap">
-                            <code>$color-black</code>
-                        </td>
-                        <td>
-                            Your favourite shade of black.
-                        </td>
-                    </tr>
-                    <tr>
-                        <td class="color-block c-dark"></td>
+                        <td class="color-block c-primary-grad"></td>
                         <td class="no-wrap">
-                            Dark
+                            Gradient
                         </td>
                         <td class="no-wrap">
-                            <code>$color-dark</code>
+                            <code>$color-primary-grad</code>
                         </td>
                         <td>
-                            Your favourite shade of
-                            <code>black</code> with a hint of
-                            <code>primary</code>.
+                            Gradient based on <code>primary</code>. Who doesn't like gradients?
                         </td>
                     </tr>
+
                     <tr>
                         <td class="color-block c-success"></td>
                         <td class="no-wrap">
@@ -547,6 +539,19 @@ <h2>Color System</h2>
                             Your favourite shade of error.
                         </td>
                     </tr>
+
+                    <tr>
+                        <td class="color-block c-black"></td>
+                        <td class="no-wrap">
+                            Black
+                        </td>
+                        <td class="no-wrap">
+                            <code>$color-black</code>
+                        </td>
+                        <td>
+                            Your favourite shade of black.
+                        </td>
+                    </tr>
                     <tr>
                         <td class="color-block c-gray-500"></td>
                         <td class="no-wrap">
@@ -612,6 +617,18 @@ <h2>Color System</h2>
                             <code>$color-gray-200</code>.
                         </td>
                     </tr>
+                    <tr>
+                        <td class="color-block c-white"></td>
+                        <td class="no-wrap">
+                            White
+                        </td>
+                        <td class="no-wrap">
+                            <code>$color-white</code>
+                        </td>
+                        <td>
+                            Your favourite shade of white.
+                        </td>
+                    </tr>
                 </tbody>
             </table>
 
@@ -624,7 +641,7 @@ <h2>Color System</h2>
 </main>
 
 <!-- Footer -->
-<footer class="section mar-t_xl bg-primary-grad">
+<footer class="section mar-t_xl bg-primary-grad" role="info">
 
     <div class="container-sm row row-between responsive-sm">
         <p>

diff --git a/dist/img/ex-gohobo.jpg b/dist/img/ex-gohobo.jpg
diff --git a/dist/img/[email protected] b/dist/img/[email protected]
diff --git a/dist/img/ex-the-idea.jpg b/dist/img/ex-the-idea.jpg
diff --git a/dist/img/[email protected] b/dist/img/[email protected]
diff --git a/dist/img/favicon/favicon.png b/dist/img/favicon/favicon.png
diff --git a/dist/img/favicon/favicon.svg b/dist/img/favicon/favicon.svg
diff --git a/dist/img/github-logo.svg b/dist/img/github-logo.svg