Merge pull request #225 from nothingworksinc/remove-outdated-docs

davidhemphill · web-flow · commit 96c61724a4ba · 2017-10-30T22:50:14.000-05:00
Add mobile menu + Remove some outdated docs
diff --git a/docs/source/_assets/less/base.less b/docs/source/_assets/less/base.less
@@ -1,7 +1,7 @@
 @tailwind reset;
 
 html {
-  font-size: 12px;
+  font-size: 14px;
 
   @media (min-width: 420px) {
     font-size: 16px;
@@ -13,6 +13,7 @@ a {
   text-decoration: none;
 }
 
-ol, ul {
+ol,
+ul {
   @apply .list-reset;
 }
diff --git a/docs/source/_assets/less/utilities.less b/docs/source/_assets/less/utilities.less
@@ -2,5 +2,9 @@
   background-color: #e3ebed;
 }
 .bg-gradient-brand {
-    background-image: linear-gradient(to right, #2383ae, #6dd7b9);
+  background-image: linear-gradient(to right, #2383ae, #6dd7b9);
+}
+
+.\!hidden {
+  display: none !important;
 }
diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php
@@ -22,15 +22,14 @@
         <link rel="stylesheet" href="{{ mix('/css/main.css') }}">
         <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
         <script src="{{ mix('/js/nav.js') }}"></script>
-
     </head>
-    <body class="font-sans font-normal text-slate-darker leading-normal">
+    <body data-sidebar-visible="true" class="font-sans font-normal text-slate-darker leading-normal">
         <div class="min-h-screen">
-            <div class="fixed pin-y pin-l bg-smoke-light w-full max-w-xs flex-none border-r-2 border-smoke flex flex-col">
+            <div id="sidebar" class="z-50 fixed pin-y pin-l overflow-y-scroll bg-smoke-light w-4/5 md:w-full md:max-w-xs flex-none border-r-2 border-smoke md:flex flex-col">
                 <div class="border-b border-smoke flex-none p-8">
-                    <div class="text-center mb-8">
+                    <div class="hidden md:block text-center mb-8">
                         <a href="/" class="inline-block">
-                            <svg class="h-8" viewBox="0 0 60 36" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="0%" y1="0%" y2="100%" id="a"><stop stop-color="#2383AE" offset="0%"></stop><stop stop-color="#6DD7B9" offset="100%"></stop></linearGradient></defs><path d="M15 12c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5zM0 30c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5z" fill="url(#a)" fill-rule="evenodd"></path></svg>
+                            <svg class="h-8" viewBox="0 0 60 36" xmlns="http://www.w3.org/2000/svg"><path d="M15 12c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5zM0 30c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5z" fill="url(#logoGradient)" fill-rule="evenodd"></path></svg>
                         </a>
                     </div>
                     <div class="relative">
@@ -185,14 +184,64 @@
                     </nav>
                 </div>
             </div>
-            <div class="ml-80">
-                <div id="content" class="px-6 py-8 w-full max-w-xl mx-auto">
+            <div class="md:ml-80">
+                <div class="fixed w-full">
+                    <div class="pin-t bg-white md:hidden relative border-b border-dark h-12 flex items-center">
+                          <div class="js-open-sidebar absolute pin-l pin-y px-4 flex items-center">
+                              <svg class="h-4" fill="#777" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
+                          </div>
+                          <div class="mx-auto inline-flex items-center">
+                              <svg class="h-4" viewBox="0 0 60 36" xmlns="http://www.w3.org/2000/svg">
+                                  <path d="M15 12c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5zM0 30c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5z" fill="url(#logoGradient)" fill-rule="evenodd"></path>
+                              </svg>
+                          </div>
+                          <div class="js-close-sidebar">
+                            <div class="flex items-center absolute pin-r pin-y px-4">
+                              <svg class="h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></svg>
+                            </div>
+                          </div>
+                    </div>
+                </div>
+                <div id="content" class="px-6 py-16 md:py-8 w-full max-w-xl mx-auto">
                     <div id="app">
                         @yield('body')
                     </div>
-                    <script src="{{ mix('/js/app.js') }}"></script>
+                    <script src="/js/app.js"></script>
+                    <script>
+                        anchors.options = { placement: 'left', class: 'text-slate-light' };
+                        anchors.add();
+
+                        var closeSidebar = function () {
+                            $('#sidebar').addClass("hidden");
+                            $('.js-close-sidebar').addClass("hidden");
+                        }
+
+                        $('.js-close-sidebar').on('click', function () {
+                          closeSidebar();
+                        });
+
+                        $('.js-open-sidebar').on('click', function () {
+                            $('#sidebar').removeClass("hidden");
+                            $('.js-close-sidebar').removeClass("hidden");
+                        });
+
+                        $(document).ready(function () {
+                          if ($(window).width() <= 767) {
+                            closeSidebar();
+                          }
+                        });
+                    </script>
                 </div>
             </div>
         </div>
+
+        <svg>
+          <defs>
+            <linearGradient x1="0%" y1="0%" y2="100%" id="logoGradient">
+              <stop stop-color="#2383AE" offset="0%"></stop>
+              <stop stop-color="#6DD7B9" offset="100%"></stop>
+            </linearGradient>
+          </defs>
+        </svg>
     </body>
 </html>
diff --git a/docs/source/docs/background-color.blade.md b/docs/source/docs/background-color.blade.md
@@ -248,20 +248,3 @@ Using the utilities in HTML:
 <div class="bg-slate"></div>
 <div class="bg-slate-light"></div>
 ```
-
-Using the utilities in Less:
-
-```less
-div {
-  .bg-white;
-  .bg-smoke-lighter;
-  .bg-smoke-light;
-  .bg-smoke;
-
-  .bg-slate-darker;
-  .bg-slate-dark;
-  .bg-slate;
-  .bg-slate-light;
-}
-```
-
diff --git a/docs/source/docs/border-color.blade.md b/docs/source/docs/border-color.blade.md
@@ -4,53 +4,3 @@ title: "Border Color"
 ---
 
 # Border Color
-
-<div class="subnav">
-    <a class="subnav-link" href="#color">Color</a>
-    <a class="subnav-link" href="#responsive">Responsive</a>
-</div>
-
-<h2 id="colors">Colors</h2>
-
-By default, borders use the `@default-border-color`. To override a border color, add one of the border color utilities.
-
-```html
-<div class="border border-smoke-darker"></div>
-<div class="border border-smoke-dark"></div>
-<div class="border border-smoke"></div>
-
-<div class="border border-white"></div>
-<div class="border border-smoke-lighter"></div>
-<div class="border border-smoke-light"></div>
-
-<div class="border border-invisible"></div>
-```
-
-```less
-div {
-  .border-smoke-darker;
-  .border-smoke-dark;
-  .border-smoke;
-
-  .border-white;
-  .border-smoke-lighter;
-  .border-smoke-light;
-
-  .border-invisible;
-}
-```
-
-The default border colors can also be modified using the following variables.
-
-```less
-// Variable:            Default:
-@border-smoke-darker:           hsl(0, 0%, 82%);
-@border-smoke-dark:      hsl(0, 0%, 90%);
-@border-smoke:    hsl(0, 0%, 96%);
-
-@border-white:          hsl(0, 0%, 100%);
-@border-smoke-lighter:     hsl(0, 0%, 60%);
-@border-smoke-light:   hsl(0, 0%, 35%);
-
-@default-border-color:  @border-smoke-dark;
-```
diff --git a/docs/source/docs/fonts.blade.md b/docs/source/docs/fonts.blade.md
@@ -4,31 +4,3 @@ title: "Font Families"
 ---
 
 # Font Families
-
-<div class="subnav">
-    <a class="subnav-link" href="#usage">Usage</a>
-    <a class="subnav-link" href="#responsive">Responsive</a>
-    <a class="subnav-link" href="#customizing">Customizing</a>
-</div>
-
-```html
-<div class="font-sans"></div>
-<div class="font-serif"></div>
-<div class="font-mono"></div>
-```
-
-```less
-div {
-  .font-sans;
-  .font-serif;
-  .font-mono;
-}
-```
-
-```less
-// Customize the font stack
-@font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
-@font-family-serif: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
-@font-family-mono: Consolas, "Andale font-mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus font-mono L", Monaco, "Courier New", Courier, monospace;
-@font-family-base: @font-family-sans;
-```
diff --git a/docs/source/docs/margin.blade.md b/docs/source/docs/margin.blade.md
@@ -47,43 +47,8 @@ The syntax below is combined to create a system for padding and margins. For exa
 
 You can customize the margin and padding utilities using the `@sizing-scale` variable. Please note that the entire scale must be redefined. It's not possible to add a new value to the existing scale.
 
-```less
-// The default sizing scale
-@sizing-scale:
-  '1' 0.25rem,
-  '2' 0.5rem,
-  '3' 0.75rem,
-  '4' 1rem,
-  '6' 1.5rem,
-  '8' 2rem,
-  '12' 3rem,
-  '16' 4rem,
-;
-```
-
-By default the `@sizing-scale` is automatically applied to the margin, negative margin (pull) and padding scales. However, it's possible to customize each scale individually using the `@margin-scale`, `@pull-scale` and `@padding-scale` variables.
-
-```less
-// Override the margin scale
-@margin-scale:
-  '1' 0.25rem,
-  '2' 0.5rem,
-  // ...
-;
-
-// Override the pull scale
-@pull-scale:
-  '1' 0.25rem,
-  '2' 0.5rem,
-  // ...
-;
-
-// Override the padding scale
-@padding-scale:
-  '1' 0.25rem,
-  '2' 0.5rem,
-  // ...
-;
+```css
+// Scale customization here
 ```
 
 <h2 id="responsive">Responsive spacing utilities</h2>
@@ -96,10 +61,6 @@ The spacing utilities can also be used with [responsive](/docs/responsive-design
 <div class="pull-1 sm:pull-2 md:pull-3 lg:pull-4"></div>
 ```
 
-```less
-div {
-  .screen(lg, {
-    .mt-6;
-  });
-}
+```css
+// Responsive example here
 ```
diff --git a/docs/source/docs/negative-margin.blade.md b/docs/source/docs/negative-margin.blade.md
@@ -45,45 +45,8 @@ The syntax below is combined to create a system for padding and margins. For exa
 
 <h2 id="customizing">Customizing the spacing scale</h2>
 
-You can customize the margin and padding utilities using the `@sizing-scale` variable. Please note that the entire scale must be redefined. It's not possible to add a new value to the existing scale.
-
-```less
-// The default sizing scale
-@sizing-scale:
-  '1' 0.25rem,
-  '2' 0.5rem,
-  '3' 0.75rem,
-  '4' 1rem,
-  '6' 1.5rem,
-  '8' 2rem,
-  '12' 3rem,
-  '16' 4rem,
-;
-```
-
-By default the `@sizing-scale` is automatically applied to the margin, negative margin (pull) and padding scales. However, it's possible to customize each scale individually using the `@margin-scale`, `@pull-scale` and `@padding-scale` variables.
-
-```less
-// Override the margin scale
-@margin-scale:
-  '1' 0.25rem,
-  '2' 0.5rem,
-  // ...
-;
-
-// Override the pull scale
-@pull-scale:
-  '1' 0.25rem,
-  '2' 0.5rem,
-  // ...
-;
-
-// Override the padding scale
-@padding-scale:
-  '1' 0.25rem,
-  '2' 0.5rem,
-  // ...
-;
+```css
+// Scale customization here
 ```
 
 <h2 id="responsive">Responsive spacing utilities</h2>
@@ -96,11 +59,6 @@ The spacing utilities can also be used with [responsive](/docs/responsive-design
 <div class="pull-1 sm:pull-2 md:pull-3 lg:pull-4"></div>
 ```
 
-```less
-div {
-  .screen(lg, {
-    .mt-6;
-  });
-}
+```css
+// Responsive example here
 ```
-
diff --git a/docs/source/docs/padding.blade.md b/docs/source/docs/padding.blade.md

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`@tailwind reset;`
`2`	`2`
`3`	`3`	`html {`
`4`		`- font-size: 12px;`
	`4`	`+ font-size: 14px;`
`5`	`5`
`6`	`6`	`@media (min-width: 420px) {`
`7`	`7`	`font-size: 16px;`
`@@ -13,6 +13,7 @@ a {`
`13`	`13`	`text-decoration: none;`
`14`	`14`	`}`
`15`	`15`
`16`		`-ol, ul {`
	`16`	`+ol,`
	`17`	`+ul {`
`17`	`18`	`@apply .list-reset;`
`18`	`19`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2,5 +2,9 @@`
`2`	`2`	`background-color: #e3ebed;`
`3`	`3`	`}`
`4`	`4`	`.bg-gradient-brand {`
`5`		`- background-image: linear-gradient(to right, #2383ae, #6dd7b9);`
	`5`	`+ background-image: linear-gradient(to right, #2383ae, #6dd7b9);`
	`6`	`+}`
	`7`	`+`
	`8`	`+.\!hidden {`
	`9`	`+ display: none !important;`
`6`	`10`	`}`