From 8e46dea6618e69ba67604879db958558c37466bf Mon Sep 17 00:00:00 2001 From: Adam Grant Date: Fri, 7 Aug 2015 09:39:45 -0700 Subject: [PATCH 1/7] Removing unnecessary duplicate code --- lib-core/sass/core/_direct-apply.sass | 1 - 1 file changed, 1 deletion(-) diff --git a/lib-core/sass/core/_direct-apply.sass b/lib-core/sass/core/_direct-apply.sass index f7d842fe219a..e39b4c8f5d88 100644 --- a/lib-core/sass/core/_direct-apply.sass +++ b/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 From fde04f5131fed7fe8873f0e60887adb12b27d718 Mon Sep 17 00:00:00 2001 From: Adam Grant Date: Tue, 26 Apr 2016 09:26:21 -0700 Subject: [PATCH 2/7] Upgrading gulp-mocha-phantomjs --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6260f81beaa9..3acdf9bcd3b3 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "gulp-jade": "^0.6.1", "gulp-minify-css": "^0.3.8", "gulp-mocha": "^1.0.0", - "gulp-mocha-phantomjs": "^0.8.1", + "gulp-mocha-phantomjs": "^0.10.1", "gulp-mustache": "^0.4.0", "gulp-newer": "^0.3.0", "gulp-notify": "^1.5.0", From d70d0414d66cddd554942f3a600b73c114f32672 Mon Sep 17 00:00:00 2001 From: Adam Grant Date: Tue, 26 Apr 2016 11:39:29 -0700 Subject: [PATCH 3/7] Updating some 4.x docs --- gulp/tasks/docs/jade.js | 2 +- lib-docs/jade/docs/4.x/index.jade | 65 ++----- .../jade/docs/4.x/tutorial/layout/index.jade | 169 ++++++++++++++++++ 3 files changed, 182 insertions(+), 54 deletions(-) create mode 100644 lib-docs/jade/docs/4.x/tutorial/layout/index.jade diff --git a/gulp/tasks/docs/jade.js b/gulp/tasks/docs/jade.js index 3892f797b26f..56d3206d06e3 100644 --- a/gulp/tasks/docs/jade.js +++ b/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, diff --git a/lib-docs/jade/docs/4.x/index.jade b/lib-docs/jade/docs/4.x/index.jade index 431726709ef8..6900c4ce2fea 100644 --- a/lib-docs/jade/docs/4.x/index.jade +++ b/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,7 +226,7 @@ block documents :markdown - $(~) git clone git@github.com:adamjgrant/kickstart.git mywebsite --depth 1 + $(~) git clone git@github.com:adamjgrant/kickstart.git mywebsite # Install the dependencies $(~) cd mywebsite @@ -229,49 +234,3 @@ block documents # 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 - - - 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 - - - @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) diff --git a/lib-docs/jade/docs/4.x/tutorial/layout/index.jade b/lib-docs/jade/docs/4.x/tutorial/layout/index.jade new file mode 100644 index 000000000000..4a30fdbe4154 --- /dev/null +++ b/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 + + +
+

My page

+

Welcome to my page

+
+ + .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 + + +
+

Hello world

+
+ + .wrapper{ + @include wrapper($fluid: true); + max-width: 700px; + } + + .ifnot-semantic + :markdown + + +
+

Hello world

+
+ + .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 use the mixin + wrapper($fluid: true) + + 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 + + + .wrapper { + @include wrapper($fluid: true); + } + + .ifnot-semantic + :markdown + + +
+ ... +
+ + .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 and use the mixin + wrapper()and + use the .wrapper class. + + article.code + .if-semantic + :markdown + + +
+

Hello world

+
+ + .wrapper{ + @include wrapper(); + } + + .ifnot-semantic + :markdown + + +
+

Hello world

+
+ From 50ab406d6072c4f2a48a79eb770aa35e7e3928d4 Mon Sep 17 00:00:00 2001 From: Adam Kochanowicz Date: Fri, 20 May 2016 12:54:57 -0700 Subject: [PATCH 4/7] Keeping the lights on --- lib-docs/jade/docs/3.x/_layout.jade | 7 +++++-- lib-docs/sass/docs.sass | 18 ++++++++++++++++++ lib-docs/sass/pages/docs/index.sass | 26 +++++++++++++------------- 3 files changed, 36 insertions(+), 15 deletions(-) diff --git a/lib-docs/jade/docs/3.x/_layout.jade b/lib-docs/jade/docs/3.x/_layout.jade index d08e5d671741..0055555d802d 100644 --- a/lib-docs/jade/docs/3.x/_layout.jade +++ b/lib-docs/jade/docs/3.x/_layout.jade @@ -1,7 +1,7 @@ extends ../../3.x-layouts/_layout block menuVars - - var menuItem = "docs" + - var menuItem = "docs" block page-stylesheet block ui-stylesheet @@ -9,7 +9,7 @@ block page-stylesheet 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} + + + form.switches .form_group .switch(data-ks-tooltip="Turn on if you're using the Sass mixins" data-ks-tooltip-color="green") diff --git a/lib-docs/sass/docs.sass b/lib-docs/sass/docs.sass index 2819aa3304f3..ae7e18b33bad 100644 --- a/lib-docs/sass/docs.sass +++ b/lib-docs/sass/docs.sass @@ -141,3 +141,21 @@ svg.icon .switch +switch + +.adsbygoogle + + @media screen and (max-width: #{$phablet + 1}) + margin: 0px auto !important + display: block !important + + @media screen and (min-width: #{$phablet}) and (max-width: #{$tablet+1}) + margin-left: -25px !important + + @media screen and (min-width: #{$tablet}) and (max-width: #{$desktop+1}) + display: none !important + + @media screen and (min-width: #{$desktop}) + margin-left: -10px !important + + iframe + padding: 0 diff --git a/lib-docs/sass/pages/docs/index.sass b/lib-docs/sass/pages/docs/index.sass index 364e3df9de5d..5e155e33dc82 100644 --- a/lib-docs/sass/pages/docs/index.sass +++ b/lib-docs/sass/pages/docs/index.sass @@ -11,7 +11,7 @@ h2 +heading-xs h3, h4, h5, h6 - +heading-xxs + +heading-xxs .alert +alert @@ -62,9 +62,9 @@ h3, h4, h5, h6 @media screen and (min-width: $tablet) width: 75% - - @media screen and (min-width: $large-monitor) - width: 80% + // + // @media screen and (min-width: $large-monitor) + // width: 80% .fixed-toc width: 100% @@ -105,7 +105,7 @@ h3, h4, h5, h6 bottom: 0 > li - margin-bottom: 0 + margin-bottom: 0 a font-weight: bold @@ -167,7 +167,7 @@ h3, h4, h5, h6 margin-bottom: 0 h1 - +heading-xs + +heading-xs @media screen and(min-width: $phablet) padding: $space @@ -176,12 +176,12 @@ h3, h4, h5, h6 @media screen and (min-width: $tablet) width: 25% - @media screen and (min-width: $large-monitor) - width: 20% + // @media screen and (min-width: $large-monitor) + // width: 20% // When in fixed position body.fixed-nav & - .fixed-toc + .fixed-toc @media screen and (min-width: $phablet) position: fixed top: 0px @@ -194,7 +194,7 @@ h3, h4, h5, h6 right: 75% @media screen and (min-width: $large-monitor) - right: 80% + right: 80% @media screen and (min-width: $xl-monitor) left: calc(50vw - #{$xl-monitor/2}) @@ -212,8 +212,8 @@ h3, h4, h5, h6 @media screen and (min-width: $tablet) margin-left: 25% - @media screen and (min-width: $large-monitor) - margin-left: 20% + // @media screen and (min-width: $large-monitor) + // margin-left: 20% .document margin-bottom: $space * 4 @@ -340,7 +340,7 @@ body.show-semantic span.if-semantic display: inline - + body.show-jquery .ifnot-jquery display: none From 54fb0b08dd509e4e546cc802a6191b175260419d Mon Sep 17 00:00:00 2001 From: Adam Kochanowicz Date: Tue, 24 May 2016 14:05:09 -0700 Subject: [PATCH 5/7] Removing ref to kickstart store --- lib-docs/jade/index.jade | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/lib-docs/jade/index.jade b/lib-docs/jade/index.jade index ef1a071170e4..37227316b167 100644 --- a/lib-docs/jade/index.jade +++ b/lib-docs/jade/index.jade @@ -615,9 +615,7 @@ block content h1 Loves to be extended p - | The library is just the core. Kickstart is designed to be extended and themed via the  - a(href="http://kickstart.everything.io") Kickstart Store - | . + | The library is just the core. Kickstart is designed to be extended and themed. article.home-wrapper section.use-in-any-project From fb6db5026ef0c6f1789b2b40e8f7ded0f7b89469 Mon Sep 17 00:00:00 2001 From: Adam Kochanowicz Date: Tue, 24 May 2016 14:07:16 -0700 Subject: [PATCH 6/7] Removing remaining refs to kickstart store --- lib-docs/jade/about/index.jade | 3 --- lib-docs/jade/docs/3.x/adding-extensions/index.jade | 2 +- lib-docs/jade/docs/3.x/ui/icons-hidden/index.jade | 9 ++++----- .../jade/docs/4.x/advanced/adding-extensions/index.jade | 2 +- .../jade/docs/4.x/ui/components/icons-hidden/index.jade | 3 +-- lib-docs/jade/index.jade | 2 +- 6 files changed, 8 insertions(+), 13 deletions(-) diff --git a/lib-docs/jade/about/index.jade b/lib-docs/jade/about/index.jade index f47c7f76fa0f..729a6610dc6b 100644 --- a/lib-docs/jade/about/index.jade +++ b/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` diff --git a/lib-docs/jade/docs/3.x/adding-extensions/index.jade b/lib-docs/jade/docs/3.x/adding-extensions/index.jade index 49bfa3a60055..e86f2235e461 100644 --- a/lib-docs/jade/docs/3.x/adding-extensions/index.jade +++ b/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 diff --git a/lib-docs/jade/docs/3.x/ui/icons-hidden/index.jade b/lib-docs/jade/docs/3.x/ui/icons-hidden/index.jade index 5aad8c7c97a0..ed0d6c8e6777 100644 --- a/lib-docs/jade/docs/3.x/ui/icons-hidden/index.jade +++ b/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 diff --git a/lib-docs/jade/docs/4.x/advanced/adding-extensions/index.jade b/lib-docs/jade/docs/4.x/advanced/adding-extensions/index.jade index 40f384291674..692f315dd8e3 100644 --- a/lib-docs/jade/docs/4.x/advanced/adding-extensions/index.jade +++ b/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 diff --git a/lib-docs/jade/docs/4.x/ui/components/icons-hidden/index.jade b/lib-docs/jade/docs/4.x/ui/components/icons-hidden/index.jade index d559858c721e..bd48ab8a6533 100644 --- a/lib-docs/jade/docs/4.x/ui/components/icons-hidden/index.jade +++ b/lib-docs/jade/docs/4.x/ui/components/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 via the button above. p img.icon(src="/svgs/rg/foo.svg") diff --git a/lib-docs/jade/index.jade b/lib-docs/jade/index.jade index 37227316b167..ab41ba835a42 100644 --- a/lib-docs/jade/index.jade +++ b/lib-docs/jade/index.jade @@ -402,7 +402,7 @@ block content p 1 passing (9ms) div(data-component="step") - h2 Kickstart has a lot of components, but it's also extendible. So we can add third party UIs from the community in the Kickstart Store. + h2 Kickstart has a lot of components, but it's also extendible. .code h3 Terminal From 4edaf2efb940dfc36d1b1b3560c569cfc95503a8 Mon Sep 17 00:00:00 2001 From: Sean McMurray Date: Fri, 1 Jul 2016 13:10:15 -0700 Subject: [PATCH 7/7] Use querySelector instead of querySelectorAll to dropout after finding even one ul. More specific selector so that the ul element must be a direct child of the button. --- lib-core/coffee/buttons.coffee | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/lib-core/coffee/buttons.coffee b/lib-core/coffee/buttons.coffee index 12a33e0fd1ea..0cc32629bce6 100644 --- a/lib-core/coffee/buttons.coffee +++ b/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