More efficient and specific search for ul inside buttons

gulp/tasks/docs/jade.js

@@ -11,7 +11,7 @@ gulp.task('docs:jade', function() {
     .pipe(changed(dest))
     .pipe(jade({
         locals: {
-          currentVersion: '3.1 beta',
+          currentVersion: '3.2 beta',
           docsVersion: '3.x',
           nextDocsVersion: '4.x',
           fs: fs,

lib-core/coffee/buttons.coffee

@@ -1,7 +1,9 @@
 button = ->
 
-  ($button.classList.add 'menu-item' if $button.querySelectorAll('ul').length) for $button in k$.$$("button")
-  $buttonDropdown.parentNode.classList.add 'menu-item' for $buttonDropdown in k$.$$ '.button-dropdown'
+  // Add the 'menu-item' class to all buttons that have a 'ul' child.
+  ($button.classList.add 'menu-item' if $button.querySelector('button>ul')) for $button in document.querySelectorAll "button"
+  // Add the 'menu-item' class to all containers that have a child with the 'button-dropdown' class
+  $buttonDropdown.parentNode.classList.add 'menu-item' for $buttonDropdown in document.querySelectorAll '.button-dropdown'
 
 k$.button = button
 

lib-core/sass/core/_direct-apply.sass

@@ -159,7 +159,6 @@ form
   left: 50%
   margin-left: -20px
   box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.25)
-  pointer-events: none
   min-width: 100px
   text-align: center
   pointer-events: none

lib-docs/jade/about/index.jade

@@ -33,9 +33,6 @@ block content
       - Have only one or a few themes. Who wants a framework that makes your site look like
         everyone else's?
 
-      Extensibility is a #1, unfulfilled need in the world of frameworks.  Kickstart is solving this
-      with its own native solution, the [Kickstart Store](http://kickstart.everything.io).
-
       ## Why aren't your docs accessible
 
       When I wrote the docs, I assumed I would get backlash for not writing `aria-this` and `aria-that`

lib-docs/jade/docs/3.x/_layout.jade

@@ -1,15 +1,15 @@
 extends ../../3.x-layouts/_layout
 
 block menuVars
-  - var menuItem = "docs" 
+  - var menuItem = "docs"
 
 block page-stylesheet
   block ui-stylesheet
   script(src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js")
   link(rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/solarized_dark.min.css")
   link(rel="stylesheet" href="/css/pages/docs/index.min.css")
   script.
-    hljs.initHighlightingOnLoad(); 
+    hljs.initHighlightingOnLoad();
 
 block bleed
   header.doc-hero
@@ -29,6 +29,9 @@ block content
     //- Fixed sidebar
     aside.fixed-toc
       h1 #{title}
+      <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+      <ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-8803544022324306" data-ad-slot="8378683878"></ins>
+      <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
       form.switches
         .form_group
           .switch(data-ks-tooltip="Turn on if you're using the Sass mixins" data-ks-tooltip-color="green")

lib-docs/jade/docs/3.x/adding-extensions/index.jade

@@ -34,7 +34,7 @@ block documents
       :markdown
         ## Adding submodules
 
-        On the [Kickstart Store](http://kickstart.everything.io), each extension has a submodule creation
+        Each extension has a submodule creation
         command that should look something like the code you see here.
 
         Running this in the terminal will create a folder (in this case "switch") and will download the

lib-docs/jade/docs/3.x/ui/icons-hidden/index.jade

@@ -46,8 +46,7 @@ block documents
 
         Icons come in the fidelities Small, Regular, and Large.
 
-        To use the individual SVG files, download them from the Kickstart Store or via
-        the button above.
+        To use the individual SVG files, download them from the button above.
 
       p
         img.icon(src="/svgs/rg/foo.svg")
@@ -62,7 +61,7 @@ block documents
 
   .document
     article.article
-      :markdown 
+      :markdown
         ### Method 2: Use a "sprite"
 
         Img tags aren't ideal when using multiple icons on a page because it adds to the number
@@ -96,7 +95,7 @@ block documents
       :markdown
         ## Use responsive icons
 
-        Responsive icons vary in level of fidelity based on the width of the screen. There are several 
+        Responsive icons vary in level of fidelity based on the width of the screen. There are several
         ways to load these. All of which work with IE, Chrome, Firefox, and Safari and preserve cacheability.
 
   .document
@@ -140,7 +139,7 @@ block documents
 
   .document
     article.article
-      :markdown 
+      :markdown
         #### Method 2: Use a "sprite"
 
         This method is identical to what we did with the single fidelity icon above, however

lib-docs/jade/docs/4.x/advanced/adding-extensions/index.jade

@@ -37,7 +37,7 @@ block documents
       :markdown
         ## Adding submodules
 
-        On the [Kickstart Store](http://kickstart.everything.io), each extension has a submodule creation
+        Each extension has a submodule creation
         command that should look something like the code you see here.
 
         Running this in the terminal will create a folder (in this case "switch") and will download the

lib-docs/jade/docs/4.x/index.jade

@@ -1,20 +1,25 @@
 extends _layout
 
 block hero-title
-  h1 Quickstart
+  h1 1. Quickstart
 
 block variables
   - var showFooter = false
-  - var title = 'Quickstart'
+  - var title = '1. Quickstart'
 
 block subMenuVars
   - var subMenuItem = "getstarted"
 
 block documents
-  include ../3.x/_includes/quickstart/_quickstart_header.jade
+  .document
+    article.article.article-full
+      :markdown
+        # 1. Quickstart
+
+        Installation instructions are available for [Simple HTML](#barebones), [Rails](#rails), and [Gulp](#gulp).
   .document
     article.article
-      h1 Barebones
+      h1 1A. Barebones
       h2 Head code
 
       :markdown
@@ -106,7 +111,7 @@ block documents
 
   .document
     article.article
-      h1 Rails
+      h1 1B. Rails
 
       :markdown
         Install the [Kickstart gem](https://rubygems.org/gems/kickstart_rails)
@@ -200,7 +205,7 @@ block documents
 
   .document
     article.article
-      h1 Gulp
+      h1 1C. Gulp
 
       :markdown
         My tool of choice for building all of Kickstart is gulp, plus a ton of
@@ -221,57 +226,11 @@ block documents
       :markdown
         <span>
 
-            $(~) git clone [email protected]:adamjgrant/kickstart.git mywebsite --depth 1
+            $(~) git clone [email protected]:adamjgrant/kickstart.git mywebsite
 
             # Install the dependencies
             $(~) cd mywebsite
             $(mywebsite) make setup
 
             # If all goes well, this should launch your project.
             $(mywebsite) gulp
-
-
-  include ../3.x/_includes/quickstart/_jekyll.jade
-
-  .document
-    article.article
-      h1 Node.js
-
-      :markdown
-        Kickstart can easily be added as an npm package.
-        This will download the entire repo to a `node_modules` folder.
-
-    article.code
-      :markdown
-        <span>
-
-            npm install --save-dev kickstart-node
-
-  .document
-    article.article
-      :markdown
-        In your sass or scss file, import Kickstart via the theme you prefer:
-
-        Notice you may need a couple `../`s before `node_modules` to point
-        to the node_modules directory. This all depends on how you organized your
-        project.
-
-        In the example, node_modules is at the same level as the scss/sass
-        file.
-
-    article.code
-      :markdown
-        <span>
-
-            @import node_modules/kickstart-node/lib/sass/themes/default/theme
-
-  .document
-    article.article.article-full
-      :markdown
-        ## Autoprefixer
-
-        The chances are very good that you'll need to include [autoprefixer](https://github.com/postcss/autoprefixer).
-        This will add prefixes like `-webkit-` to bleeding edge css properties. Make sure
-        this is included as part of your CSS compilation workflow.
-
-        [Also available for Gulp](https://www.npmjs.org/package/gulp-autoprefixer)

lib-docs/jade/docs/4.x/tutorial/layout/index.jade

@@ -0,0 +1,169 @@
+extends ../../_layout
+
+block hero-title
+  h1 2. Layout
+
+block variables
+  - var showFooter = false
+  - var title = '2. Layout'
+
+block subMenuVars
+  - var subMenuItem = "getstarted"
+
+block documents
+  .document
+    article.article.article-full
+      :markdown
+        # 2. Laying out the page
+
+        Now that you have some basic HTML properties in place, let's get the
+        content "wrapped" up.
+
+        Kickstart includes some simple and effective defaults for keeping proper
+        spacing and expansion on the body of the page. These work seamlessly with
+        grid tools as well.
+
+  .document
+    article.article
+      h1 Wrapper
+
+    article.code
+      :markdown
+        <span>
+
+            <div class="wrapper">
+              <h1>My page</h1>
+              <p>Welcome to my page</p>
+            </div>
+
+            .wrapper {
+              @include wrapper();
+            }
+  .document
+    article.article.article-full
+      :markdown
+        # Wrapper styles
+
+        Before you start adding components to your page, it's best to decide if
+        you want a fixed, fluid, or fixed-fluid layout.
+
+        ## Fixed layout
+
+        A fixed layout simply limits the width of the layout to a certain amount.
+
+      iframe.animation(scrolling="no" src="/iframes/layout-fixed/fixed.html")
+
+  .document
+    article.article
+      .if-semantic
+        :markdown
+          For a fixed wrapper, create a fluid wrapper around your content with `$fluid; true`.
+            Now you just need to limit that fluidity with a max-width property.
+
+      .ifnot-semantic
+        :markdown
+          For a fixed wrapper, use the `.wrapper.wrapper-fixed` classes.
+      :markdown
+        The default max-width is about 768px, however, you can define your own by adding
+        a `max-width` property.
+
+    article.code
+      .if-semantic
+        :markdown
+          <span>
+
+              <div class="wrapper">
+                <h1>Hello world</h1>
+              </div>
+
+              .wrapper{
+                @include wrapper($fluid: true);
+                max-width: 700px;
+              }
+
+      .ifnot-semantic
+        :markdown
+          <span>
+
+              <div class="wrapper wrapper-fixed">
+                <h1>Hello world</h1>
+              </div>
+
+              .wrapper.wrapper-fixed {
+                max-width: 700px; // if 768px is not sufficient
+              }
+
+  .document
+    article.article
+      :markdown
+        ## Fluid layout
+
+        A fluid layout allows the width of the content to match the width of the viewport
+
+      iframe.animation(scrolling="no" src="/iframes/layout-fluid/fluid.html")
+
+      :markdown
+        For a fluid wrapper <span class="if-semantic"> use the mixin
+        <code>wrapper($fluid: true)</code></span>
+
+        To have elements break out of a wrapper (called "bleeding"), just
+        end the wrapper before the bleed content and open it back up afterwards.
+
+    article.code
+      .if-semantic
+        :markdown
+          <span>
+
+              .wrapper {
+                @include wrapper($fluid: true);
+              }
+
+      .ifnot-semantic
+        :markdown
+          <span>
+
+              <div class="wrapper wrapper-fluid">
+                ...
+              </div>
+
+  .document
+    article.article.article-full
+      :markdown
+        ## Fluid-fixed layout
+
+        This layout is the default behavior for a wrapper in Kickstart and
+        combines the best of both worlds.
+
+        Instead of constantly resizing to the size of the viewport, a new fixed
+        width is used at each breakpoint.
+
+      iframe.animation(scrolling="no" src="/iframes/layout-fluid-fixed/fluid-fixed.html")
+
+  .document
+    article.article
+      :markdown
+        Create a wrapper around your content <span class="if-semantic">and use the mixin
+        <code>wrapper()</code></span><span class="ifnot-semantic">and
+        use the <code>.wrapper</code> class.
+
+    article.code
+      .if-semantic
+        :markdown
+          <span>
+
+              <div class="wrapper">
+                <h1>Hello world</h1>
+              </div>
+
+              .wrapper{
+                @include wrapper();
+              }
+
+      .ifnot-semantic
+        :markdown
+          <span>
+
+              <div class="wrapper">
+                <h1>Hello world</h1>
+              </div>
+