├── .bowercc
├── .editorconfig
├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── bower.json
├── css
    ├── barekit.css
    ├── barekit.css.map
    ├── barekit.scss
    ├── barekit.styl
    ├── sass
    │   ├── global
    │   │   ├── _functions.scss
    │   │   ├── _mixins.scss
    │   │   ├── _utility.scss
    │   │   └── _variables.scss
    │   ├── lib
    │   │   └── _normalize.scss
    │   └── module
    │   │   ├── _accordion.scss
    │   │   ├── _dropdown-nav.scss
    │   │   ├── _form.scss
    │   │   ├── _grid-extends.scss
    │   │   ├── _grid.scss
    │   │   ├── _modal.scss
    │   │   ├── _off-canvas.scss
    │   │   ├── _tabs.scss
    │   │   └── _toggle.scss
    └── stylus
    │   ├── global
    │       ├── _functions.styl
    │       ├── _mixins.styl
    │       ├── _utility.styl
    │       └── _variables.styl
    │   ├── lib
    │       └── _normalize.styl
    │   └── module
    │       ├── _accordion.styl
    │       ├── _dropdown-nav.styl
    │       ├── _form.styl
    │       ├── _grid-extends.styl
    │       ├── _grid.styl
    │       ├── _modal.styl
    │       ├── _off-canvas.styl
    │       ├── _tabs.styl
    │       └── _toggle.styl
├── example.html
├── gruntfile.js
├── gulpfile.js
├── js
    ├── barekit.js
    └── barekit.min.js
├── package.json
├── spec
    ├── index.html
    └── tests.js
└── src
    ├── modules
        ├── accordion.js
        ├── core.js
        ├── dropdown-nav.js
        ├── modal.js
        ├── off-canvas.js
        ├── tabs.js
        └── toggle.js
    ├── prefix.js
    └── suffix.js


/.bowercc:
--------------------------------------------------------------------------------
1 | {
2 | 	"directory": "bower_components"
3 | }


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | 
 3 | root = true
 4 | 
 5 | [*]
 6 | indent_style = space
 7 | indent_size = 4
 8 | end_of_line = lf
 9 | charset = utf-8
10 | trim_trailing_whitespace = true
11 | insert_final_newline = true


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | node_modules
3 | .sass-cache
4 | .DS_Store
5 | .idea


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | <a name="0.7.0"></a>
  2 | ## v0.7.0
  3 | 
  4 | #### Bug Fixes
  5 | 
  6 | * Added back in defaults to breakpoints to allow the overriding of them in a settings file ([906089e3](https://github.com/trevanhetzel/barekit/commit/906089e39a70d08081d36839bfdea385fe31c174))
  7 | * Added direct child selector to improve nesting in tabs ([71981377](https://github.com/trevanhetzel/barekit/commit/71981377c019288e92b41c0a5dd0785eabd199ef))
  8 | * Prevent default for non-absolute links in accordion ([b5417a2c](https://github.com/trevanhetzel/barekit/commit/b5417a2cfe0356324ea0180c54d0bcb402722e70))
  9 | * Added direct child trigger selector to trigger only true accordion "triggers" ([1b3a2dde](https://github.com/trevanhetzel/barekit/commit/1b3a2dde2fc2b7381838b9d35f6f8e7a80c4a8d3))
 10 | 
 11 | #### Features
 12 | 
 13 | * Added Docco task ([eb883e59](https://github.com/trevanhetzel/barekit/commit/eb883e59a52bc7559a6f93ac038177690befd2a2))
 14 | 
 15 | #### Breaking Changes
 16 | 
 17 | * A new default class of `df-` has been added to the grid. The `sm-` classes have been moved inside a media query, so using `sm-` as your default class will no longer kick in until the viewport has reached the value of the `$small` breakpoint. ([a2d2116b](https://github.com/trevanhetzel/barekit/commit/a2d2116b59fc1454b3feb9c050f818af29a5ed81))
 18 | 
 19 | <a name="0.6.2"></a>
 20 | ## v0.6.2
 21 | 
 22 | #### Bug Fixes
 23 | 
 24 | * Fix modal background issue ([0e3d60b1](https://github.com/trevanhetzel/barekit/commit/0e3d60b1085a237d2fc57ad4c06007a8d78e87e6))
 25 | * Change the default dropdown behavior to trigger on hover instead of click ([ed2e206a](https://github.com/trevanhetzel/barekit/commit/ed2e206aaca6c95816e799e67ab455ff5e71b7eb))
 26 | 
 27 | #### Features
 28 | 
 29 | * Added QUnit (no tests have been written yet) ([c977f7d6](https://github.com/trevanhetzel/barekit/commit/c977f7d6116ae0e4b1ca0f7705200e492170b4ec))
 30 | 
 31 | #### Breaking Changes
 32 | 
 33 | * JavaScript has been re-organized. Compiled JS is still in the `js` folder (along with a new unminified version), but source JS has moved to a `src` folder ([c977f7d6](https://github.com/trevanhetzel/barekit/commit/c977f7d6116ae0e4b1ca0f7705200e492170b4ec))
 34 | 
 35 | <a name="0.6.1"></a>
 36 | ## v0.6.1
 37 | 
 38 | #### Bug Fixes
 39 | 
 40 | * Fix to allow `.off-canvas-trigger-` child elements to trigger the off-canvas module.
 41 | 
 42 | <a name="0.6.0"></a>
 43 | ## v0.6.0
 44 | 
 45 | #### Bug Fixes
 46 | 
 47 | * Tidied up checkboxes and radios to be formatted/positioned correctly by default ([d2aa4a34](https://github.com/trevanhetzel/barekit/commit/d2aa4a3472bd959b2d6fb211a05038dca2df31da))
 48 | * Fixed z-index issue with modals ([62fddc1f](https://github.com/trevanhetzel/barekit/commit/62fddc1f5c6d9318cb69b167e5c89166843e3665))
 49 | * Allow multiple modals on the same page ([607af9cd](https://github.com/trevanhetzel/barekit/commit/607af9cd49da3c1f3e1e774f12550c16d4f1ed24))
 50 | 
 51 | 
 52 | #### Features
 53 | 
 54 | * Support for two off-canvas elements ([52a76560](https://github.com/trevanhetzel/barekit/commit/52a7656034e6d26328597ae77ac5831e3417e7cf))
 55 | * Added ability to input custom value to breakpoint mixin ([2372edc0](https://github.com/trevanhetzel/barekit/commit/2372edc07b9082bf7ef6c2a90f93e19ade26855f))
 56 | * Added `.editorconfig` file. ([26175e87](https://github.com/trevanhetzel/barekit/commit/26175e87d9ad1b2df8dbecdeb4e418fe27d4f73e))
 57 | * Toggle "triggers" now get an active class (`toggle-trigger-shown`) added when toggled.
 58 | * Can now specify that a toggled element be hidden when clicking anywhere else on the page (new data attr: `closeOnClick`) ([56a12737](https://github.com/trevanhetzel/barekit/commit/56a127377bb08d2b83707b72e02ee2e63e446cb0))
 59 | 
 60 | 
 61 | #### Breaking Changes
 62 | 
 63 | * **Grid class names have changed** ([6b3b0dba](https://github.com/trevanhetzel/barekit/commit/6b3b0dbafdeea83c5a6707d068273b5a6a799184))
 64 | 
 65 | Previously, BareKit was using some very generic selectors to select all elements that start with `sm`, `md` and `lg` and give them some box model properties (`float` and `padding`). This caused some trouble, so I decided to separate out those box model properties to their own new class: `has-gutter`. This way, you can still use classes like `sm-6` for widths, but aren't tied down to the padding and float if you don't want to be.
 66 | 
 67 | So if you want to still use the "grid" (not just the width classes), a line that previously looked like this:
 68 | 
 69 | ```
 70 | <div class="sm-12 md-6 lg-1" style="background: #e1e1e1">1</div>
 71 | ```
 72 | 
 73 | will now need to look like this:
 74 | 
 75 | ```
 76 | <div class="sm-12 md-6 lg-1 has-gutter" style="background: #e1e1e1">1</div>
 77 | ```
 78 | 
 79 | * **Off-canvas class names have changed** ([52a76560](https://github.com/trevanhetzel/barekit/commit/52a7656034e6d26328597ae77ac5831e3417e7cf))
 80 | 
 81 | In order to support two off-canvas elements instead of one, the class names needed to set up off-canvas have changed. 
 82 | 
 83 | This:
 84 | 
 85 | ```
 86 | <div class="off-canvas-contain right-align">
 87 |     <section class="off-canvas">
 88 |         I am content off-canvas.
 89 |     </section>
 90 | 
 91 |     <section class="off-canvas-content">
 92 |         <a href="#" class="off-canvas-trigger">Trigger</a>
 93 |         <p>I am the main content of the page that gets pushed over when the off-canvas is open. I also contain the off-canvas trigger.</p>
 94 |     </section>
 95 | </div>
 96 | ```
 97 | 
 98 | Now needs to look like this:
 99 | 
100 | ```
101 | <div class="off-canvas-contain">
102 |     <section class="off-canvas-left">
103 |         I am content off-canvas.
104 |     </section>
105 | 
106 |     <section class="off-canvas-right">
107 |         I am content off-canvas.
108 |     </section>
109 | 
110 |     <section class="off-canvas-content">
111 |         <a href="#" class="off-canvas-trigger-left">Left trigger</a>
112 |         <a href="#" class="off-canvas-trigger-right">Right trigger</a>
113 |         <p>I am the main content of the page that gets pushed over when the off-canvas is open. I also contain the off-canvas trigger.</p>
114 |     </section>
115 | </div>
116 | ```
117 | 
118 | `right-align` and `left-align` classes have been removed from the `.off-canvas-contain` element and `-right`/`-left` have been appended to the `.off-canvas` and `.off-canvas-trigger` elements.
119 | 
120 | <a name="0.5.0"></a>
121 | ## v0.5.0
122 | 
123 | Initial release


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright 2014 Trevan Hetzel
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining
 4 | a copy of this software and associated documentation files (the
 5 | "Software"), to deal in the Software without restriction, including
 6 | without limitation the rights to use, copy, modify, merge, publish,
 7 | distribute, sublicense, and/or sell copies of the Software, and to
 8 | permit persons to whom the Software is furnished to do so, subject to
 9 | the following conditions:
10 | 
11 | The above copyright notice and this permission notice shall be
12 | included in all copies or substantial portions of the Software.
13 | 
14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | BareKit
 2 | ==========
 3 | 
 4 | ### [Visit website for full usage docs](http://trevanhetzel.github.io/barekit)
 5 | 
 6 | BareKit is a front-end project starter meant to be a starting point and structural guide rather than a full framework. It's bare enough to not interfere with your custom styles or scripts, but yet has enough functioning modules to jumpstart a project in no time.
 7 | 
 8 | _The project creator and lead for BareKit is [Trevan Hetzel](http://appendto.com/team/trevan-hetzel/) ([trevanhetzel](https://github.com/trevanhetzel)) . Use [Github issues](http://github.com/trevanhetzel/barekit) and pull requests or reach out to Trevan directly for support and contributions to BareKit._
 9 | 
10 | # Getting Started
11 | 
12 | The best way to get BareKit up and running on a project is to install via [Bower](http://bower.io/). You shouldn't ever touch the source anyway, so with Bower it's easy to get the latest updates.
13 | 
14 | First, make sure you have Bower installed. Then you can add this line to a `bower.json` file `"barekit": "~0.7.0"` or simply do a `bower install barekit`.
15 | 
16 | 
17 | ### JavaScript
18 | 
19 | Getting up and running with the BareKit JavaScript modules is very simple. You first need to reference the latest jQuery file (also installable via Bower), and then reference the `barekit.min.js` file at the bottom of your HTML page (before the closing body tag).
20 | 
21 | If you installed jQuery and BareKit using Bower, the paths would look something like this:
22 | 
23 | ```
24 | <script src="bower_components/jquery/dist/jquery.min.js">
25 | <script src="bower_components/barekit/js/barekit.min.js">
26 | ```
27 | 
28 | ### CSS
29 | 
30 | The BareKit CSS can be used in a few different ways. The core code comes with both a Sass and Stylus version, so the ideal way is to `@import` the barekit.scss or barekit.styl file from your main Sass or Stylus stylesheet.
31 | 
32 | Again, if you installed via Bower, the `@import` rule would look something like this:
33 | 
34 | ```
35 | // Import BareKit
36 | @import "bower_components/barekit/css/barekit";
37 | ```
38 | 
39 | Using BareKit in this way allows you to compile it using your own preferred pre-processor, task runner, compression style, etc.
40 | 
41 | The other way to use the BareKit CSS is, of course, to just reference it directly in your markup.
42 | 
43 | ```
44 | <link rel="stylesheet" href="bower_components/barekit/css/barekit.css">
45 | ```
46 | 
47 | # Usage
48 | 
49 | For details on using BareKit, visit the website at [trevanhetzel.github.io/barekit](http://trevanhetzel.github.io/barekit)


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "BareKit",
 3 |   "devDependencies": {
 4 |     "jquery": "~2.1.1",
 5 |     "qunit": "~1.15.0"
 6 |   },
 7 |   "version": "0.7.0",
 8 |   "homepage": "https://github.com/trevanhetzel/barekit",
 9 |   "authors": [
10 |     "Trevan Hetzel <trevan@hetzelcreative.com>"
11 |   ],
12 |   "main": [
13 |     "js/barekit.min.js",
14 |     "css/barekit.css"
15 |   ],
16 |   "description": "A bare minimum responsive framework",
17 |   "license": "MIT",
18 |   "ignore": [
19 |     ".sass-cache",
20 |     "node_modules",
21 |     "bower_components",
22 |     ".bowercc",
23 |     ".gitignore",
24 |     "example.html",
25 |     "gruntfile.js",
26 |     "package.json",
27 |     ".bower.json",
28 |     "bower.json",
29 |     ".bowercc",
30 |     "src/modules"
31 |   ]
32 | }
33 | 


--------------------------------------------------------------------------------
/css/barekit.css:
--------------------------------------------------------------------------------
1 | html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}input:focus,textarea:focus,.checkbox input[type="checkbox"]:focus+span:before,.radio input[type="radio"]:focus+span:before{outline:none;box-shadow:0 0 2px 2px #96c0e6}.left{float:left}.right{float:right}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}@media (min-width: 50em){.md-text-left{text-align:left}.md-text-center{text-align:center}.md-text-right{text-align:right}}@media (min-width: 64em){.lg-text-left{text-align:left}.lg-text-center{text-align:center}.lg-text-right{text-align:right}}.no-bullets{list-style:none;margin:0;padding:0}.clearfix:after,.row:after{content:"";display:table;clear:both}.show-md{display:none}@media (min-width: 50em){.show-md{display:block}}.show-lg{display:none}@media (min-width: 64em){.show-lg{display:block}}@media (min-width: 50em){.hide-md{display:none}}@media (min-width: 64em){.hide-lg{display:none}}.show-md-inline{display:none}@media (min-width: 50em){.show-md-inline{display:inline}}.show-lg-inline{display:none}@media (min-width: 64em){.show-lg-inline{display:inline}}/*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;width:100%;height:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}.accordion dd{display:none}.accordion .accordion-panel--open{display:block}.dropdown-nav{list-style:none;margin:0;padding:0}.dropdown-nav li{position:relative;float:left}.dropdown-nav li ul{position:absolute;display:none;left:0;list-style:none;margin:0;padding:0}.dropdown-nav li ul li{float:none}.dropdown-nav li ul li a{display:block}.dropdown-nav li:hover ul{display:block}.dropdown-nav li .dropdown--open{display:block}.dropdown-nav .dropdown-trigger--open:hover ul{display:block}.dropdown-nav .click-setting:hover ul{display:none}.dropdown-nav .click-setting:hover .dropdown--open{display:block}.checkbox,.radio{position:relative;padding-left:1.25em}.checkbox span:before,.radio span:before{content:"";position:absolute;left:0;line-height:1em;width:.813em;height:.813em;border:1px solid black}.checkbox input[type="checkbox"]{opacity:0;position:absolute}.checkbox input[type="checkbox"]:checked+span:before{content:"✓"}.radio input[type="radio"]{opacity:0;position:absolute}.radio input[type="radio"]:checked+span:after{background:black}.radio span:after{content:"";position:absolute;top:.188em;left:.188em;width:.438em;height:.438em;border-radius:50%}.radio span:before{border-radius:50%}.df-1{width:8.33333%}.df-1-half{width:12.5%}.df-offset-1{margin-left:8.33333%}.df-offset-1-half{margin-left:12.5%}.df-2{width:16.66667%}.df-2-half{width:20.83333%}.df-offset-2{margin-left:16.66667%}.df-offset-2-half{margin-left:20.83333%}.df-3{width:25.0%}.df-3-half{width:29.16667%}.df-offset-3{margin-left:25.0%}.df-offset-3-half{margin-left:29.16667%}.df-4{width:33.33333%}.df-4-half{width:37.5%}.df-offset-4{margin-left:33.33333%}.df-offset-4-half{margin-left:37.5%}.df-5{width:41.66667%}.df-5-half{width:45.83333%}.df-offset-5{margin-left:41.66667%}.df-offset-5-half{margin-left:45.83333%}.df-6{width:50.0%}.df-6-half{width:54.16667%}.df-offset-6{margin-left:50.0%}.df-offset-6-half{margin-left:54.16667%}.df-7{width:58.33333%}.df-7-half{width:62.5%}.df-offset-7{margin-left:58.33333%}.df-offset-7-half{margin-left:62.5%}.df-8{width:66.66667%}.df-8-half{width:70.83333%}.df-offset-8{margin-left:66.66667%}.df-offset-8-half{margin-left:70.83333%}.df-9{width:75.0%}.df-9-half{width:79.16667%}.df-offset-9{margin-left:75.0%}.df-offset-9-half{margin-left:79.16667%}.df-10{width:83.33333%}.df-10-half{width:87.5%}.df-offset-10{margin-left:83.33333%}.df-offset-10-half{margin-left:87.5%}.df-11{width:91.66667%}.df-11-half{width:95.83333%}.df-offset-11{margin-left:91.66667%}.df-offset-11-half{margin-left:95.83333%}.df-12{width:100.0%}.df-12-half{width:104.16667%}.df-offset-12{margin-left:100.0%}.df-offset-12-half{margin-left:104.16667%}@media (min-width: 30em){.sm-1{width:8.33333%}.sm-1-half{width:12.5%}.sm-offset-1{margin-left:8.33333%}.sm-offset-1-half{margin-left:12.5%}.sm-2{width:16.66667%}.sm-2-half{width:20.83333%}.sm-offset-2{margin-left:16.66667%}.sm-offset-2-half{margin-left:20.83333%}.sm-3{width:25.0%}.sm-3-half{width:29.16667%}.sm-offset-3{margin-left:25.0%}.sm-offset-3-half{margin-left:29.16667%}.sm-4{width:33.33333%}.sm-4-half{width:37.5%}.sm-offset-4{margin-left:33.33333%}.sm-offset-4-half{margin-left:37.5%}.sm-5{width:41.66667%}.sm-5-half{width:45.83333%}.sm-offset-5{margin-left:41.66667%}.sm-offset-5-half{margin-left:45.83333%}.sm-6{width:50.0%}.sm-6-half{width:54.16667%}.sm-offset-6{margin-left:50.0%}.sm-offset-6-half{margin-left:54.16667%}.sm-7{width:58.33333%}.sm-7-half{width:62.5%}.sm-offset-7{margin-left:58.33333%}.sm-offset-7-half{margin-left:62.5%}.sm-8{width:66.66667%}.sm-8-half{width:70.83333%}.sm-offset-8{margin-left:66.66667%}.sm-offset-8-half{margin-left:70.83333%}.sm-9{width:75.0%}.sm-9-half{width:79.16667%}.sm-offset-9{margin-left:75.0%}.sm-offset-9-half{margin-left:79.16667%}.sm-10{width:83.33333%}.sm-10-half{width:87.5%}.sm-offset-10{margin-left:83.33333%}.sm-offset-10-half{margin-left:87.5%}.sm-11{width:91.66667%}.sm-11-half{width:95.83333%}.sm-offset-11{margin-left:91.66667%}.sm-offset-11-half{margin-left:95.83333%}.sm-12{width:100.0%}.sm-12-half{width:104.16667%}.sm-offset-12{margin-left:100.0%}.sm-offset-12-half{margin-left:104.16667%}}@media (min-width: 50em){.md-1{width:8.33333%}.md-1-half{width:12.5%}.md-offset-1{margin-left:8.33333%}.md-offset-1-half{margin-left:12.5%}.md-2{width:16.66667%}.md-2-half{width:20.83333%}.md-offset-2{margin-left:16.66667%}.md-offset-2-half{margin-left:20.83333%}.md-3{width:25.0%}.md-3-half{width:29.16667%}.md-offset-3{margin-left:25.0%}.md-offset-3-half{margin-left:29.16667%}.md-4{width:33.33333%}.md-4-half{width:37.5%}.md-offset-4{margin-left:33.33333%}.md-offset-4-half{margin-left:37.5%}.md-5{width:41.66667%}.md-5-half{width:45.83333%}.md-offset-5{margin-left:41.66667%}.md-offset-5-half{margin-left:45.83333%}.md-6{width:50.0%}.md-6-half{width:54.16667%}.md-offset-6{margin-left:50.0%}.md-offset-6-half{margin-left:54.16667%}.md-7{width:58.33333%}.md-7-half{width:62.5%}.md-offset-7{margin-left:58.33333%}.md-offset-7-half{margin-left:62.5%}.md-8{width:66.66667%}.md-8-half{width:70.83333%}.md-offset-8{margin-left:66.66667%}.md-offset-8-half{margin-left:70.83333%}.md-9{width:75.0%}.md-9-half{width:79.16667%}.md-offset-9{margin-left:75.0%}.md-offset-9-half{margin-left:79.16667%}.md-10{width:83.33333%}.md-10-half{width:87.5%}.md-offset-10{margin-left:83.33333%}.md-offset-10-half{margin-left:87.5%}.md-11{width:91.66667%}.md-11-half{width:95.83333%}.md-offset-11{margin-left:91.66667%}.md-offset-11-half{margin-left:95.83333%}.md-12{width:100.0%}.md-12-half{width:104.16667%}.md-offset-12{margin-left:100.0%}.md-offset-12-half{margin-left:104.16667%}}@media (min-width: 64em){.lg-1{width:8.33333%}.lg-1-half{width:12.5%}.lg-offset-1{margin-left:8.33333%}.lg-offset-1-half{margin-left:12.5%}.lg-2{width:16.66667%}.lg-2-half{width:20.83333%}.lg-offset-2{margin-left:16.66667%}.lg-offset-2-half{margin-left:20.83333%}.lg-3{width:25.0%}.lg-3-half{width:29.16667%}.lg-offset-3{margin-left:25.0%}.lg-offset-3-half{margin-left:29.16667%}.lg-4{width:33.33333%}.lg-4-half{width:37.5%}.lg-offset-4{margin-left:33.33333%}.lg-offset-4-half{margin-left:37.5%}.lg-5{width:41.66667%}.lg-5-half{width:45.83333%}.lg-offset-5{margin-left:41.66667%}.lg-offset-5-half{margin-left:45.83333%}.lg-6{width:50.0%}.lg-6-half{width:54.16667%}.lg-offset-6{margin-left:50.0%}.lg-offset-6-half{margin-left:54.16667%}.lg-7{width:58.33333%}.lg-7-half{width:62.5%}.lg-offset-7{margin-left:58.33333%}.lg-offset-7-half{margin-left:62.5%}.lg-8{width:66.66667%}.lg-8-half{width:70.83333%}.lg-offset-8{margin-left:66.66667%}.lg-offset-8-half{margin-left:70.83333%}.lg-9{width:75.0%}.lg-9-half{width:79.16667%}.lg-offset-9{margin-left:75.0%}.lg-offset-9-half{margin-left:79.16667%}.lg-10{width:83.33333%}.lg-10-half{width:87.5%}.lg-offset-10{margin-left:83.33333%}.lg-offset-10-half{margin-left:87.5%}.lg-11{width:91.66667%}.lg-11-half{width:95.83333%}.lg-offset-11{margin-left:91.66667%}.lg-offset-11-half{margin-left:95.83333%}.lg-12{width:100.0%}.lg-12-half{width:104.16667%}.lg-offset-12{margin-left:100.0%}.lg-offset-12-half{margin-left:104.16667%}}.sm-half{width:4.16667%}.sm-offset-half{margin-left:4.16667%}@media (min-width: 50em){.md-half{width:4.16667%}.md-offset-0{margin:0}.md-offset-half{margin-left:4.16667%}}@media (min-width: 64em){.lg-half{width:4.16667%}.lg-offset-0{margin-left:0}.lg-offset-half{margin-left:4.16667%}}.has-gutter{float:left;padding:0 10px}.row .row .has-gutter{padding:0}.modal{display:none}.modal-open{display:block;position:fixed;z-index:1;top:50%;right:0;left:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);margin:0 auto;width:100%;background:#fff}@media (min-width: 50em){.modal-open{width:50%}}.modal-bg:after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5}.off-canvas-contain{position:relative}.off-canvas-contain .off-canvas-left{left:-17.5em;transition:left .3s ease}.off-canvas-contain .off-canvas-right{right:-17.5em;transition:right .3s ease}.off-canvas-contain.off-canvas--open-left .off-canvas-left{left:0}.off-canvas-contain.off-canvas--open-left .off-canvas-left ~ .off-canvas-content{left:17.5em;right:auto;cursor:pointer}.off-canvas-contain.off-canvas--open-right .off-canvas-right{right:0}.off-canvas-contain.off-canvas--open-right .off-canvas-right ~ .off-canvas-content{left:-17.5em;right:17.5em;cursor:pointer}.off-canvas-left,.off-canvas-right{position:fixed;top:0;width:17.5em;height:100%;-webkit-transform:translateZ(0);transform:translateZ(0)}.off-canvas-content{position:relative;left:0;right:0;transition:left .3s ease, right .3s ease}.tabs-panels>li{display:none}.tabs-panels .tab-panel--open{display:block}.toggle{display:none}.toggle-shown{display:block}
2 | 
3 | /*# sourceMappingURL=barekit.css.map */


--------------------------------------------------------------------------------
/css/barekit.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["barekit.css","barekit.scss","sass/global/_mixins.scss","sass/global/_utility.scss","sass/lib/_normalize.scss","sass/module/_accordion.scss","sass/module/_dropdown-nav.scss","sass/module/_form.scss","sass/module/_grid.scss","sass/module/_modal.scss","sass/global/_variables.scss","sass/module/_off-canvas.scss","sass/module/_tabs.scss","sass/module/_toggle.scss"],"names":[],"mappings":"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","file":"barekit.css"}


--------------------------------------------------------------------------------
/css/barekit.scss:
--------------------------------------------------------------------------------
 1 | // Base styles
 2 | html {
 3 |   box-sizing: border-box;
 4 | }
 5 | 
 6 | *, *:before, *:after {
 7 |   box-sizing: inherit;
 8 | }
 9 | 
10 | // Global
11 | @import "sass/global/mixins";
12 | @import "sass/global/variables";
13 | @import "sass/global/functions";
14 | @import "sass/global/utility";
15 | 
16 | // Lib
17 | @import "sass/lib/normalize";
18 | 
19 | // Module
20 | @import "sass/module/accordion";
21 | @import "sass/module/dropdown-nav";
22 | @import "sass/module/form";
23 | @import "sass/module/grid";
24 | @import "sass/module/grid-extends";
25 | @import "sass/module/modal";
26 | @import "sass/module/off-canvas";
27 | @import "sass/module/tabs";
28 | @import "sass/module/toggle";


--------------------------------------------------------------------------------
/css/barekit.styl:
--------------------------------------------------------------------------------
 1 | // Base styles
 2 | html {
 3 |   box-sizing: border-box;
 4 | }
 5 | 
 6 | *, *:before, *:after {
 7 |   box-sizing: inherit;
 8 | }
 9 | 
10 | // Global
11 | @import "stylus/global/_mixins";
12 | @import "stylus/global/_variables";
13 | @import "stylus/global/_functions";
14 | @import "stylus/global/_utility";
15 | 
16 | // Lib
17 | @import "stylus/lib/_normalize";
18 | 
19 | // Module
20 | @import "stylus/module/_accordion";
21 | @import "stylus/module/_dropdown-nav";
22 | @import "stylus/module/_form";
23 | @import "stylus/module/_grid";
24 | @import "stylus/module/_grid-extends";
25 | @import "stylus/module/_modal";
26 | @import "stylus/module/_off-canvas";
27 | @import "stylus/module/_tabs";
28 | @import "stylus/module/_toggle";


--------------------------------------------------------------------------------
/css/sass/global/_functions.scss:
--------------------------------------------------------------------------------
1 | // Existing variable check
2 | @function var($name, $default) {
3 | 	@if $name {
4 | 		@return $name;
5 | 	} @else {
6 | 		@return $default;
7 | 	}
8 | }


--------------------------------------------------------------------------------
/css/sass/global/_mixins.scss:
--------------------------------------------------------------------------------
 1 | // Media queries
 2 | @mixin breakpoint($size) {
 3 | 	@if $size == small {
 4 | 		@media (min-width: $small) { @content; }
 5 | 	}
 6 | 	@else if $size == medium {
 7 | 		@media (min-width: $medium) { @content; }
 8 | 	}
 9 | 	@else if $size == large {
10 | 		@media (min-width: $large) { @content; }
11 | 	}
12 | 	@else {
13 | 		@media (min-width: $size) { @content; }
14 | 	}
15 | }
16 | 
17 | // Outline for form :focus states
18 | %outline {
19 | 	outline: none;
20 | 	box-shadow: 0 0 2px 2px #96c0e6;
21 | }


--------------------------------------------------------------------------------
/css/sass/global/_utility.scss:
--------------------------------------------------------------------------------
  1 | .left {
  2 | 	float: left;
  3 | }
  4 | 
  5 | .right {
  6 | 	float: right;
  7 | }
  8 | 
  9 | .text-left {
 10 | 	text-align: left;
 11 | }
 12 | 
 13 | .text-center {
 14 | 	text-align: center;
 15 | }
 16 | 
 17 | .text-right {
 18 | 	text-align: right;
 19 | }
 20 | 
 21 | @include breakpoint(medium) {
 22 | 	.md-text-left {
 23 | 		text-align: left;
 24 | 	}
 25 | 
 26 | 	.md-text-center {
 27 | 		text-align: center;
 28 | 	}
 29 | 
 30 | 	.md-text-right {
 31 | 		text-align: right;
 32 | 	}
 33 | }
 34 | 
 35 | @include breakpoint(large) {
 36 | 	.lg-text-left {
 37 | 		text-align: left;
 38 | 	}
 39 | 
 40 | 	.lg-text-center {
 41 | 		text-align: center;
 42 | 	}
 43 | 
 44 | 	.lg-text-right {
 45 | 		text-align: right;
 46 | 	}
 47 | }
 48 | 
 49 | .no-bullets {
 50 | 	list-style: none;
 51 | 	margin: 0;
 52 | 	padding: 0;
 53 | }
 54 | 
 55 | .clearfix:after {
 56 | 	content: "";
 57 | 	display: table;
 58 | 	clear: both;
 59 | }
 60 | 
 61 | .show-md {
 62 | 	display: none;
 63 | 
 64 | 	@include breakpoint(medium) {
 65 | 		display: block;
 66 | 	}
 67 | }
 68 | 
 69 | .show-lg {
 70 | 	display: none;
 71 | 
 72 | 	@include breakpoint(large) {
 73 | 		display: block;
 74 | 	}
 75 | }
 76 | 
 77 | .hide-md {
 78 | 	@include breakpoint(medium) {
 79 | 		display: none;
 80 | 	}
 81 | }
 82 | 
 83 | .hide-lg {
 84 | 	@include breakpoint(large) {
 85 | 		display: none;
 86 | 	}
 87 | }
 88 | 
 89 | .show-md-inline {
 90 | 	display: none;
 91 | 
 92 | 	@include breakpoint(medium) {
 93 | 		display: inline;
 94 | 	}
 95 | }
 96 | 
 97 | .show-lg-inline {
 98 | 	display: none;
 99 | 
100 | 	@include breakpoint(large) {
101 | 		display: inline;
102 | 	}
103 | }
104 | 


--------------------------------------------------------------------------------
/css/sass/global/_variables.scss:
--------------------------------------------------------------------------------
 1 | /********** Breakpoints **********/
 2 | 
 3 | $small: 30em !default;
 4 | $medium: 50em !default;
 5 | $large: 64em !default;
 6 | 
 7 | /********** Modal **********/
 8 | 
 9 | // Document overlay background color
10 | $modal-overlay: #000;
11 | // Transparency of document overlay background color
12 | $modal-trans: .5;
13 | // Modal background color
14 | $modal-bg: #fff;
15 | 
16 | /********** Grid **********/
17 | 
18 | // Grid widths
19 | $grid-width: 8.3333333%;
20 | 
21 | // Grid gutter
22 | $gutter: null !default;
23 | 
24 | /********** Off-Canvas **********/
25 | 
26 | // Off-Canvas width
27 | $oc-width: null !default;
28 | 


--------------------------------------------------------------------------------
/css/sass/lib/_normalize.scss:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v3.0.1 | MIT License | git.io/normalize */
  2 | 
  3 | /**
  4 |  * 1. Set default font family to sans-serif.
  5 |  * 2. Prevent iOS text size adjust after orientation change, without disabling
  6 |  *    user zoom.
  7 |  */
  8 | 
  9 | html {
 10 |   font-family: sans-serif; /* 1 */
 11 |   -ms-text-size-adjust: 100%; /* 2 */
 12 |   -webkit-text-size-adjust: 100%; /* 2 */
 13 |   width: 100%;
 14 |   height: 100%;
 15 | }
 16 | 
 17 | /**
 18 |  * Remove default margin.
 19 |  */
 20 | 
 21 | body {
 22 |   margin: 0;
 23 | }
 24 | 
 25 | /* HTML5 display definitions
 26 |    ========================================================================== */
 27 | 
 28 | /**
 29 |  * Correct `block` display not defined for any HTML5 element in IE 8/9.
 30 |  * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
 31 |  * Correct `block` display not defined for `main` in IE 11.
 32 |  */
 33 | 
 34 | article,
 35 | aside,
 36 | details,
 37 | figcaption,
 38 | figure,
 39 | footer,
 40 | header,
 41 | hgroup,
 42 | main,
 43 | nav,
 44 | section,
 45 | summary {
 46 |   display: block;
 47 | }
 48 | 
 49 | /**
 50 |  * 1. Correct `inline-block` display not defined in IE 8/9.
 51 |  * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 52 |  */
 53 | 
 54 | audio,
 55 | canvas,
 56 | progress,
 57 | video {
 58 |   display: inline-block; /* 1 */
 59 |   vertical-align: baseline; /* 2 */
 60 | }
 61 | 
 62 | /**
 63 |  * Prevent modern browsers from displaying `audio` without controls.
 64 |  * Remove excess height in iOS 5 devices.
 65 |  */
 66 | 
 67 | audio:not([controls]) {
 68 |   display: none;
 69 |   height: 0;
 70 | }
 71 | 
 72 | /**
 73 |  * Address `[hidden]` styling not present in IE 8/9/10.
 74 |  * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 75 |  */
 76 | 
 77 | [hidden],
 78 | template {
 79 |   display: none;
 80 | }
 81 | 
 82 | /* Links
 83 |    ========================================================================== */
 84 | 
 85 | /**
 86 |  * Remove the gray background color from active links in IE 10.
 87 |  */
 88 | 
 89 | a {
 90 |   background: transparent;
 91 | }
 92 | 
 93 | /**
 94 |  * Improve readability when focused and also mouse hovered in all browsers.
 95 |  */
 96 | 
 97 | a:active,
 98 | a:hover {
 99 |   outline: 0;
100 | }
101 | 
102 | /* Text-level semantics
103 |    ========================================================================== */
104 | 
105 | /**
106 |  * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
107 |  */
108 | 
109 | abbr[title] {
110 |   border-bottom: 1px dotted;
111 | }
112 | 
113 | /**
114 |  * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
115 |  */
116 | 
117 | b,
118 | strong {
119 |   font-weight: bold;
120 | }
121 | 
122 | /**
123 |  * Address styling not present in Safari and Chrome.
124 |  */
125 | 
126 | dfn {
127 |   font-style: italic;
128 | }
129 | 
130 | /**
131 |  * Address variable `h1` font-size and margin within `section` and `article`
132 |  * contexts in Firefox 4+, Safari, and Chrome.
133 |  */
134 | 
135 | h1 {
136 |   font-size: 2em;
137 |   margin: 0.67em 0;
138 | }
139 | 
140 | /**
141 |  * Address styling not present in IE 8/9.
142 |  */
143 | 
144 | mark {
145 |   background: #ff0;
146 |   color: #000;
147 | }
148 | 
149 | /**
150 |  * Address inconsistent and variable font size in all browsers.
151 |  */
152 | 
153 | small {
154 |   font-size: 80%;
155 | }
156 | 
157 | /**
158 |  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
159 |  */
160 | 
161 | sub,
162 | sup {
163 |   font-size: 75%;
164 |   line-height: 0;
165 |   position: relative;
166 |   vertical-align: baseline;
167 | }
168 | 
169 | sup {
170 |   top: -0.5em;
171 | }
172 | 
173 | sub {
174 |   bottom: -0.25em;
175 | }
176 | 
177 | /* Embedded content
178 |    ========================================================================== */
179 | 
180 | /**
181 |  * Remove border when inside `a` element in IE 8/9/10.
182 |  */
183 | 
184 | img {
185 |   border: 0;
186 | }
187 | 
188 | /**
189 |  * Correct overflow not hidden in IE 9/10/11.
190 |  */
191 | 
192 | svg:not(:root) {
193 |   overflow: hidden;
194 | }
195 | 
196 | /* Grouping content
197 |    ========================================================================== */
198 | 
199 | /**
200 |  * Address margin not present in IE 8/9 and Safari.
201 |  */
202 | 
203 | figure {
204 |   margin: 1em 40px;
205 | }
206 | 
207 | /**
208 |  * Address differences between Firefox and other browsers.
209 |  */
210 | 
211 | hr {
212 |   -moz-box-sizing: content-box;
213 |   box-sizing: content-box;
214 |   height: 0;
215 | }
216 | 
217 | /**
218 |  * Contain overflow in all browsers.
219 |  */
220 | 
221 | pre {
222 |   overflow: auto;
223 | }
224 | 
225 | /**
226 |  * Address odd `em`-unit font size rendering in all browsers.
227 |  */
228 | 
229 | code,
230 | kbd,
231 | pre,
232 | samp {
233 |   font-family: monospace, monospace;
234 |   font-size: 1em;
235 | }
236 | 
237 | /* Forms
238 |    ========================================================================== */
239 | 
240 | /**
241 |  * Known limitation: by default, Chrome and Safari on OS X allow very limited
242 |  * styling of `select`, unless a `border` property is set.
243 |  */
244 | 
245 | /**
246 |  * 1. Correct color not being inherited.
247 |  *    Known issue: affects color of disabled elements.
248 |  * 2. Correct font properties not being inherited.
249 |  * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
250 |  */
251 | 
252 | button,
253 | input,
254 | optgroup,
255 | select,
256 | textarea {
257 |   color: inherit; /* 1 */
258 |   font: inherit; /* 2 */
259 |   margin: 0; /* 3 */
260 | }
261 | 
262 | /**
263 |  * Address `overflow` set to `hidden` in IE 8/9/10/11.
264 |  */
265 | 
266 | button {
267 |   overflow: visible;
268 | }
269 | 
270 | /**
271 |  * Address inconsistent `text-transform` inheritance for `button` and `select`.
272 |  * All other form control elements do not inherit `text-transform` values.
273 |  * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
274 |  * Correct `select` style inheritance in Firefox.
275 |  */
276 | 
277 | button,
278 | select {
279 |   text-transform: none;
280 | }
281 | 
282 | /**
283 |  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
284 |  *    and `video` controls.
285 |  * 2. Correct inability to style clickable `input` types in iOS.
286 |  * 3. Improve usability and consistency of cursor style between image-type
287 |  *    `input` and others.
288 |  */
289 | 
290 | button,
291 | html input[type="button"], /* 1 */
292 | input[type="reset"],
293 | input[type="submit"] {
294 |   -webkit-appearance: button; /* 2 */
295 |   cursor: pointer; /* 3 */
296 | }
297 | 
298 | /**
299 |  * Re-set default cursor for disabled elements.
300 |  */
301 | 
302 | button[disabled],
303 | html input[disabled] {
304 |   cursor: default;
305 | }
306 | 
307 | /**
308 |  * Remove inner padding and border in Firefox 4+.
309 |  */
310 | 
311 | button::-moz-focus-inner,
312 | input::-moz-focus-inner {
313 |   border: 0;
314 |   padding: 0;
315 | }
316 | 
317 | /**
318 |  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
319 |  * the UA stylesheet.
320 |  */
321 | 
322 | input {
323 |   line-height: normal;
324 | }
325 | 
326 | /**
327 |  * It's recommended that you don't attempt to style these elements.
328 |  * Firefox's implementation doesn't respect box-sizing, padding, or width.
329 |  *
330 |  * 1. Address box sizing set to `content-box` in IE 8/9/10.
331 |  * 2. Remove excess padding in IE 8/9/10.
332 |  */
333 | 
334 | input[type="checkbox"],
335 | input[type="radio"] {
336 |   box-sizing: border-box; /* 1 */
337 |   padding: 0; /* 2 */
338 | }
339 | 
340 | /**
341 |  * Fix the cursor style for Chrome's increment/decrement buttons. For certain
342 |  * `font-size` values of the `input`, it causes the cursor style of the
343 |  * decrement button to change from `default` to `text`.
344 |  */
345 | 
346 | input[type="number"]::-webkit-inner-spin-button,
347 | input[type="number"]::-webkit-outer-spin-button {
348 |   height: auto;
349 | }
350 | 
351 | /**
352 |  * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
353 |  * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
354 |  *    (include `-moz` to future-proof).
355 |  */
356 | 
357 | input[type="search"] {
358 |   -webkit-appearance: textfield; /* 1 */
359 |   -moz-box-sizing: content-box;
360 |   -webkit-box-sizing: content-box; /* 2 */
361 |   box-sizing: content-box;
362 | }
363 | 
364 | /**
365 |  * Remove inner padding and search cancel button in Safari and Chrome on OS X.
366 |  * Safari (but not Chrome) clips the cancel button when the search input has
367 |  * padding (and `textfield` appearance).
368 |  */
369 | 
370 | input[type="search"]::-webkit-search-cancel-button,
371 | input[type="search"]::-webkit-search-decoration {
372 |   -webkit-appearance: none;
373 | }
374 | 
375 | /**
376 |  * Define consistent border, margin, and padding.
377 |  */
378 | 
379 | fieldset {
380 |   border: 1px solid #c0c0c0;
381 |   margin: 0 2px;
382 |   padding: 0.35em 0.625em 0.75em;
383 | }
384 | 
385 | /**
386 |  * 1. Correct `color` not being inherited in IE 8/9/10/11.
387 |  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
388 |  */
389 | 
390 | legend {
391 |   border: 0; /* 1 */
392 |   padding: 0; /* 2 */
393 | }
394 | 
395 | /**
396 |  * Remove default vertical scrollbar in IE 8/9/10/11.
397 |  */
398 | 
399 | textarea {
400 |   overflow: auto;
401 | }
402 | 
403 | /**
404 |  * Don't inherit the `font-weight` (applied by a rule above).
405 |  * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
406 |  */
407 | 
408 | optgroup {
409 |   font-weight: bold;
410 | }
411 | 
412 | /* Tables
413 |    ========================================================================== */
414 | 
415 | /**
416 |  * Remove most spacing between table cells.
417 |  */
418 | 
419 | table {
420 |   border-collapse: collapse;
421 |   border-spacing: 0;
422 | }
423 | 
424 | td,
425 | th {
426 |   padding: 0;
427 | }


--------------------------------------------------------------------------------
/css/sass/module/_accordion.scss:
--------------------------------------------------------------------------------
1 | .accordion {
2 | 	dd {
3 | 		display: none;
4 | 	}
5 | 
6 | 	.accordion-panel--open {
7 | 		display: block;
8 | 	}
9 | }


--------------------------------------------------------------------------------
/css/sass/module/_dropdown-nav.scss:
--------------------------------------------------------------------------------
 1 | .dropdown-nav {
 2 | 	list-style: none;
 3 | 	margin: 0;
 4 | 	padding: 0;
 5 | 
 6 | 	li {
 7 | 		position: relative;
 8 | 		float: left;
 9 | 
10 | 		ul {
11 | 			position: absolute;
12 | 			display: none;
13 | 			left: 0;
14 | 			list-style: none;
15 | 			margin: 0;
16 | 			padding: 0;
17 | 
18 | 			li {
19 | 				float: none;
20 | 
21 | 				a {
22 | 					display: block;
23 | 				}
24 | 			}
25 | 		}
26 | 
27 | 		&:hover {
28 | 			ul {
29 | 				display: block;
30 | 			}
31 | 		}
32 | 
33 | 		.dropdown--open {
34 | 			display: block;
35 | 		}
36 | 	}
37 | 
38 | 	.dropdown-trigger--open {
39 | 		&:hover {
40 | 			ul {
41 | 				display: block;
42 | 			}
43 | 		}
44 | 	}
45 | 
46 | 	.click-setting:hover {
47 | 		ul {
48 | 			display: none;
49 | 		}
50 | 
51 | 		.dropdown--open {
52 | 			display: block;
53 | 		}
54 | 	}
55 | }
56 | 


--------------------------------------------------------------------------------
/css/sass/module/_form.scss:
--------------------------------------------------------------------------------
 1 | input,
 2 | textarea {
 3 | 	/*	Use custom :focus %extend for all form elements
 4 | 		to keep the :focus style the same for custom ones */
 5 | 	&:focus {
 6 | 		@extend %outline;
 7 | 	}
 8 | }
 9 | 
10 | // Custom checkboxes & radios
11 | .checkbox,
12 | .radio {
13 | 	position: relative;
14 | 	padding-left: 1.25em;
15 | 
16 | 	span:before {
17 | 		content: "";
18 | 		position: absolute;
19 | 		left: 0;
20 | 		line-height: 1em;
21 | 		width: .813em;
22 | 		height: .813em;
23 | 		border: 1px solid black;
24 | 	}
25 | }
26 | 
27 | .checkbox {
28 | 	input[type="checkbox"] {
29 | 		opacity: 0;
30 | 		position: absolute;
31 | 
32 | 		&:focus + span:before {
33 | 			@extend %outline;
34 | 		}
35 | 
36 | 		// Checked style addition
37 | 		&:checked + span:before {
38 | 			content: "✓";
39 | 		}
40 | 	}
41 | }
42 | 
43 | .radio {
44 | 	input[type="radio"] {
45 | 		opacity: 0;
46 | 		position: absolute;
47 | 
48 | 		&:focus + span:before {
49 | 			@extend %outline;
50 | 		}
51 | 
52 | 		// Checked style addition
53 | 		&:checked + span:after {
54 | 			background: black;
55 | 		}
56 | 	}
57 | 
58 | 	span:after {
59 | 		content: "";
60 | 		position: absolute;
61 | 		top: .188em;
62 | 		left: .188em;
63 | 		width: .438em;
64 | 		height: .438em;
65 | 		border-radius: 50%;
66 | 	}
67 | 
68 | 	// Base, unchecked style
69 | 	span:before {
70 | 		border-radius: 50%;
71 | 	}
72 | }


--------------------------------------------------------------------------------
/css/sass/module/_grid-extends.scss:
--------------------------------------------------------------------------------
  1 | // Default
  2 | @for $i from 1 through 12 {
  3 | 	// width
  4 | 	%df-#{$i} {
  5 | 		width: $grid-width * $i;
  6 | 	}
  7 | 
  8 | 	%df-#{$i}-half {
  9 | 		width: $grid-width * $i + ($grid-width / 2);
 10 | 	}
 11 | 
 12 | 	// offset
 13 | 	%df-offset-#{$i} {
 14 | 		margin-left: $grid-width * $i;
 15 | 	}
 16 | 
 17 | 	%df-offset-#{$i}-half {
 18 | 		margin-left: $grid-width * $i + ($grid-width / 2);
 19 | 	}
 20 | }
 21 | 
 22 | // Small
 23 | @include breakpoint(small) {
 24 | 	@for $i from 1 through 12 {
 25 | 		// width
 26 | 		%sm-#{$i} {
 27 | 			width: $grid-width * $i;
 28 | 		}
 29 | 
 30 | 		%sm-#{$i}-half {
 31 | 			width: $grid-width * $i + ($grid-width / 2);
 32 | 		}
 33 | 
 34 | 		// offset
 35 | 		%sm-offset-#{$i} {
 36 | 			margin-left: $grid-width * $i;
 37 | 		}
 38 | 
 39 | 		%sm-offset-#{$i}-half {
 40 | 			margin-left: $grid-width * $i + ($grid-width / 2);
 41 | 		}
 42 | 	}
 43 | }
 44 | 
 45 | // Medium
 46 | @include breakpoint(medium) {
 47 | 	@for $i from 1 through 12 {
 48 | 		// width
 49 | 		%md-#{$i} {
 50 | 			width: $grid-width * $i;
 51 | 		}
 52 | 
 53 | 		%md-#{$i}-half {
 54 | 			width: $grid-width * $i + ($grid-width / 2);
 55 | 		}
 56 | 
 57 | 		// offset
 58 | 		%md-offset-#{$i} {
 59 | 			margin-left: $grid-width * $i;
 60 | 		}
 61 | 
 62 | 		%md-offset-#{$i}-half {
 63 | 			margin-left: $grid-width * $i + ($grid-width / 2);
 64 | 		}
 65 | 	}
 66 | }
 67 | 
 68 | // Large
 69 | @include breakpoint(large) {
 70 | 	@for $i from 1 through 12 {
 71 | 		// width
 72 | 		%lg-#{$i} {
 73 | 			width: $grid-width * $i;
 74 | 		}
 75 | 
 76 | 		%lg-#{$i}-half {
 77 | 			width: $grid-width * $i + ($grid-width / 2);
 78 | 		}
 79 | 
 80 | 		// offset
 81 | 		%lg-offset-#{$i} {
 82 | 			margin-left: $grid-width * $i;
 83 | 		}
 84 | 
 85 | 		%lg-offset-#{$i}-half {
 86 | 			margin-left: $grid-width * $i + ($grid-width / 2);
 87 | 		}
 88 | 	}
 89 | }
 90 | 
 91 | // 0 halves
 92 | %sm-half {
 93 | 	width: $grid-width / 2;
 94 | }
 95 | 
 96 | %sm-offset-half {
 97 | 	margin-left: $grid-width / 2;
 98 | }
 99 | 
100 | @include breakpoint(medium) {
101 | 	%md-half {
102 | 		width: $grid-width / 2;
103 | 	}
104 | 
105 | 	%md-offset-0 {
106 | 		margin: 0;
107 | 	}
108 | 
109 | 	%md-offset-half {
110 | 		margin-left: $grid-width / 2;
111 | 	}
112 | }
113 | 
114 | @include breakpoint(large) {
115 | 	%lg-half {
116 | 		width: $grid-width / 2;
117 | 	}
118 | 
119 | 	%lg-offset-0 {
120 | 		margin-left: 0;
121 | 	}
122 | 
123 | 	%lg-offset-half {
124 | 		margin-left: $grid-width / 2;
125 | 	}
126 | }
127 | 
128 | // Box model
129 | %has-gutter {
130 | 	float: left;
131 | 	padding: 0 var($gutter, 20px) / 2;
132 | }
133 | 
134 | %row {
135 | 	@extend .clearfix;
136 | 
137 | 	.row {
138 | 		.has-gutter {
139 | 			padding: 0;
140 | 		}
141 | 	}
142 | }


--------------------------------------------------------------------------------
/css/sass/module/_grid.scss:
--------------------------------------------------------------------------------
  1 | // Default
  2 | @for $i from 1 through 12 {
  3 | 	// width
  4 | 	.df-#{$i} {
  5 | 		width: $grid-width * $i;
  6 | 	}
  7 | 
  8 | 	.df-#{$i}-half {
  9 | 		width: $grid-width * $i + ($grid-width / 2);
 10 | 	}
 11 | 
 12 | 	// offset
 13 | 	.df-offset-#{$i} {
 14 | 		margin-left: $grid-width * $i;
 15 | 	}
 16 | 
 17 | 	.df-offset-#{$i}-half {
 18 | 		margin-left: $grid-width * $i + ($grid-width / 2);
 19 | 	}
 20 | }
 21 | 
 22 | // Small
 23 | @include breakpoint(small) {
 24 | 	@for $i from 1 through 12 {
 25 | 		// width
 26 | 		.sm-#{$i} {
 27 | 			width: $grid-width * $i;
 28 | 		}
 29 | 
 30 | 		.sm-#{$i}-half {
 31 | 			width: $grid-width * $i + ($grid-width / 2);
 32 | 		}
 33 | 
 34 | 		// offset
 35 | 		.sm-offset-#{$i} {
 36 | 			margin-left: $grid-width * $i;
 37 | 		}
 38 | 
 39 | 		.sm-offset-#{$i}-half {
 40 | 			margin-left: $grid-width * $i + ($grid-width / 2);
 41 | 		}
 42 | 	}
 43 | }
 44 | 
 45 | // Medium
 46 | @include breakpoint(medium) {
 47 | 	@for $i from 1 through 12 {
 48 | 		// width
 49 | 		.md-#{$i} {
 50 | 			width: $grid-width * $i;
 51 | 		}
 52 | 
 53 | 		.md-#{$i}-half {
 54 | 			width: $grid-width * $i + ($grid-width / 2);
 55 | 		}
 56 | 
 57 | 		// offset
 58 | 		.md-offset-#{$i} {
 59 | 			margin-left: $grid-width * $i;
 60 | 		}
 61 | 
 62 | 		.md-offset-#{$i}-half {
 63 | 			margin-left: $grid-width * $i + ($grid-width / 2);
 64 | 		}
 65 | 	}
 66 | }
 67 | 
 68 | // Large
 69 | @include breakpoint(large) {
 70 | 	@for $i from 1 through 12 {
 71 | 		// width
 72 | 		.lg-#{$i} {
 73 | 			width: $grid-width * $i;
 74 | 		}
 75 | 
 76 | 		.lg-#{$i}-half {
 77 | 			width: $grid-width * $i + ($grid-width / 2);
 78 | 		}
 79 | 
 80 | 		// offset
 81 | 		.lg-offset-#{$i} {
 82 | 			margin-left: $grid-width * $i;
 83 | 		}
 84 | 
 85 | 		.lg-offset-#{$i}-half {
 86 | 			margin-left: $grid-width * $i + ($grid-width / 2);
 87 | 		}
 88 | 	}
 89 | }
 90 | 
 91 | // 0 halves
 92 | .sm-half {
 93 | 	width: $grid-width / 2;
 94 | }
 95 | 
 96 | .sm-offset-half {
 97 | 	margin-left: $grid-width / 2;
 98 | }
 99 | 
100 | @include breakpoint(medium) {
101 | 	.md-half {
102 | 		width: $grid-width / 2;
103 | 	}
104 | 
105 | 	.md-offset-0 {
106 | 		margin: 0;
107 | 	}
108 | 
109 | 	.md-offset-half {
110 | 		margin-left: $grid-width / 2;
111 | 	}
112 | }
113 | 
114 | @include breakpoint(large) {
115 | 	.lg-half {
116 | 		width: $grid-width / 2;
117 | 	}
118 | 
119 | 	.lg-offset-0 {
120 | 		margin-left: 0;
121 | 	}
122 | 
123 | 	.lg-offset-half {
124 | 		margin-left: $grid-width / 2;
125 | 	}
126 | }
127 | 
128 | // Box model
129 | .has-gutter {
130 | 	float: left;
131 | 	padding: 0 var($gutter, 20px) / 2;
132 | }
133 | 
134 | .row {
135 | 	@extend .clearfix;
136 | 
137 | 	.row {
138 | 		.has-gutter {
139 | 			padding: 0;
140 | 		}
141 | 	}
142 | }


--------------------------------------------------------------------------------
/css/sass/module/_modal.scss:
--------------------------------------------------------------------------------
 1 | .modal {
 2 | 	display: none;
 3 | }
 4 | 
 5 | .modal-open {
 6 | 	display: block;
 7 | 	position: fixed;
 8 | 	z-index: 1;
 9 | 	top: 50%;
10 | 	right: 0;
11 | 	left: 0;
12 | 	transform: translateY(-50%);
13 | 	margin: 0 auto;
14 | 	width: 100%;
15 | 	background: $modal-bg;
16 | 
17 | 	@include breakpoint(medium) {
18 | 		width: 50%;
19 | 	}
20 | }
21 | 
22 | .modal-bg {
23 | 	&:after {
24 | 		content: "";
25 | 		position: fixed;
26 | 		top: 0;
27 | 		left: 0;
28 | 		width: 100%;
29 | 		height: 100%;
30 | 		background: $modal-overlay;
31 | 		opacity: $modal-trans;
32 | 	}
33 | }


--------------------------------------------------------------------------------
/css/sass/module/_off-canvas.scss:
--------------------------------------------------------------------------------
 1 | .off-canvas-contain {
 2 | 	position: relative;
 3 | 
 4 | 	.off-canvas-left {
 5 | 		left: -(var($oc-width, 17.5em));
 6 | 		transition: left .3s ease;
 7 | 	}
 8 | 
 9 | 	.off-canvas-right {
10 | 		right: -(var($oc-width, 17.5em));
11 | 		transition: right .3s ease;
12 | 	}
13 | 
14 | 	&.off-canvas--open-left {
15 | 		.off-canvas-left {
16 | 			left: 0;
17 | 
18 | 			& ~ .off-canvas-content {
19 | 				left: var($oc-width, 17.5em);
20 | 				right: auto;
21 | 				cursor: pointer;
22 | 			}
23 | 		}
24 | 	}
25 | 
26 | 	&.off-canvas--open-right {
27 | 		.off-canvas-right {
28 | 			right: 0;
29 | 
30 | 			& ~ .off-canvas-content {
31 | 				left: -(var($oc-width, 17.5em));
32 | 				right: var($oc-width, 17.5em);
33 | 				cursor: pointer;
34 | 			}
35 | 		}
36 | 	}
37 | }
38 | 
39 | .off-canvas-left,
40 | .off-canvas-right {
41 | 	position: fixed;
42 | 	top: 0;
43 | 	width: var($oc-width, 17.5em);;
44 | 	height: 100%;
45 | 	transform: translateZ(0);
46 | }
47 | 
48 | .off-canvas-content {
49 | 	position: relative;
50 | 	left: 0;
51 | 	right: 0;
52 | 	transition: left .3s ease, right .3s ease;
53 | }


--------------------------------------------------------------------------------
/css/sass/module/_tabs.scss:
--------------------------------------------------------------------------------
1 | .tabs-panels {
2 | 	> li {
3 | 		display: none;
4 | 	}
5 | 
6 | 	.tab-panel--open {
7 | 		display: block;
8 | 	}
9 | }


--------------------------------------------------------------------------------
/css/sass/module/_toggle.scss:
--------------------------------------------------------------------------------
1 | .toggle {
2 | 	display: none;
3 | }
4 | 
5 | .toggle-shown {
6 | 	display: block;
7 | }


--------------------------------------------------------------------------------
/css/stylus/global/_functions.styl:
--------------------------------------------------------------------------------
1 | // Existing variable check
2 | var($name, $default) {
3 | 	if $name {
4 | 		return $name;
5 | 	} else {
6 | 		return $default;
7 | 	}
8 | }


--------------------------------------------------------------------------------
/css/stylus/global/_mixins.styl:
--------------------------------------------------------------------------------
 1 | // Media queries
 2 | breakpoint($size) {
 3 |   if $size == "small" {
 4 |     @media (min-width: $small) {
 5 |       {block}
 6 |     }
 7 |   }
 8 |   if $size == "medium" {
 9 |     @media (min-width: $medium) {
10 |       {block}
11 |     }
12 |   }
13 |   if $size == "large" {
14 |     @media (min-width: $large) {
15 |       {block}
16 |     }
17 |   }
18 |   else {
19 |     @media (min-width: $size) {
20 |       {block}
21 |     }
22 |   }
23 | }
24 | 
25 | // Outline for form focus states
26 | $outline {
27 |   outline: none;
28 |   box-shadow: 0 0 2px 2px #96c0e6;
29 | }


--------------------------------------------------------------------------------
/css/stylus/global/_utility.styl:
--------------------------------------------------------------------------------
  1 | .left {
  2 | 	float: left;
  3 | }
  4 | 
  5 | .right {
  6 | 	float: right;
  7 | }
  8 | 
  9 | .text-left {
 10 | 	text-align: left;
 11 | }
 12 | 
 13 | .text-center {
 14 | 	text-align: center;
 15 | }
 16 | 
 17 | .text-right {
 18 | 	text-align: right;
 19 | }
 20 | 
 21 | +breakpoint(medium) {
 22 | 	.md-text-left {
 23 | 		text-align: left;
 24 | 	}
 25 | 
 26 | 	.md-text-center {
 27 | 		text-align: center;
 28 | 	}
 29 | 
 30 | 	.md-text-right {
 31 | 		text-align: right;
 32 | 	}
 33 | }
 34 | 
 35 | +breakpoint(large) {
 36 | 	.lg-text-left {
 37 | 		text-align: left;
 38 | 	}
 39 | 
 40 | 	.lg-text-center {
 41 | 		text-align: center;
 42 | 	}
 43 | 
 44 | 	.lg-text-right {
 45 | 		text-align: right;
 46 | 	}
 47 | }
 48 | 
 49 | .no-bullets {
 50 | 	list-style: none;
 51 | 	margin: 0;
 52 | 	padding: 0;
 53 | }
 54 | 
 55 | .clearfix {
 56 | 	&:after {
 57 | 		content: "";
 58 | 		display: table;
 59 | 		clear: both;
 60 | 	}
 61 | }
 62 | 
 63 | .show-md {
 64 | 	display: none;
 65 | 
 66 | 	+breakpoint(medium) {
 67 | 		display: block;
 68 | 	}
 69 | }
 70 | 
 71 | .show-lg {
 72 | 	display: none;
 73 | 
 74 | 	+breakpoint(large) {
 75 | 		display: block;
 76 | 	}
 77 | }
 78 | 
 79 | .hide-md {
 80 | 	+breakpoint(medium) {
 81 | 		display: none;
 82 | 	}
 83 | }
 84 | 
 85 | .hide-lg {
 86 | 	+breakpoint(large) {
 87 | 		display: none;
 88 | 	}
 89 | }
 90 | 
 91 | 
 92 | .show-md-inline {
 93 | 	display: none;
 94 | 
 95 | 	+breakpoint(medium) {
 96 | 		display: inline;
 97 | 	}
 98 | }
 99 | 
100 | .show-lg-inline {
101 | 	display: none;
102 | 
103 | 	+breakpoint(large) {
104 | 		display: inline;
105 | 	}
106 | }
107 | 


--------------------------------------------------------------------------------
/css/stylus/global/_variables.styl:
--------------------------------------------------------------------------------
 1 | /********** Breakpoints **********/
 2 | 
 3 | $small = 30em !default;
 4 | $medium = 50em !default;
 5 | $large = 64em !default;
 6 | 
 7 | /********** Modal **********/
 8 | 
 9 | // Document overlay background color
10 | $modal-overlay = #000;
11 | // Transparency of document overlay background color
12 | $modal-trans = .5;
13 | // Modal background color
14 | $modal-bg = #fff;
15 | 
16 | /********** Grid **********/
17 | 
18 | // Grid widths
19 | $grid-width = 8.3333333%;
20 | 
21 | // Grid gutter
22 | $gutter = null !default;
23 | 
24 | /********** Off-Canvas **********/
25 | 
26 | // Off-Canvas width
27 | $oc-width = null !default;
28 | 


--------------------------------------------------------------------------------
/css/stylus/lib/_normalize.styl:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v3.0.1 | MIT License | git.io/normalize */
  2 | 
  3 | /**
  4 |  * 1. Set default font family to sans-serif.
  5 |  * 2. Prevent iOS text size adjust after orientation change, without disabling
  6 |  *    user zoom.
  7 |  */
  8 | 
  9 | html {
 10 |   font-family: sans-serif; /* 1 */
 11 |   -ms-text-size-adjust: 100%; /* 2 */
 12 |   -webkit-text-size-adjust: 100%; /* 2 */
 13 |   width: 100%;
 14 |   height: 100%;
 15 | }
 16 | 
 17 | /**
 18 |  * Remove default margin.
 19 |  */
 20 | 
 21 | body {
 22 |   margin: 0;
 23 | }
 24 | 
 25 | /* HTML5 display definitions
 26 |    ========================================================================== */
 27 | 
 28 | /**
 29 |  * Correct `block` display not defined for any HTML5 element in IE 8/9.
 30 |  * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
 31 |  * Correct `block` display not defined for `main` in IE 11.
 32 |  */
 33 | 
 34 | article,
 35 | aside,
 36 | details,
 37 | figcaption,
 38 | figure,
 39 | footer,
 40 | header,
 41 | hgroup,
 42 | main,
 43 | nav,
 44 | section,
 45 | summary {
 46 |   display: block;
 47 | }
 48 | 
 49 | /**
 50 |  * 1. Correct `inline-block` display not defined in IE 8/9.
 51 |  * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 52 |  */
 53 | 
 54 | audio,
 55 | canvas,
 56 | progress,
 57 | video {
 58 |   display: inline-block; /* 1 */
 59 |   vertical-align: baseline; /* 2 */
 60 | }
 61 | 
 62 | /**
 63 |  * Prevent modern browsers from displaying `audio` without controls.
 64 |  * Remove excess height in iOS 5 devices.
 65 |  */
 66 | 
 67 | audio:not([controls]) {
 68 |   display: none;
 69 |   height: 0;
 70 | }
 71 | 
 72 | /**
 73 |  * Address `[hidden]` styling not present in IE 8/9/10.
 74 |  * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 75 |  */
 76 | 
 77 | [hidden],
 78 | template {
 79 |   display: none;
 80 | }
 81 | 
 82 | /* Links
 83 |    ========================================================================== */
 84 | 
 85 | /**
 86 |  * Remove the gray background color from active links in IE 10.
 87 |  */
 88 | 
 89 | a {
 90 |   background: transparent;
 91 | }
 92 | 
 93 | /**
 94 |  * Improve readability when focused and also mouse hovered in all browsers.
 95 |  */
 96 | 
 97 | a:active,
 98 | a:hover {
 99 |   outline: 0;
100 | }
101 | 
102 | /* Text-level semantics
103 |    ========================================================================== */
104 | 
105 | /**
106 |  * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
107 |  */
108 | 
109 | abbr[title] {
110 |   border-bottom: 1px dotted;
111 | }
112 | 
113 | /**
114 |  * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
115 |  */
116 | 
117 | b,
118 | strong {
119 |   font-weight: bold;
120 | }
121 | 
122 | /**
123 |  * Address styling not present in Safari and Chrome.
124 |  */
125 | 
126 | dfn {
127 |   font-style: italic;
128 | }
129 | 
130 | /**
131 |  * Address variable `h1` font-size and margin within `section` and `article`
132 |  * contexts in Firefox 4+, Safari, and Chrome.
133 |  */
134 | 
135 | h1 {
136 |   font-size: 2em;
137 |   margin: 0.67em 0;
138 | }
139 | 
140 | /**
141 |  * Address styling not present in IE 8/9.
142 |  */
143 | 
144 | mark {
145 |   background: #ff0;
146 |   color: #000;
147 | }
148 | 
149 | /**
150 |  * Address inconsistent and variable font size in all browsers.
151 |  */
152 | 
153 | small {
154 |   font-size: 80%;
155 | }
156 | 
157 | /**
158 |  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
159 |  */
160 | 
161 | sub,
162 | sup {
163 |   font-size: 75%;
164 |   line-height: 0;
165 |   position: relative;
166 |   vertical-align: baseline;
167 | }
168 | 
169 | sup {
170 |   top: -0.5em;
171 | }
172 | 
173 | sub {
174 |   bottom: -0.25em;
175 | }
176 | 
177 | /* Embedded content
178 |    ========================================================================== */
179 | 
180 | /**
181 |  * Remove border when inside `a` element in IE 8/9/10.
182 |  */
183 | 
184 | img {
185 |   border: 0;
186 | }
187 | 
188 | /**
189 |  * Correct overflow not hidden in IE 9/10/11.
190 |  */
191 | 
192 | svg:not(:root) {
193 |   overflow: hidden;
194 | }
195 | 
196 | /* Grouping content
197 |    ========================================================================== */
198 | 
199 | /**
200 |  * Address margin not present in IE 8/9 and Safari.
201 |  */
202 | 
203 | figure {
204 |   margin: 1em 40px;
205 | }
206 | 
207 | /**
208 |  * Address differences between Firefox and other browsers.
209 |  */
210 | 
211 | hr {
212 |   -moz-box-sizing: content-box;
213 |   box-sizing: content-box;
214 |   height: 0;
215 | }
216 | 
217 | /**
218 |  * Contain overflow in all browsers.
219 |  */
220 | 
221 | pre {
222 |   overflow: auto;
223 | }
224 | 
225 | /**
226 |  * Address odd `em`-unit font size rendering in all browsers.
227 |  */
228 | 
229 | code,
230 | kbd,
231 | pre,
232 | samp {
233 |   font-family: monospace, monospace;
234 |   font-size: 1em;
235 | }
236 | 
237 | /* Forms
238 |    ========================================================================== */
239 | 
240 | /**
241 |  * Known limitation: by default, Chrome and Safari on OS X allow very limited
242 |  * styling of `select`, unless a `border` property is set.
243 |  */
244 | 
245 | /**
246 |  * 1. Correct color not being inherited.
247 |  *    Known issue: affects color of disabled elements.
248 |  * 2. Correct font properties not being inherited.
249 |  * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
250 |  */
251 | 
252 | button,
253 | input,
254 | optgroup,
255 | select,
256 | textarea {
257 |   color: inherit; /* 1 */
258 |   font: inherit; /* 2 */
259 |   margin: 0; /* 3 */
260 | }
261 | 
262 | /**
263 |  * Address `overflow` set to `hidden` in IE 8/9/10/11.
264 |  */
265 | 
266 | button {
267 |   overflow: visible;
268 | }
269 | 
270 | /**
271 |  * Address inconsistent `text-transform` inheritance for `button` and `select`.
272 |  * All other form control elements do not inherit `text-transform` values.
273 |  * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
274 |  * Correct `select` style inheritance in Firefox.
275 |  */
276 | 
277 | button,
278 | select {
279 |   text-transform: none;
280 | }
281 | 
282 | /**
283 |  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
284 |  *    and `video` controls.
285 |  * 2. Correct inability to style clickable `input` types in iOS.
286 |  * 3. Improve usability and consistency of cursor style between image-type
287 |  *    `input` and others.
288 |  */
289 | 
290 | button,
291 | html input[type="button"], /* 1 */
292 | input[type="reset"],
293 | input[type="submit"] {
294 |   -webkit-appearance: button; /* 2 */
295 |   cursor: pointer; /* 3 */
296 | }
297 | 
298 | /**
299 |  * Re-set default cursor for disabled elements.
300 |  */
301 | 
302 | button[disabled],
303 | html input[disabled] {
304 |   cursor: default;
305 | }
306 | 
307 | /**
308 |  * Remove inner padding and border in Firefox 4+.
309 |  */
310 | 
311 | button::-moz-focus-inner,
312 | input::-moz-focus-inner {
313 |   border: 0;
314 |   padding: 0;
315 | }
316 | 
317 | /**
318 |  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
319 |  * the UA stylesheet.
320 |  */
321 | 
322 | input {
323 |   line-height: normal;
324 | }
325 | 
326 | /**
327 |  * It's recommended that you don't attempt to style these elements.
328 |  * Firefox's implementation doesn't respect box-sizing, padding, or width.
329 |  *
330 |  * 1. Address box sizing set to `content-box` in IE 8/9/10.
331 |  * 2. Remove excess padding in IE 8/9/10.
332 |  */
333 | 
334 | input[type="checkbox"],
335 | input[type="radio"] {
336 |   box-sizing: border-box; /* 1 */
337 |   padding: 0; /* 2 */
338 | }
339 | 
340 | /**
341 |  * Fix the cursor style for Chrome's increment/decrement buttons. For certain
342 |  * `font-size` values of the `input`, it causes the cursor style of the
343 |  * decrement button to change from `default` to `text`.
344 |  */
345 | 
346 | input[type="number"]::-webkit-inner-spin-button,
347 | input[type="number"]::-webkit-outer-spin-button {
348 |   height: auto;
349 | }
350 | 
351 | /**
352 |  * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
353 |  * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
354 |  *    (include `-moz` to future-proof).
355 |  */
356 | 
357 | input[type="search"] {
358 |   -webkit-appearance: textfield; /* 1 */
359 |   -moz-box-sizing: content-box;
360 |   -webkit-box-sizing: content-box; /* 2 */
361 |   box-sizing: content-box;
362 | }
363 | 
364 | /**
365 |  * Remove inner padding and search cancel button in Safari and Chrome on OS X.
366 |  * Safari (but not Chrome) clips the cancel button when the search input has
367 |  * padding (and `textfield` appearance).
368 |  */
369 | 
370 | input[type="search"]::-webkit-search-cancel-button,
371 | input[type="search"]::-webkit-search-decoration {
372 |   -webkit-appearance: none;
373 | }
374 | 
375 | /**
376 |  * Define consistent border, margin, and padding.
377 |  */
378 | 
379 | fieldset {
380 |   border: 1px solid #c0c0c0;
381 |   margin: 0 2px;
382 |   padding: 0.35em 0.625em 0.75em;
383 | }
384 | 
385 | /**
386 |  * 1. Correct `color` not being inherited in IE 8/9/10/11.
387 |  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
388 |  */
389 | 
390 | legend {
391 |   border: 0; /* 1 */
392 |   padding: 0; /* 2 */
393 | }
394 | 
395 | /**
396 |  * Remove default vertical scrollbar in IE 8/9/10/11.
397 |  */
398 | 
399 | textarea {
400 |   overflow: auto;
401 | }
402 | 
403 | /**
404 |  * Don't inherit the `font-weight` (applied by a rule above).
405 |  * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
406 |  */
407 | 
408 | optgroup {
409 |   font-weight: bold;
410 | }
411 | 
412 | /* Tables
413 |    ========================================================================== */
414 | 
415 | /**
416 |  * Remove most spacing between table cells.
417 |  */
418 | 
419 | table {
420 |   border-collapse: collapse;
421 |   border-spacing: 0;
422 | }
423 | 
424 | td,
425 | th {
426 |   padding: 0;
427 | }


--------------------------------------------------------------------------------
/css/stylus/module/_accordion.styl:
--------------------------------------------------------------------------------
1 | .accordion {
2 | 	dd {
3 | 		display: none;
4 | 	}
5 | 
6 | 	.accordion-panel--open {
7 | 		display: block;
8 | 	}
9 | }


--------------------------------------------------------------------------------
/css/stylus/module/_dropdown-nav.styl:
--------------------------------------------------------------------------------
 1 | .dropdown-nav {
 2 | 	list-style: none;
 3 | 	margin: 0;
 4 | 	padding: 0;
 5 | 
 6 | 	li {
 7 | 		position: relative;
 8 | 		float: left;
 9 | 
10 | 		ul {
11 | 			position: absolute;
12 | 			display: none;
13 | 			left: 0;
14 | 			list-style: none;
15 | 			margin: 0;
16 | 			padding: 0;
17 | 
18 | 			li {
19 | 				float: none;
20 | 			}
21 | 		}
22 | 
23 | 		&:hover {
24 | 			ul {
25 | 				display: block;
26 | 			}
27 | 		}
28 | 
29 | 		.dropdown--open {
30 | 			display: block;
31 | 		}
32 | 	}
33 | 
34 | 	.dropdown-trigger--open {
35 | 		&:hover {
36 | 			ul {
37 | 				display: block;
38 | 			}
39 | 		}
40 | 	}
41 | 
42 | 	.click-setting:hover {
43 | 		ul {
44 | 			display: none;
45 | 		}
46 | 
47 | 		.dropdown--open {
48 | 			display: block;
49 | 		}
50 | 	}
51 | }


--------------------------------------------------------------------------------
/css/stylus/module/_form.styl:
--------------------------------------------------------------------------------
 1 | input,
 2 | textarea {
 3 | 	/*	Use custom :focus %extend for all form elements
 4 | 		to keep the :focus style the same for custom ones */
 5 | 	&:focus {
 6 | 		@extend $outline;
 7 | 	}
 8 | }
 9 | 
10 | // Custom checkboxes & radios
11 | .checkbox,
12 | .radio {
13 | 	position: relative;
14 | 	padding-left: 1.25em;
15 | 
16 | 	span:before {
17 | 		content: "";
18 | 		position: absolute;
19 | 		left: 0;
20 | 		line-height: 1em;
21 | 		width: .813em;
22 | 		height: .813em;
23 | 		border: 1px solid black;
24 | 	}
25 | }
26 | 
27 | .checkbox {
28 | 	input[type="checkbox"] {
29 | 		opacity: 0;
30 | 		position: absolute;
31 | 
32 | 		&:focus + span:before {
33 | 			@extend $outline;
34 | 		}
35 | 
36 | 		// Checked style addition
37 | 		&:checked + span:before {
38 | 			content: "✓";
39 | 		}
40 | 	}
41 | }
42 | 
43 | .radio {
44 | 	input[type="radio"] {
45 | 		opacity: 0;
46 | 		position: absolute;
47 | 
48 | 		&:focus + span:before {
49 | 			@extend $outline;
50 | 		}
51 | 
52 | 		// Checked style addition
53 | 		&:checked + span:after {
54 | 			background: black;
55 | 		}
56 | 	}
57 | 
58 | 	span:after {
59 | 		content: "";
60 | 		position: absolute;
61 | 		top: .188em;
62 | 		left: .188em;
63 | 		width: .438em;
64 | 		height: .438em;
65 | 		border-radius: 50%;
66 | 	}
67 | 
68 | 	// Base, unchecked style
69 | 	span:before {
70 | 		border-radius: 50%;
71 | 	}
72 | }


--------------------------------------------------------------------------------
/css/stylus/module/_grid-extends.styl:
--------------------------------------------------------------------------------
  1 | // Default
  2 | for $i in(1..12) {
  3 | 	// width
  4 | 	$df-{$i} {
  5 | 		width: $grid-width * $i;
  6 | 	}
  7 | 
  8 | 	$df-{$i}-half {
  9 | 		width: $grid-width * $i + ($grid-width / 2);
 10 | 	}
 11 | 
 12 | 	// offset
 13 | 	$df-offset-{$i} {
 14 | 		margin-left: $grid-width * $i;
 15 | 	}
 16 | 
 17 | 	$df-offset-{$i}-half {
 18 | 		margin-left: $grid-width * $i + ($grid-width / 2);
 19 | 	}
 20 | }
 21 | 
 22 | // Small
 23 | +breakpoint(small) {
 24 | 	for $i in(1..12) {
 25 | 		// width
 26 | 		$sm-{$i} {
 27 | 			width: $grid-width * $i;
 28 | 		}
 29 | 
 30 | 		$sm-{$i}-half {
 31 | 			width: $grid-width * $i + ($grid-width / 2);
 32 | 		}
 33 | 
 34 | 		// offset
 35 | 		$sm-offset-{$i} {
 36 | 			margin-left: $grid-width * $i;
 37 | 		}
 38 | 
 39 | 		$sm-offset-{$i}-half {
 40 | 			margin-left: $grid-width * $i + ($grid-width / 2);
 41 | 		}
 42 | 	}
 43 | }
 44 | 
 45 | // Medium
 46 | +breakpoint(medium) {
 47 | 	for $i in(1..12) {
 48 | 		// width
 49 | 		$md-{$i} {
 50 | 			width: $grid-width * $i;
 51 | 		}
 52 | 
 53 | 		$md-{$i}-half {
 54 | 			width: $grid-width * $i + ($grid-width / 2);
 55 | 		}
 56 | 
 57 | 		// offset
 58 | 		$md-offset-{$i} {
 59 | 			margin-left: $grid-width * $i;
 60 | 		}
 61 | 
 62 | 		$md-offset-{$i}-half {
 63 | 			margin-left: $grid-width * $i + ($grid-width / 2);
 64 | 		}
 65 | 	}
 66 | }
 67 | 
 68 | // Large
 69 | +breakpoint(large) {
 70 | 	for $i in(1..12) {
 71 | 		// width
 72 | 		$lg-{$i} {
 73 | 			width: $grid-width * $i;
 74 | 		}
 75 | 
 76 | 		$lg-{$i}-half {
 77 | 			width: $grid-width * $i + ($grid-width / 2);
 78 | 		}
 79 | 
 80 | 		// offset
 81 | 		$lg-offset-{$i} {
 82 | 			margin-left: $grid-width * $i;
 83 | 		}
 84 | 
 85 | 		$lg-offset-{$i}-half {
 86 | 			margin-left: $grid-width * $i + ($grid-width / 2);
 87 | 		}
 88 | 	}
 89 | }
 90 | 
 91 | // 0 halves
 92 | $sm-half {
 93 | 	width: ($grid-width / 2);
 94 | }
 95 | 
 96 | $sm-offset-half {
 97 | 	margin-left: ($grid-width / 2);
 98 | }
 99 | 
100 | +breakpoint(medium) {
101 | 	$md-half {
102 | 		width: ($grid-width / 2);
103 | 	}
104 | 
105 | 	$md-offset-0 {
106 | 		margin: 0;
107 | 	}
108 | 
109 | 	$md-offset-half {
110 | 		margin-left: ($grid-width / 2);
111 | 	}
112 | }
113 | 
114 | +breakpoint(large) {
115 | 	$lg-half {
116 | 		width: ($grid-width / 2);
117 | 	}
118 | 
119 | 	$lg-offset-0 {
120 | 		margin-left: 0;
121 | 	}
122 | 
123 | 	$lg-offset-half {
124 | 		margin-left: ($grid-width / 2);
125 | 	}
126 | }
127 | 
128 | // Box model
129 | $has-gutter {
130 | 	float: left;
131 | 	padding: 0 var($gutter, 20px) / 2;
132 | }
133 | 
134 | $row {
135 | 	@extend .clearfix;
136 | 
137 | 	.row {
138 | 		.has-gutter {
139 | 			padding: 0;
140 | 		}
141 | 	}
142 | }


--------------------------------------------------------------------------------
/css/stylus/module/_grid.styl:
--------------------------------------------------------------------------------
  1 | // Default
  2 | for $i in(1..12) {
  3 | 	// width
  4 | 	.df-{$i} {
  5 | 		width: $grid-width * $i;
  6 | 	}
  7 | 
  8 | 	.df-{$i}-half {
  9 | 		width: $grid-width * $i + ($grid-width / 2);
 10 | 	}
 11 | 
 12 | 	// offset
 13 | 	.df-offset-{$i} {
 14 | 		margin-left: $grid-width * $i;
 15 | 	}
 16 | 
 17 | 	.df-offset-{$i}-half {
 18 | 		margin-left: $grid-width * $i + ($grid-width / 2);
 19 | 	}
 20 | }
 21 | 
 22 | // Small
 23 | +breakpoint(small) {
 24 | 	for $i in(1..12) {
 25 | 		// width
 26 | 		.sm-{$i} {
 27 | 			width: $grid-width * $i;
 28 | 		}
 29 | 
 30 | 		.sm-{$i}-half {
 31 | 			width: $grid-width * $i + ($grid-width / 2);
 32 | 		}
 33 | 
 34 | 		// offset
 35 | 		.sm-offset-{$i} {
 36 | 			margin-left: $grid-width * $i;
 37 | 		}
 38 | 
 39 | 		.sm-offset-{$i}-half {
 40 | 			margin-left: $grid-width * $i + ($grid-width / 2);
 41 | 		}
 42 | 	}
 43 | }
 44 | 
 45 | // Medium
 46 | +breakpoint(medium) {
 47 | 	for $i in(1..12) {
 48 | 		// width
 49 | 		.md-{$i} {
 50 | 			width: $grid-width * $i;
 51 | 		}
 52 | 
 53 | 		.md-{$i}-half {
 54 | 			width: $grid-width * $i + ($grid-width / 2);
 55 | 		}
 56 | 
 57 | 		// offset
 58 | 		.md-offset-{$i} {
 59 | 			margin-left: $grid-width * $i;
 60 | 		}
 61 | 
 62 | 		.md-offset-{$i}-half {
 63 | 			margin-left: $grid-width * $i + ($grid-width / 2);
 64 | 		}
 65 | 	}
 66 | }
 67 | 
 68 | // Large
 69 | +breakpoint(large) {
 70 | 	for $i in(1..12) {
 71 | 		// width
 72 | 		.lg-{$i} {
 73 | 			width: $grid-width * $i;
 74 | 		}
 75 | 
 76 | 		.lg-{$i}-half {
 77 | 			width: $grid-width * $i + ($grid-width / 2);
 78 | 		}
 79 | 
 80 | 		// offset
 81 | 		.lg-offset-{$i} {
 82 | 			margin-left: $grid-width * $i;
 83 | 		}
 84 | 
 85 | 		.lg-offset-{$i}-half {
 86 | 			margin-left: $grid-width * $i + ($grid-width / 2);
 87 | 		}
 88 | 	}
 89 | }
 90 | 
 91 | // 0 halves
 92 | .sm-half {
 93 | 	width: ($grid-width / 2);
 94 | }
 95 | 
 96 | .sm-offset-half {
 97 | 	margin-left: ($grid-width / 2);
 98 | }
 99 | 
100 | +breakpoint(medium) {
101 | 	.md-half {
102 | 		width: ($grid-width / 2);
103 | 	}
104 | 
105 | 	.md-offset-0 {
106 | 		margin: 0;
107 | 	}
108 | 
109 | 	.md-offset-half {
110 | 		margin-left: ($grid-width / 2);
111 | 	}
112 | }
113 | 
114 | +breakpoint(large) {
115 | 	.lg-half {
116 | 		width: ($grid-width / 2);
117 | 	}
118 | 
119 | 	.lg-offset-0 {
120 | 		margin-left: 0;
121 | 	}
122 | 
123 | 	.lg-offset-half {
124 | 		margin-left: ($grid-width / 2);
125 | 	}
126 | }
127 | 
128 | // Box model
129 | .has-gutter {
130 | 	float: left;
131 | 	padding: 0 var($gutter, 20px) / 2;
132 | }
133 | 
134 | .row {
135 | 	@extend .clearfix;
136 | 
137 | 	.row {
138 | 		.has-gutter {
139 | 			padding: 0;
140 | 		}
141 | 	}
142 | }


--------------------------------------------------------------------------------
/css/stylus/module/_modal.styl:
--------------------------------------------------------------------------------
 1 | .modal {
 2 | 	display: none;
 3 | }
 4 | 
 5 | .modal-open {
 6 | 	display: block;
 7 | 	position: fixed;
 8 | 	z-index: 1;
 9 | 	top: 50%;
10 | 	right: 0;
11 | 	left: 0;
12 | 	transform: translateY(-50%);
13 | 	margin: 0 auto;
14 | 	width: 100%;
15 | 	background: $modal-bg;
16 | 
17 | 	+breakpoint(medium) {
18 | 		width: 50%;
19 | 	}
20 | }
21 | 
22 | .modal-bg {
23 | 	&:after {
24 | 		content: "";
25 | 		position: fixed;
26 | 		top: 0;
27 | 		left: 0;
28 | 		width: 100%;
29 | 		height: 100%;
30 | 		background: $modal-overlay;
31 | 		opacity: $modal-trans;
32 | 	}
33 | }


--------------------------------------------------------------------------------
/css/stylus/module/_off-canvas.styl:
--------------------------------------------------------------------------------
 1 | .off-canvas-contain {
 2 | 	position: relative;
 3 | 
 4 | 	.off-canvas-left {
 5 | 		left: -(var($oc-width, 17.5em));
 6 | 		transition: left .3s ease;
 7 | 	}
 8 | 
 9 | 	.off-canvas-right {
10 | 		right: -(var($oc-width, 17.5em));
11 | 		transition: right .3s ease;
12 | 	}
13 | 
14 | 	&.off-canvas--open-left {
15 | 		.off-canvas-left {
16 | 			left: 0;
17 | 
18 | 			& ~ .off-canvas-content {
19 | 				left: var($oc-width, 17.5em);
20 | 				right: auto;
21 | 				cursor: pointer;
22 | 			}
23 | 		}
24 | 	}
25 | 
26 | 	&.off-canvas--open-right {
27 | 		.off-canvas-right {
28 | 			right: 0;
29 | 
30 | 			& ~ .off-canvas-content {
31 | 				left: -(var($oc-width, 17.5em));
32 | 				right: var($oc-width, 17.5em);
33 | 				cursor: pointer;
34 | 			}
35 | 		}
36 | 	}
37 | }
38 | 
39 | .off-canvas-left,
40 | .off-canvas-right {
41 | 	position: fixed;
42 | 	top: 0;
43 | 	width: var($oc-width, 17.5em);
44 | 	height: 100%;
45 | 	transform: translateZ(0);
46 | }
47 | 
48 | .off-canvas-content {
49 | 	position: relative;
50 | 	left: 0;
51 | 	right: 0;
52 | 	transition: left .3s ease, right .3s ease;
53 | }


--------------------------------------------------------------------------------
/css/stylus/module/_tabs.styl:
--------------------------------------------------------------------------------
1 | .tabs-panels {
2 | 	> li {
3 | 		display: none;
4 | 	}
5 | 
6 | 	.tab-panel--open {
7 | 		display: block;
8 | 	}
9 | }


--------------------------------------------------------------------------------
/css/stylus/module/_toggle.styl:
--------------------------------------------------------------------------------
1 | .toggle {
2 | 	display: none;
3 | }
4 | 
5 | .toggle-shown {
6 | 	display: block;
7 | }


--------------------------------------------------------------------------------
/example.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 |     <head>
  4 |         <meta charset="utf-8">
  5 |         <meta name="viewport" content="width=device-width, initial-scale=1">
  6 | 
  7 |         <title>Bare Ninja | Kitchen Sink</title>
  8 | 
  9 |         <link rel="stylesheet" href="css/barekit.css">
 10 |     </head>
 11 | 
 12 |     <body>
 13 |         <h1>Accordion</h1>
 14 | 
 15 |         <dl class="accordion" data-options='{ "multiExpand": true }'>
 16 |             <dt><a href="#">Accordion title 1</a></dt>
 17 |             <dd>Accordion content 1</dd>
 18 | 
 19 |             <dt><a href="#">Accordion title 2</a></dt>
 20 |             <dd>Accordion content 2</dd>
 21 | 
 22 |             <dt><a href="#">Accordion title 3</a></dt>
 23 |             <dd>Accordion content 3</dd>
 24 |         </dl>
 25 | 
 26 |         <h1>Dropdown Navigation</h1>
 27 | 
 28 |         <ul class="dropdown-nav" id="drop1">
 29 |             <li>
 30 |                 <a href="#">Link 1</a>
 31 | 
 32 |                 <ul style="background: #e1e1e1; width: 100px">
 33 |                     <li><a href="#">Sublink 1</a></li>
 34 |                     <li><a href="#">Sublink 2</a></li>
 35 |                     <li><a href="#">Sublink 3</a></li>
 36 |                 </ul>
 37 |             </li>
 38 |             <li>
 39 |                 <a href="#">Link 2</a>
 40 |             </li>
 41 |             <li>
 42 |                 <a href="#">Link 3</a>
 43 |             </li>
 44 |             <li>
 45 |                 <a href="#">Link 4</a>
 46 |             </li>
 47 |         </ul>
 48 | 
 49 |         <ul class="dropdown-nav" data-options='{ "click": true }'>
 50 |             <li>
 51 |                 <a href="#">Link 1</a>
 52 | 
 53 |                 <ul style="background: #e1e1e1; width: 100px">
 54 |                     <li><a href="#">Sublink 1</a></li>
 55 |                     <li><a href="#">Sublink 2</a></li>
 56 |                     <li><a href="#">Sublink 3</a></li>
 57 |                 </ul>
 58 |             </li>
 59 |             <li>
 60 |                 <a href="#">Link 2</a>
 61 |             </li>
 62 |             <li>
 63 |                 <a href="#">Link 3</a>
 64 |             </li>
 65 |             <li>
 66 |                 <a href="#">Link 4</a>
 67 |             </li>
 68 |         </ul>
 69 | 
 70 |         <div class="clearfix"></div>
 71 | 
 72 |         <h1>Form</h1>
 73 | 
 74 |         <label class="checkbox">
 75 |             <input type="checkbox">
 76 |             <span>Checkbox</span>
 77 |         </label>
 78 | 
 79 |         <div class="clearfix"></div>
 80 | 
 81 |         <label class="radio">
 82 |             <input type="radio">
 83 |             <span>Radio</span>
 84 |         </label>
 85 | 
 86 |         <h1>Grid</h1>
 87 | 
 88 |         <div class="row text-center">
 89 |             <div class="df-12 sm-12 md-6 lg-1 has-gutter" style="background: #e1e1e1">1</div>
 90 |             <div class="df-12 sm-12 md-6 lg-9 lg-offset-2 has-gutter" style="background: #c6c6c6">9 / offset 2</div>
 91 |         </div>
 92 |         <div class="row text-center">
 93 |             <div class="df-12 sm-12 md-6 lg-2 has-gutter" style="background: #e1e1e1">2</div>
 94 |             <div class="df-12 sm-12 md-6 lg-10 has-gutter" style="background: #c6c6c6">10</div>
 95 |         </div>
 96 |         <div class="row text-center">
 97 |             <div class="df-12 sm-12 md-6 lg-3 has-gutter" style="background: #e1e1e1">3</div>
 98 |             <div class="df-12 sm-12 md-3 md-offset-3 lg-9 lg-offset-0 has-gutter" style="background: #c6c6c6">9</div>
 99 |         </div>
100 |         <div class="row text-center">
101 |             <div class="df-12 sm-12 md-6 lg-4 has-gutter" style="background: #e1e1e1">4</div>
102 |             <div class="df-12 sm-12 md-6 lg-8 has-gutter" style="background: #c6c6c6">8</div>
103 |         </div>
104 |         <div class="row text-center">
105 |             <div class="df-12 sm-12 md-6 lg-5 has-gutter" style="background: #e1e1e1">5</div>
106 |             <div class="df-12 sm-12 md-6 lg-7 has-gutter" style="background: #c6c6c6">7</div>
107 |         </div>
108 |         <div class="row text-center">
109 |             <div class="df-12 sm-12 md-6 lg-6 has-gutter" style="background: #e1e1e1">6</div>
110 |             <div class="df-12 sm-12 md-6 lg-6 has-gutter" style="background: #c6c6c6">6</div>
111 |         </div>
112 |         <div class="row text-center">
113 |             <div class="df-12 sm-12 md-6 lg-7 has-gutter" style="background: #e1e1e1">7</div>
114 |             <div class="df-12 sm-12 md-6 lg-5 has-gutter" style="background: #c6c6c6">5</div>
115 |         </div>
116 |         <div class="row text-center">
117 |             <div class="df-12 sm-12 md-6 lg-8 has-gutter" style="background: #e1e1e1">8</div>
118 |             <div class="df-12 sm-12 md-6 lg-4 has-gutter" style="background: #c6c6c6">4</div>
119 |         </div>
120 |         <div class="row text-center">
121 |             <div class="df-12 sm-12 md-6 lg-9 has-gutter" style="background: #e1e1e1">9</div>
122 |             <div class="df-12 sm-12 md-6 lg-3 has-gutter" style="background: #c6c6c6">3</div>
123 |         </div>
124 |         <div class="row text-center">
125 |             <div class="df-12 sm-12 md-6 lg-10 has-gutter" style="background: #e1e1e1">10</div>
126 |             <div class="df-12 sm-12 md-6 lg-2 has-gutter" style="background: #c6c6c6">2</div>
127 |         </div>
128 |         <div class="row text-center">
129 |             <div class="df-12 sm-12 md-6 lg-11 has-gutter" style="background: #e1e1e1">11</div>
130 |             <div class="df-12 sm-12 md-6 lg-1 has-gutter" style="background: #c6c6c6">1</div>
131 |         </div>
132 | 
133 |         <div class="clearfix"></div>
134 | 
135 |         <h1>Modal</h1>
136 | 
137 |         <a href="#" class="modal-trigger" data-options='{ "modalId": "example-modal" }'>Trigger modal</a>
138 | 
139 |         <div class="modal" id="example-modal">
140 |             <a href="#" class="modal-close right">X</a>
141 |             <p>This is a modal</p>
142 |             <p>This is a modal</p>
143 |             <p>This is a modal</p>
144 |             <p>This is a modal</p>
145 |         </div>
146 | 
147 |         <h1>Off-Canvas</h1>
148 | 
149 |         <div class="off-canvas-contain">
150 |             <section class="off-canvas-left">
151 |                 I am content off-canvas.
152 |             </section>
153 | 
154 |             <section class="off-canvas-right">
155 |                 I am content off-canvas.
156 |             </section>
157 | 
158 |             <section class="off-canvas-content">
159 |                 <a href="#" class="off-canvas-trigger-left"><img class="header--avatar" src="https://s3.amazonaws.com/uifaces/faces/twitter/joshhemsley/128.jpg"></a>
160 |                 <a href="#" class="off-canvas-trigger-right">Right trigger</a>
161 |                 <p>I am the main content of the page that gets pushed over when the off-canvas is open. I also contain the off-canvas trigger.</p>
162 |             </section>
163 |         </div>
164 | 
165 |         <h1>Toggle</h1>
166 | 
167 |         <a href="#" class="toggle-trigger" data-options='{ "toggle": "toggle-example" }'>Toggle</a>
168 | 
169 |         <div class="toggle" id="toggle-example">Hello!</div>
170 | 
171 |          <a href="#" class="toggle-trigger" data-options='{ "toggle": "toggle-example2", "closeOnClick": true }'>Toggle (close on click)</a>
172 | 
173 |         <div class="toggle" id="toggle-example2">Hello again!</div>
174 | 
175 |         <h1>Tabs</h1>
176 | 
177 |         <ul class="tabs">
178 |             <li class="tab-trigger--open"><a href="#">Tab title 1</a></li>
179 |             <li><a href="#">Tab title 2</a></li>
180 |             <li><a href="#">Tab title 3</a></li>
181 |         </ul>
182 | 
183 |         <ul class="tabs-panels">
184 |             <li class="tab-panel--open">Tab content 1</li>
185 |             <li>Tab content 2</li>
186 |             <li>Tab content 3</li>
187 |         </ul>
188 | 
189 |         <h1>Lazy Loading Modules</h1>
190 |         <ul>
191 |             <li><a href="#" id="add-accordion">Accordion</a></li>
192 |             <li><a href="#" id="add-dropdown">Dropdown Navigation</a></li>
193 |             <li><a href="#" id="add-modal">Modal</a></li>
194 |             <li><a href="#" id="add-offcanvas">Off-Canvas</a></li>
195 |             <li><a href="#" id="add-tabs">Tabs</a></li>
196 |             <li><a href="#" id="add-toggle">Toggle</a></li>
197 |         </ul>
198 | 
199 |         <div id="lazy-load-example" style="height: 400px"></div>
200 | 
201 |         <script src="bower_components/jquery/dist/jquery.min.js"></script>
202 |         <script src="js/barekit.min.js"></script>
203 |     </body>
204 | </html>


--------------------------------------------------------------------------------
/gruntfile.js:
--------------------------------------------------------------------------------
  1 | module.exports = function (grunt) {
  2 | 
  3 |     'use strict';
  4 | 
  5 |     grunt.initConfig({
  6 |         pkg: grunt.file.readJSON('package.json'),
  7 | 
  8 |         /**
  9 |          * Sass
 10 |          */
 11 |         sass: {
 12 |             dist: {
 13 |                 options: {
 14 |                     style: 'compressed'
 15 |                 },
 16 |                 files: [{
 17 |                     expand: true,
 18 |                     cwd: 'css',
 19 |                     src: ['*.scss'],
 20 |                     dest: 'css',
 21 |                     ext: '.css'
 22 |                 }]
 23 |             }
 24 |         },
 25 | 
 26 |         /**
 27 |          * Autoprefixer
 28 |          */
 29 |         autoprefixer: {
 30 |             options: {
 31 |                 browsers: ['last 2 version', 'ie 8', 'ie 9']
 32 |             },
 33 |             multiple_files: {
 34 |                 expand: true,
 35 |                 flatten: true,
 36 |                 src: 'css/*.css',
 37 |                 dest: 'css/'
 38 |             }
 39 |         },
 40 | 
 41 |         concat: {
 42 |             dist: {
 43 |                 src: [
 44 |                     'src/prefix.js',
 45 |                     'src/modules/core.js',
 46 |                     'src/modules/accordion.js',
 47 |                     'src/modules/dropdown-nav.js',
 48 |                     'src/modules/modal.js',
 49 |                     'src/modules/off-canvas.js',
 50 |                     'src/modules/tabs.js',
 51 |                     'src/modules/toggle.js',
 52 |                     'src/suffix.js'
 53 |                 ],
 54 |                 dest: 'js/barekit.js',
 55 |             }
 56 |         },
 57 | 
 58 |         /**
 59 |          * Uglify
 60 |          */
 61 |         uglify: {
 62 |             modules: {
 63 |                 files: {
 64 |                     'js/barekit.min.js': [
 65 |                         'js/barekit.js'
 66 |                     ]
 67 |                 }
 68 |             }
 69 |         },
 70 | 
 71 | 
 72 |         /**
 73 |          * Watch
 74 |          */
 75 |         watch: {
 76 |             css: {
 77 |                 files: [
 78 |                     'css/sass/barekit.scss',
 79 |                     'css/sass/global/*.scss',
 80 |                     'css/sass/layout/*.scss',
 81 |                     'css/sass/module/*.scss'
 82 |                 ],
 83 |                 tasks: ['sass:dist', 'autoprefixer'],
 84 |                 options: { nospawn: true }
 85 |             },
 86 |             uglify: {
 87 |                 files: ['js/modules/*.js'],
 88 |                 tasks: ['js']
 89 |             }
 90 |         },
 91 |         qunit: {
 92 |             all: ['spec/**/*.html']
 93 |         },
 94 | 
 95 | 
 96 |         docco: {
 97 |             src: ['js/barekit.js'],
 98 |             options: {
 99 |                 output: 'docs/'
100 |             }
101 |         }
102 |     });
103 | 
104 |     // Load NPM Tasks
105 |     grunt.loadNpmTasks('grunt-contrib-concat');
106 |     grunt.loadNpmTasks('grunt-contrib-sass');
107 |     grunt.loadNpmTasks('grunt-contrib-watch');
108 |     grunt.loadNpmTasks('grunt-autoprefixer');
109 |     grunt.loadNpmTasks('grunt-contrib-uglify');
110 |     grunt.loadNpmTasks('grunt-contrib-qunit');
111 |     grunt.loadNpmTasks('grunt-docco');
112 | 
113 |     grunt.registerTask('js', [ 'concat', 'uglify' ]);
114 |     grunt.registerTask('test', [ 'js', 'qunit' ]);
115 | 
116 |     // Register Tasks
117 |     grunt.registerTask('default', [ 'sass', 'autoprefixer', 'js' ]);
118 | 
119 | };


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp'),
 2 |     stylus = require('gulp-stylus'),
 3 |     prefix = require('gulp-autoprefixer'),
 4 |     uglify = require('gulp-uglify'),
 5 |     concat = require('gulp-concat');
 6 | 
 7 | var paths = {
 8 |     styles: 'css/**/*.styl',
 9 |     scripts: [
10 |         'js/modules/core.js',
11 |         'js/modules/accordion.js',
12 |         'js/modules/dropdown-nav.js',
13 |         'js/modules/modal.js',
14 |         'js/modules/off-canvas.js',
15 |         'js/modules/tabs.js',
16 |         'js/modules/toggle.js'
17 |     ]
18 | };
19 | 
20 | gulp.task('styles', function () {
21 |     gulp.src('css/barekit.styl')
22 |         .pipe(stylus())
23 |         .pipe(prefix('last 2 version', 'ie 8', 'ie 9'))
24 |         .pipe(gulp.dest('./css'))
25 | });
26 | 
27 | gulp.task('scripts', function () {
28 |     gulp.src(paths.scripts)
29 |         .pipe(concat('barekit.min.js'))
30 |         .pipe(uglify())
31 |         .pipe(gulp.dest('./js'));
32 | });
33 | 
34 | gulp.task('watch', function () {
35 |     gulp.watch(paths.styles, ['styles']);
36 |     gulp.watch(paths.scripts, ['scripts']);
37 |     gulp.watch(paths.html, ['html']);
38 | });
39 | 
40 | // The default task (called when you run `gulp` from cli)
41 | gulp.task('default', [
42 |     'styles',
43 |     'scripts',
44 |     'watch'
45 | ]);


--------------------------------------------------------------------------------
/js/barekit.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  * Barekit 0.7.0
  3 |  *
  4 |  * Copyright 2014 Trevan Hetzel. (http://trevan.coo)
  5 |  * Licensed under the MIT license.
  6 |  *
  7 |  * http://trevanhetzel.github.io/barekit/
  8 |  */
  9 |  ;(function($) {
 10 | var Bk;
 11 | 
 12 | window.Barekit = Bk = {
 13 | 	autoInitialize: true
 14 | };
 15 | 
 16 | var Accordion = function () {
 17 | 	this.init.apply(this, arguments);
 18 | };
 19 | 
 20 | Accordion.defaults = {
 21 | 	className: 'accordion',
 22 | 	multiExpand: false,
 23 | 	panelSelector: 'dd',
 24 | 	triggerSelector: 'dt',
 25 | 	activeTrigger: 'accordion-trigger--open',
 26 | 	activePanel: 'accordion-panel--open'
 27 | };
 28 | 
 29 | Accordion.prototype.init = function (el, options) {
 30 | 	// Store a reference to the jQuery element
 31 | 	this.$el = $(el);
 32 | 
 33 | 	// Set the options
 34 | 	this.options = $.extend({}, Accordion.defaults, options, this.$el.data('options'));
 35 | 
 36 | 	// Add the class
 37 | 	this.$el.addClass(this.options.className);
 38 | 
 39 | 	this.$el.on('click.bk.accordion', $.proxy(this.onClick, this));
 40 | };
 41 | 
 42 | Accordion.prototype.onClick = function (e) {
 43 |   var $target = $(e.target);
 44 | 
 45 |   //prevent default behaviour on non-absolute links
 46 |   if ($target.is('a')) {
 47 |     var href = $target.attr("href");
 48 |     if ($target.attr("href") == "#") {
 49 |       e.preventDefault();
 50 |     }
 51 |   }
 52 | 
 53 |   //find the dt parent node
 54 |   while($target.length && !$target.is('dt')) {
 55 |     $target = $target.parent();
 56 |   }
 57 | 
 58 |   if ($target.length) {
 59 |     var $content = $target.next('dd');
 60 |     this.processOptions($target, $content);
 61 |   }
 62 | };
 63 | 
 64 | Accordion.prototype.processOptions = function ($target, $content) {
 65 | 	var $panel = this.$el.find(this.options.panelSelector),
 66 | 		$trigger = this.$el.find(this.options.triggerSelector),
 67 | 		activeTrigger = this.options.activeTrigger,
 68 | 		activePanel = this.options.activePanel;
 69 | 
 70 | 	if (this.options.multiExpand === true) {
 71 | 		// Trigger active class
 72 | 		$target.toggleClass(activeTrigger);
 73 | 		// Panel active class
 74 | 		$content.toggleClass(activePanel);
 75 | 	} else {
 76 | 		// Remove all trigger active classes
 77 | 		$trigger.removeClass(activeTrigger);
 78 | 		// Trigger active class
 79 | 		$target.addClass(activeTrigger);
 80 | 
 81 | 		// Remove all panel active classes
 82 | 		if (!$content.hasClass(activePanel)) {
 83 | 			$panel.removeClass(activePanel);
 84 | 		}
 85 | 		// Panel active class
 86 | 		$content.toggleClass(activePanel);
 87 | 	}
 88 | };
 89 | 
 90 | Accordion.prototype.destroy = function () {
 91 | 	this.$el.off('.accordion');
 92 | };
 93 | 
 94 | Bk.Accordion = Accordion;
 95 | 
 96 | // Expose as a jQuery Plugin
 97 | $.fn.bkAccordion = function (options) {
 98 | 	return this.each(function () {
 99 | 		var $el = $(this);
100 | 		// Check if it is already set up
101 | 		if (!$el.data('bkAccordion')) {
102 | 			$el.data('bkAccordion', new Accordion(this, options));
103 | 		}
104 | 	});
105 | };
106 | 
107 | // Allow defaults to be accessed via a common jQuery pattern
108 | $.fn.bkAccordion.defaults = Accordion.defaults;
109 | 
110 | // Auto-initialize if set
111 | jQuery(function ($) {
112 | 	if (Bk.autoInitialize) {
113 | 		$('.' + Accordion.defaults.className).bkAccordion();
114 | 	}
115 | });
116 | var Dropdown = function () {
117 | 	this.init.apply(this, arguments);
118 | };
119 | 
120 | Dropdown.defaults = {
121 | 	className: 'dropdown-nav',
122 | 	click: false,
123 | 	clickClass: 'click-setting',
124 | 	activeTrigger: 'dropdown-trigger--open',
125 | 	activeClass: 'dropdown--open'
126 | };
127 | 
128 | Dropdown.prototype.init = function (el, options) {
129 | 	// Store a reference to the jQuery element
130 | 	this.$el = $(el);
131 | 
132 | 	var $trigger = this.$el.find('li:has(ul)');
133 | 
134 | 	// Set the options
135 | 	this.options = $.extend({}, Dropdown.defaults, options, this.$el.data('options'));
136 | 
137 | 	// Add the class
138 | 	this.$el.addClass(this.options.className);
139 | 
140 | 	if (this.options.click == true) {
141 | 		// Cancel out the CSS hover functionality
142 | 		$trigger.addClass(this.options.clickClass);
143 | 		$trigger.on('click.bk.dropdown', $.proxy(this.remove, this));
144 | 
145 | 		//mouse click listener to close the dropdown if clicked outside
146 |     self = this;
147 |     $(document).on('click', function(e){
148 |       $('.' + self.options.activeTrigger).each(function(){
149 |         self.hide($(this), e);
150 |       });
151 |     });
152 | 
153 |     //keyboard listener to close the dropdown if esc is pressed
154 |     $(document).keyup(function(e) {
155 |       if(e.keyCode === 27){
156 |         $('.' + self.options.activeTrigger).each(function(){
157 |           self.hide($(this), 'undefined');
158 |         });
159 |       }
160 |     });
161 | 	}
162 | };
163 | 
164 | Dropdown.prototype.hide = function($el, e) {
165 |   if( e === 'undefined' || ($(e.target).parents('ul.' + this.options.className)[0] !== $el.parents('ul.' + this.options.className)[0])){
166 |     $el.removeClass(this.options.activeTrigger);
167 |     $el.children('ul').removeClass(this.options.activeClass);
168 |   }
169 | };
170 | 
171 | Dropdown.prototype.remove = function (e) {
172 | 	var $this = $(e.currentTarget),
173 |     $menu = $this.children('ul'),
174 |     $target = $(e.target);
175 | 
176 |   if(!$target.is('a')){
177 |     e.preventDefault();
178 |   }
179 | 
180 | 	$this.removeClass(this.options.className);
181 | 
182 | 	this.doDropdown($this, $menu);
183 | };
184 | 
185 | Dropdown.prototype.doDropdown = function ($this, $menu) {
186 | 	$this.toggleClass(this.options.activeTrigger);
187 | 	$menu.toggleClass(this.options.activeClass);
188 | };
189 | 
190 | Dropdown.prototype.destroy = function () {
191 | 	this.$el.off('.dropdown');
192 | };
193 | 
194 | Bk.Dropdown = Dropdown;
195 | 
196 | // Expose as a jQuery Plugin
197 | $.fn.bkDropdown = function (options) {
198 | 	return this.each(function () {
199 | 		var $el = $(this);
200 | 		// Check if it is already set up
201 | 		if (!$el.data('bkDropdown')) {
202 | 			$el.data('bkDropdown', new Dropdown(this, options));
203 | 		}
204 | 	});
205 | };
206 | 
207 | // Allow defaults to be accessed via a common jQuery pattern
208 | $.fn.bkDropdown.defaults = Dropdown.defaults;
209 | 
210 | // Auto-initialize if set
211 | jQuery(function ($) {
212 | 	if (Bk.autoInitialize) {
213 | 		$('.' + Dropdown.defaults.className).bkDropdown();
214 | 	}
215 | });
216 | 
217 | var Modal = function () {
218 | 	this.init.apply(this, arguments);
219 | };
220 | 
221 | Modal.defaults = {
222 | 	className: 'modal-trigger',
223 | 	modal: '.modal',
224 | 	close: '.modal-close',
225 | 	bg: 'modal-bg',
226 | 	openClass: 'modal-open'
227 | };
228 | 
229 | Modal.prototype.init = function (el, options) {
230 | 	var self = this;
231 | 
232 | 	// Store a reference to the jQuery element
233 | 	this.$el = $(el);
234 | 
235 | 	// Set the options
236 | 	this.options = $.extend({}, Modal.defaults, options, this.$el.data('options'));
237 | 
238 | 	// Add the class
239 | 	this.$el.addClass(this.options.className);
240 | 
241 | 	$(document)
242 | 		.on('click.bk.modal', function (e) {
243 | 			self.closeModal();
244 | 		})
245 | 		.on('click.bk.modal', '.' + this.options.className, function (e) {
246 | 			e.stopPropagation();
247 | 			e.preventDefault();
248 | 
249 | 			if ($(e.currentTarget).data("options").modalId === self.options.modalId) {
250 | 				self.onClick();
251 | 			}
252 | 		})
253 | 		.on('click.bk.modal', this.options.modal, function (e) {
254 | 			e.stopPropagation();
255 | 			e.preventDefault();
256 | 		})
257 | 		.on('keyup.bk.modal', function (e) {
258 | 			if (e.keyCode === 27) {
259 | 				self.closeModal();
260 | 			}
261 | 		});
262 | 
263 | 	$(this.options.close).on('click.bk.modal', function () {
264 | 		self.closeModal();
265 | 	});
266 | };
267 | 
268 | Modal.prototype.onClick = function (e) {
269 | 
270 | 	var $dest = $('#' + this.options.modalId);
271 | 
272 | 	this.openModal($dest);
273 | };
274 | 
275 | Modal.prototype.openModal = function($dest) {
276 | 	// Add class to body for overlay
277 | 	$('body').addClass(this.options.bg);
278 | 	// Add open class to modal
279 | 	$dest.addClass(this.options.openClass);
280 | };
281 | 
282 | Modal.prototype.closeModal = function () {
283 | 	// Remove class from body to remove overlay
284 | 	$('body').removeClass(this.options.bg);
285 | 	// Remove open class from modal
286 | 	$(this.options.modal).removeClass(this.options.openClass);
287 | };
288 | 
289 | Modal.prototype.destroy = function () {
290 | 	$(document).off('.modal');
291 | 	$(this.options.close).off('.modal');
292 | };
293 | 
294 | Bk.Modal = Modal;
295 | 
296 | // Expose as a jQuery Plugin
297 | $.fn.bkModal = function (options) {
298 | 	return this.each(function () {
299 | 		var $el = $(this);
300 | 		// Check if it is already set up
301 | 		if (!$el.data('bkModal')) {
302 | 			$el.data('bkModal', new Modal(this, options));
303 | 		}
304 | 	});
305 | };
306 | 
307 | // Allow defaults to be accessed via a common jQuery pattern
308 | $.fn.bkModal.defaults = Modal.defaults;
309 | 
310 | // Auto-initialize if set
311 | jQuery(function ($) {
312 | 	if (Bk.autoInitialize) {
313 | 		$('.' + Modal.defaults.className).bkModal();
314 | 	}
315 | });
316 | 
317 | var OffCanvas = function () {
318 | 	this.init.apply(this, arguments);
319 | };
320 | 
321 | OffCanvas.defaults = {
322 | 	className: 'off-canvas-contain',
323 | 	trigger: '[class^="off-canvas-trigger"]',
324 | 	leftOpenClass: 'off-canvas--open-left',
325 | 	rightOpenClass: 'off-canvas--open-right'
326 | };
327 | 
328 | OffCanvas.prototype.init = function (el, options) {
329 | 	var self = this;
330 | 	
331 | 	// Store a reference to the jQuery element
332 | 	this.$el = $(el);
333 | 
334 | 	// Set the options
335 | 	var options = this.options = $.extend({}, OffCanvas.defaults, options, this.$el.data('options'));
336 | 
337 | 	// Add the class
338 | 	this.$el.addClass(options.className);
339 | 
340 | 	$(document)
341 | 		.on('click.bk.offcanvas', function () {
342 | 			self.closeOffCanvas();
343 | 		})
344 | 		.on('click.bk.offcanvas', options.trigger, function (e) {
345 | 			var $this = $(this),
346 | 				$offCanvas = $this.parents('.off-canvas-contain');
347 | 
348 | 			e.stopPropagation();
349 | 			e.preventDefault();
350 | 
351 | 			if ($offCanvas.hasClass(options.leftOpenClass) || $offCanvas.hasClass(options.rightOpenClass)) {
352 | 				self.closeOffCanvas(options);
353 | 			} else {
354 | 				self.openOffCanvas(options, $this, $offCanvas);
355 | 			}
356 | 		})
357 | 		.on('click.bk.offcanvas', '.off-canvas-left', function (e) {
358 | 			e.stopPropagation();
359 | 		})
360 | 		.on('click.bk.offcanvas', '.off-canvas-right', function (e) {
361 | 			e.stopPropagation();
362 | 		});
363 | };
364 | 
365 | OffCanvas.prototype.closeOffCanvas = function () {
366 | 	this.$el.removeClass('off-canvas--open-right').removeClass('off-canvas--open-left');
367 | };
368 | 
369 | OffCanvas.prototype.openOffCanvas = function (options, $this, $offCanvas) {
370 | 	if ($this.hasClass('off-canvas-trigger-left')) {
371 | 		$offCanvas.addClass(options.leftOpenClass);
372 | 	} else if ($this.hasClass('off-canvas-trigger-right')) {
373 | 		$offCanvas.addClass(options.rightOpenClass);
374 | 	}
375 | };
376 | 
377 | OffCanvas.prototype.destroy = function () {
378 | 	$(document).off(".offcanvas");
379 | };
380 | 
381 | Bk.OffCanvas = OffCanvas;
382 | 
383 | // Expose as a jQuery Plugin
384 | $.fn.bkOffCanvas = function (options) {
385 | 	return this.each(function () {
386 | 		var $el = $(this);
387 | 		// Check if it is already set up
388 | 		if (!$el.data('bkOffCanvas')) {
389 | 			$el.data('bkOffCanvas', new OffCanvas(this, options));
390 | 		}
391 | 	});
392 | };
393 | 
394 | // Allow defaults to be accessed via a common jQuery pattern
395 | $.fn.bkOffCanvas.defaults = OffCanvas.defaults;
396 | 
397 | // Auto-initialize if set
398 | jQuery(function ($) {
399 | 	if (Bk.autoInitialize) {
400 | 		$('.' + OffCanvas.defaults.className).bkOffCanvas();
401 | 	}
402 | });
403 | 
404 | var Tabs = function () {
405 | 	this.init.apply(this, arguments);
406 | };
407 | 
408 | Tabs.defaults = {
409 | 	className: 'tabs',
410 | 	panelClass: 'tabs-panels',
411 | 	activeTrigger: 'tab-trigger--open',
412 | 	activePanel: 'tab-panel--open'
413 | };
414 | 
415 | Tabs.prototype.init = function (el, options) {
416 | 	var self = this;
417 | 	
418 | 	// Store a reference to the jQuery element
419 | 	this.$el = $(el);
420 | 
421 | 	// Set the options
422 | 	this.options = $.extend({}, Tabs.defaults, options, this.$el.data('options'));
423 | 
424 | 	// Add the class
425 | 	this.$el.addClass(this.options.className);
426 | 
427 | 	this.$trigger = this.$el.find('li a');
428 | 
429 | 	this.$trigger.on('click.bk.tabs', function (e) {
430 | 		var $this = $(this);
431 | 
432 | 		e.preventDefault();
433 | 		
434 | 		self.doTabs($this);
435 | 	});
436 | };
437 | 
438 | Tabs.prototype.doTabs = function ($this) {
439 | 	var $panelGroup = $this.parent().parent().next('.' + this.options.panelClass),
440 | 		$panel = $panelGroup.children('li'),
441 | 		triggerPos = $this.parent().index(),
442 | 		$matchingPanel = $panel.eq(triggerPos);
443 | 
444 | 	// Remove all trigger active classes
445 | 	this.$trigger.parent().removeClass(this.options.activeTrigger);
446 | 
447 | 	// Trigger active class
448 | 	$this.parent().addClass(this.options.activeTrigger);
449 | 
450 | 	// Remove all panel active classes
451 | 	$panel.removeClass(this.options.activePanel);
452 | 
453 | 	// Panel active class
454 | 	$matchingPanel.addClass(this.options.activePanel);
455 | };
456 | 
457 | Tabs.prototype.destroy = function () {
458 | 	this.$trigger.off(".tabs");
459 | };
460 | 
461 | Bk.Tabs = Tabs;
462 | 
463 | // Expose as a jQuery Plugin
464 | $.fn.bkTabs = function (options) {
465 | 	return this.each(function () {
466 | 		var $el = $(this);
467 | 		// Check if it is already set up
468 | 		if (!$el.data('bkTabs')) {
469 | 			$el.data('bkTabs', new Tabs(this, options));
470 | 		}
471 | 	});
472 | };
473 | 
474 | // Allow defaults to be accessed via a common jQuery pattern
475 | $.fn.bkTabs.defaults = Tabs.defaults;
476 | 
477 | // Auto-initialize if set
478 | jQuery(function ($) {
479 | 	if (Bk.autoInitialize) {
480 | 		$('.' + Tabs.defaults.className).bkTabs();
481 | 	}
482 | });
483 | var Toggle = function () {
484 | 	this.init.apply(this, arguments);
485 | };
486 | 
487 | Toggle.defaults = {
488 | 	className: 'toggle-trigger',
489 | 	toggle: '',
490 | 	activeTriggerClass: 'toggle-trigger-shown',
491 | 	activeClass: 'toggle-shown',
492 | 	closeOnClick: false
493 | };
494 | 
495 | Toggle.prototype.init = function (el, options) {
496 | 	var self = this;
497 | 	
498 | 	// Store a reference to the jQuery element
499 | 	this.$el = $(el);
500 | 
501 | 	this.options = $.extend({}, Toggle.defaults, options, this.$el.data('options'));
502 | 
503 | 	// Add the class
504 | 	this.$el.addClass(this.options.className);
505 | 
506 | 	if (this.options.closeOnClick == true) {
507 | 		$(document).on('click', function (e) {
508 | 			$('#' + self.options.toggle).removeClass(self.options.activeClass);
509 | 		});
510 | 
511 | 		$('#' + this.options.toggle).on('click', function (e) {
512 | 			e.stopPropagation();
513 | 		});
514 | 	}
515 | 
516 | 	this.$el.on('click.bk.toggle', function (e) {
517 | 		var $this = $(this);
518 | 
519 | 		e.preventDefault();
520 | 		e.stopPropagation();
521 | 
522 | 		self.doToggle();
523 | 	});
524 | };
525 | 
526 | Toggle.prototype.doToggle = function () {
527 | 	var self = this,
528 | 		$target = $('#' + this.options.toggle);
529 | 
530 | 	// Toggle class on trigger element
531 | 	self.$el.toggleClass(this.options.activeTriggerClass);
532 | 
533 | 	// Toggle class on element desired to be shown/hidden
534 | 	$target.toggleClass(this.options.activeClass);
535 | };
536 | 
537 | Toggle.prototype.unToggle = function () {
538 | 	var self = this,
539 | 		$target = $('#' + this.options.toggle);
540 | 
541 | 	$target.removeClass(this.options.activeClass);
542 | };
543 | 
544 | Toggle.prototype.destroy = function () {
545 | 	this.$el.off(".toggle");
546 | };
547 | 
548 | Bk.Toggle = Toggle;
549 | 
550 | // Expose as a jQuery Plugin
551 | $.fn.bkToggle = function (options) {
552 | 	return this.each(function () {
553 | 		var $el = $(this);
554 | 		// Check if it is already set up
555 | 		if (!$el.data('bkToggle')) {
556 | 			$el.data('bkToggle', new Toggle(this, options));
557 | 		}
558 | 	});
559 | };
560 | 
561 | // Allow defaults to be accessed via a common jQuery pattern
562 | $.fn.bkToggle.defaults = Toggle.defaults;
563 | 
564 | // Auto-initialize if set
565 | jQuery(function ($) {
566 | 	if (Bk.autoInitialize) {
567 | 		$('.' + Toggle.defaults.className).bkToggle();
568 | 	}
569 | });
570 | }(jQuery));


--------------------------------------------------------------------------------
/js/barekit.min.js:
--------------------------------------------------------------------------------
1 | !function(a){var b;window.Barekit=b={autoInitialize:!0};var c=function(){this.init.apply(this,arguments)};c.defaults={className:"accordion",multiExpand:!1,panelSelector:"dd",triggerSelector:"dt",activeTrigger:"accordion-trigger--open",activePanel:"accordion-panel--open"},c.prototype.init=function(b,d){this.$el=a(b),this.options=a.extend({},c.defaults,d,this.$el.data("options")),this.$el.addClass(this.options.className),this.$el.on("click.bk.accordion",a.proxy(this.onClick,this))},c.prototype.onClick=function(b){var c=a(b.target);if(c.is("a")){{c.attr("href")}"#"==c.attr("href")&&b.preventDefault()}for(;c.length&&!c.is("dt");)c=c.parent();if(c.length){var d=c.next("dd");this.processOptions(c,d)}},c.prototype.processOptions=function(a,b){var c=this.$el.find(this.options.panelSelector),d=this.$el.find(this.options.triggerSelector),e=this.options.activeTrigger,f=this.options.activePanel;this.options.multiExpand===!0?(a.toggleClass(e),b.toggleClass(f)):(d.removeClass(e),a.addClass(e),b.hasClass(f)||c.removeClass(f),b.toggleClass(f))},c.prototype.destroy=function(){this.$el.off(".accordion")},b.Accordion=c,a.fn.bkAccordion=function(b){return this.each(function(){var d=a(this);d.data("bkAccordion")||d.data("bkAccordion",new c(this,b))})},a.fn.bkAccordion.defaults=c.defaults,jQuery(function(a){b.autoInitialize&&a("."+c.defaults.className).bkAccordion()});var d=function(){this.init.apply(this,arguments)};d.defaults={className:"dropdown-nav",click:!1,clickClass:"click-setting",activeTrigger:"dropdown-trigger--open",activeClass:"dropdown--open"},d.prototype.init=function(b,c){this.$el=a(b);var e=this.$el.find("li:has(ul)");this.options=a.extend({},d.defaults,c,this.$el.data("options")),this.$el.addClass(this.options.className),1==this.options.click&&(e.addClass(this.options.clickClass),e.on("click.bk.dropdown",a.proxy(this.remove,this)),self=this,a(document).on("click",function(b){a("."+self.options.activeTrigger).each(function(){self.hide(a(this),b)})}),a(document).keyup(function(b){27===b.keyCode&&a("."+self.options.activeTrigger).each(function(){self.hide(a(this),"undefined")})}))},d.prototype.hide=function(b,c){("undefined"===c||a(c.target).parents("ul."+this.options.className)[0]!==b.parents("ul."+this.options.className)[0])&&(b.removeClass(this.options.activeTrigger),b.children("ul").removeClass(this.options.activeClass))},d.prototype.remove=function(b){var c=a(b.currentTarget),d=c.children("ul"),e=a(b.target);e.is("a")||b.preventDefault(),c.removeClass(this.options.className),this.doDropdown(c,d)},d.prototype.doDropdown=function(a,b){a.toggleClass(this.options.activeTrigger),b.toggleClass(this.options.activeClass)},d.prototype.destroy=function(){this.$el.off(".dropdown")},b.Dropdown=d,a.fn.bkDropdown=function(b){return this.each(function(){var c=a(this);c.data("bkDropdown")||c.data("bkDropdown",new d(this,b))})},a.fn.bkDropdown.defaults=d.defaults,jQuery(function(a){b.autoInitialize&&a("."+d.defaults.className).bkDropdown()});var e=function(){this.init.apply(this,arguments)};e.defaults={className:"modal-trigger",modal:".modal",close:".modal-close",bg:"modal-bg",openClass:"modal-open"},e.prototype.init=function(b,c){var d=this;this.$el=a(b),this.options=a.extend({},e.defaults,c,this.$el.data("options")),this.$el.addClass(this.options.className),a(document).on("click.bk.modal",function(){d.closeModal()}).on("click.bk.modal","."+this.options.className,function(b){b.stopPropagation(),b.preventDefault(),a(b.currentTarget).data("options").modalId===d.options.modalId&&d.onClick()}).on("click.bk.modal",this.options.modal,function(a){a.stopPropagation(),a.preventDefault()}).on("keyup.bk.modal",function(a){27===a.keyCode&&d.closeModal()}),a(this.options.close).on("click.bk.modal",function(){d.closeModal()})},e.prototype.onClick=function(){var b=a("#"+this.options.modalId);this.openModal(b)},e.prototype.openModal=function(b){a("body").addClass(this.options.bg),b.addClass(this.options.openClass)},e.prototype.closeModal=function(){a("body").removeClass(this.options.bg),a(this.options.modal).removeClass(this.options.openClass)},e.prototype.destroy=function(){a(document).off(".modal"),a(this.options.close).off(".modal")},b.Modal=e,a.fn.bkModal=function(b){return this.each(function(){var c=a(this);c.data("bkModal")||c.data("bkModal",new e(this,b))})},a.fn.bkModal.defaults=e.defaults,jQuery(function(a){b.autoInitialize&&a("."+e.defaults.className).bkModal()});var f=function(){this.init.apply(this,arguments)};f.defaults={className:"off-canvas-contain",trigger:'[class^="off-canvas-trigger"]',leftOpenClass:"off-canvas--open-left",rightOpenClass:"off-canvas--open-right"},f.prototype.init=function(b,c){var d=this;this.$el=a(b);var c=this.options=a.extend({},f.defaults,c,this.$el.data("options"));this.$el.addClass(c.className),a(document).on("click.bk.offcanvas",function(){d.closeOffCanvas()}).on("click.bk.offcanvas",c.trigger,function(b){var e=a(this),f=e.parents(".off-canvas-contain");b.stopPropagation(),b.preventDefault(),f.hasClass(c.leftOpenClass)||f.hasClass(c.rightOpenClass)?d.closeOffCanvas(c):d.openOffCanvas(c,e,f)}).on("click.bk.offcanvas",".off-canvas-left",function(a){a.stopPropagation()}).on("click.bk.offcanvas",".off-canvas-right",function(a){a.stopPropagation()})},f.prototype.closeOffCanvas=function(){this.$el.removeClass("off-canvas--open-right").removeClass("off-canvas--open-left")},f.prototype.openOffCanvas=function(a,b,c){b.hasClass("off-canvas-trigger-left")?c.addClass(a.leftOpenClass):b.hasClass("off-canvas-trigger-right")&&c.addClass(a.rightOpenClass)},f.prototype.destroy=function(){a(document).off(".offcanvas")},b.OffCanvas=f,a.fn.bkOffCanvas=function(b){return this.each(function(){var c=a(this);c.data("bkOffCanvas")||c.data("bkOffCanvas",new f(this,b))})},a.fn.bkOffCanvas.defaults=f.defaults,jQuery(function(a){b.autoInitialize&&a("."+f.defaults.className).bkOffCanvas()});var g=function(){this.init.apply(this,arguments)};g.defaults={className:"tabs",panelClass:"tabs-panels",activeTrigger:"tab-trigger--open",activePanel:"tab-panel--open"},g.prototype.init=function(b,c){var d=this;this.$el=a(b),this.options=a.extend({},g.defaults,c,this.$el.data("options")),this.$el.addClass(this.options.className),this.$trigger=this.$el.find("li a"),this.$trigger.on("click.bk.tabs",function(b){var c=a(this);b.preventDefault(),d.doTabs(c)})},g.prototype.doTabs=function(a){var b=a.parent().parent().next("."+this.options.panelClass),c=b.children("li"),d=a.parent().index(),e=c.eq(d);this.$trigger.parent().removeClass(this.options.activeTrigger),a.parent().addClass(this.options.activeTrigger),c.removeClass(this.options.activePanel),e.addClass(this.options.activePanel)},g.prototype.destroy=function(){this.$trigger.off(".tabs")},b.Tabs=g,a.fn.bkTabs=function(b){return this.each(function(){var c=a(this);c.data("bkTabs")||c.data("bkTabs",new g(this,b))})},a.fn.bkTabs.defaults=g.defaults,jQuery(function(a){b.autoInitialize&&a("."+g.defaults.className).bkTabs()});var h=function(){this.init.apply(this,arguments)};h.defaults={className:"toggle-trigger",toggle:"",activeTriggerClass:"toggle-trigger-shown",activeClass:"toggle-shown",closeOnClick:!1},h.prototype.init=function(b,c){var d=this;this.$el=a(b),this.options=a.extend({},h.defaults,c,this.$el.data("options")),this.$el.addClass(this.options.className),1==this.options.closeOnClick&&(a(document).on("click",function(){a("#"+d.options.toggle).removeClass(d.options.activeClass)}),a("#"+this.options.toggle).on("click",function(a){a.stopPropagation()})),this.$el.on("click.bk.toggle",function(b){a(this);b.preventDefault(),b.stopPropagation(),d.doToggle()})},h.prototype.doToggle=function(){var b=this,c=a("#"+this.options.toggle);b.$el.toggleClass(this.options.activeTriggerClass),c.toggleClass(this.options.activeClass)},h.prototype.unToggle=function(){var b=a("#"+this.options.toggle);b.removeClass(this.options.activeClass)},h.prototype.destroy=function(){this.$el.off(".toggle")},b.Toggle=h,a.fn.bkToggle=function(b){return this.each(function(){var c=a(this);c.data("bkToggle")||c.data("bkToggle",new h(this,b))})},a.fn.bkToggle.defaults=h.defaults,jQuery(function(a){b.autoInitialize&&a("."+h.defaults.className).bkToggle()})}(jQuery);


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "barekit",
 3 |   "title": "BareKit",
 4 |   "version": "0.7.0",
 5 |   "description": "A bare minimum responsive framework",
 6 |   "keywords": [
 7 |     "responsive",
 8 |     "framework"
 9 |   ],
10 |   "homepage": "https://trevanhetzel.github.io/barekit",
11 |   "bugs": "https://github.com/trevanhetzel/barekit/issues",
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "git://github.com/trevanhetzel/barekit.git"
15 |   },
16 |   "dependencies": {},
17 |   "devDependencies": {
18 |     "grunt": "~0.4.1",
19 |     "grunt-autoprefixer": "~0.7.3",
20 |     "grunt-contrib-sass": "~0.7.3",
21 |     "grunt-contrib-uglify": "~0.5.0",
22 |     "grunt-contrib-watch": "~0.5.1",
23 |     "gulp": "^3.8.2",
24 |     "gulp-autoprefixer": "0.0.7",
25 |     "gulp-concat": "^2.2.0",
26 |     "gulp-stylus": "^1.0.2",
27 |     "gulp-uglify": "^0.3.1",
28 |     "grunt-contrib-concat": "^0.5.0",
29 |     "grunt-contrib-qunit": "^0.5.2",
30 |     "grunt-docco": "^0.3.3"
31 |   },
32 |   "licenses": [
33 |     {
34 |       "type": "MIT",
35 |       "url": "https://github.com/trevanhetzel/barekit/blob/master/LICENSE"
36 |     }
37 |   ]
38 | }
39 | 


--------------------------------------------------------------------------------
/spec/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>QUnit Example</title>
 6 |     <link rel="stylesheet" href="../bower_components/qunit/qunit/qunit.css">
 7 | </head>
 8 | <body>
 9 |     <div id="qunit"></div>
10 |     <div id="qunit-fixture"></div>
11 |     <script src="../bower_components/jquery/dist/jquery.js"></script>
12 |     <script src="../bower_components/qunit/qunit/qunit.js"></script>
13 |     <script src="../js/barekit.js"></script>
14 |     <script src="tests.js"></script>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/spec/tests.js:
--------------------------------------------------------------------------------
 1 | module('Barekit');
 2 | 
 3 | test('core', function() {
 4 |     ok(window.Barekit);
 5 | });
 6 | 
 7 | module('Accordion');
 8 | 
 9 | test('should be a jquery plugin', function() {
10 |     ok($.fn.bkAccordion);
11 | });


--------------------------------------------------------------------------------
/src/modules/accordion.js:
--------------------------------------------------------------------------------
  1 | var Accordion = function () {
  2 | 	this.init.apply(this, arguments);
  3 | };
  4 | 
  5 | Accordion.defaults = {
  6 | 	className: 'accordion',
  7 | 	multiExpand: false,
  8 | 	panelSelector: 'dd',
  9 | 	triggerSelector: 'dt',
 10 | 	activeTrigger: 'accordion-trigger--open',
 11 | 	activePanel: 'accordion-panel--open'
 12 | };
 13 | 
 14 | Accordion.prototype.init = function (el, options) {
 15 | 	// Store a reference to the jQuery element
 16 | 	this.$el = $(el);
 17 | 
 18 | 	// Set the options
 19 | 	this.options = $.extend({}, Accordion.defaults, options, this.$el.data('options'));
 20 | 
 21 | 	// Add the class
 22 | 	this.$el.addClass(this.options.className);
 23 | 
 24 | 	this.$el.on('click.bk.accordion', $.proxy(this.onClick, this));
 25 | };
 26 | 
 27 | Accordion.prototype.onClick = function (e) {
 28 |   var $target = $(e.target);
 29 | 
 30 |   //prevent default behaviour on non-absolute links
 31 |   if ($target.is('a')) {
 32 |     var href = $target.attr("href");
 33 |     if ($target.attr("href") == "#") {
 34 |       e.preventDefault();
 35 |     }
 36 |   }
 37 | 
 38 |   //find the dt parent node
 39 |   while($target.length && !$target.is('dt')) {
 40 |     $target = $target.parent();
 41 |   }
 42 | 
 43 |   if ($target.length) {
 44 |     var $content = $target.next('dd');
 45 |     this.processOptions($target, $content);
 46 |   }
 47 | };
 48 | 
 49 | Accordion.prototype.processOptions = function ($target, $content) {
 50 | 	var $panel = this.$el.find(this.options.panelSelector),
 51 | 		$trigger = this.$el.find(this.options.triggerSelector),
 52 | 		activeTrigger = this.options.activeTrigger,
 53 | 		activePanel = this.options.activePanel;
 54 | 
 55 | 	if (this.options.multiExpand === true) {
 56 | 		// Trigger active class
 57 | 		$target.toggleClass(activeTrigger);
 58 | 		// Panel active class
 59 | 		$content.toggleClass(activePanel);
 60 | 	} else {
 61 | 		// Remove all trigger active classes
 62 | 		$trigger.removeClass(activeTrigger);
 63 | 		// Trigger active class
 64 | 		$target.addClass(activeTrigger);
 65 | 
 66 | 		// Remove all panel active classes
 67 | 		if (!$content.hasClass(activePanel)) {
 68 | 			$panel.removeClass(activePanel);
 69 | 		}
 70 | 		// Panel active class
 71 | 		$content.toggleClass(activePanel);
 72 | 	}
 73 | };
 74 | 
 75 | Accordion.prototype.destroy = function () {
 76 | 	this.$el.off('.accordion');
 77 | };
 78 | 
 79 | Bk.Accordion = Accordion;
 80 | 
 81 | // Expose as a jQuery Plugin
 82 | $.fn.bkAccordion = function (options) {
 83 | 	return this.each(function () {
 84 | 		var $el = $(this);
 85 | 		// Check if it is already set up
 86 | 		if (!$el.data('bkAccordion')) {
 87 | 			$el.data('bkAccordion', new Accordion(this, options));
 88 | 		}
 89 | 	});
 90 | };
 91 | 
 92 | // Allow defaults to be accessed via a common jQuery pattern
 93 | $.fn.bkAccordion.defaults = Accordion.defaults;
 94 | 
 95 | // Auto-initialize if set
 96 | jQuery(function ($) {
 97 | 	if (Bk.autoInitialize) {
 98 | 		$('.' + Accordion.defaults.className).bkAccordion();
 99 | 	}
100 | });


--------------------------------------------------------------------------------
/src/modules/core.js:
--------------------------------------------------------------------------------
1 | var Bk;
2 | 
3 | window.Barekit = Bk = {
4 | 	autoInitialize: true
5 | };
6 | 


--------------------------------------------------------------------------------
/src/modules/dropdown-nav.js:
--------------------------------------------------------------------------------
  1 | var Dropdown = function () {
  2 | 	this.init.apply(this, arguments);
  3 | };
  4 | 
  5 | Dropdown.defaults = {
  6 | 	className: 'dropdown-nav',
  7 | 	click: false,
  8 | 	clickClass: 'click-setting',
  9 | 	activeTrigger: 'dropdown-trigger--open',
 10 | 	activeClass: 'dropdown--open'
 11 | };
 12 | 
 13 | Dropdown.prototype.init = function (el, options) {
 14 | 	// Store a reference to the jQuery element
 15 | 	this.$el = $(el);
 16 | 
 17 | 	var $trigger = this.$el.find('li:has(ul)');
 18 | 
 19 | 	// Set the options
 20 | 	this.options = $.extend({}, Dropdown.defaults, options, this.$el.data('options'));
 21 | 
 22 | 	// Add the class
 23 | 	this.$el.addClass(this.options.className);
 24 | 
 25 | 	if (this.options.click == true) {
 26 | 		// Cancel out the CSS hover functionality
 27 | 		$trigger.addClass(this.options.clickClass);
 28 | 		$trigger.on('click.bk.dropdown', $.proxy(this.remove, this));
 29 | 
 30 | 		//mouse click listener to close the dropdown if clicked outside
 31 |     self = this;
 32 |     $(document).on('click', function(e){
 33 |       $('.' + self.options.activeTrigger).each(function(){
 34 |         self.hide($(this), e);
 35 |       });
 36 |     });
 37 | 
 38 |     //keyboard listener to close the dropdown if esc is pressed
 39 |     $(document).keyup(function(e) {
 40 |       if(e.keyCode === 27){
 41 |         $('.' + self.options.activeTrigger).each(function(){
 42 |           self.hide($(this), 'undefined');
 43 |         });
 44 |       }
 45 |     });
 46 | 	}
 47 | };
 48 | 
 49 | Dropdown.prototype.hide = function($el, e) {
 50 |   if( e === 'undefined' || ($(e.target).parents('ul.' + this.options.className)[0] !== $el.parents('ul.' + this.options.className)[0])){
 51 |     $el.removeClass(this.options.activeTrigger);
 52 |     $el.children('ul').removeClass(this.options.activeClass);
 53 |   }
 54 | };
 55 | 
 56 | Dropdown.prototype.remove = function (e) {
 57 | 	var $this = $(e.currentTarget),
 58 |     $menu = $this.children('ul'),
 59 |     $target = $(e.target);
 60 | 
 61 |   if(!$target.is('a')){
 62 |     e.preventDefault();
 63 |   }
 64 | 
 65 | 	$this.removeClass(this.options.className);
 66 | 
 67 | 	this.doDropdown($this, $menu);
 68 | };
 69 | 
 70 | Dropdown.prototype.doDropdown = function ($this, $menu) {
 71 | 	$this.toggleClass(this.options.activeTrigger);
 72 | 	$menu.toggleClass(this.options.activeClass);
 73 | };
 74 | 
 75 | Dropdown.prototype.destroy = function () {
 76 | 	this.$el.off('.dropdown');
 77 | };
 78 | 
 79 | Bk.Dropdown = Dropdown;
 80 | 
 81 | // Expose as a jQuery Plugin
 82 | $.fn.bkDropdown = function (options) {
 83 | 	return this.each(function () {
 84 | 		var $el = $(this);
 85 | 		// Check if it is already set up
 86 | 		if (!$el.data('bkDropdown')) {
 87 | 			$el.data('bkDropdown', new Dropdown(this, options));
 88 | 		}
 89 | 	});
 90 | };
 91 | 
 92 | // Allow defaults to be accessed via a common jQuery pattern
 93 | $.fn.bkDropdown.defaults = Dropdown.defaults;
 94 | 
 95 | // Auto-initialize if set
 96 | jQuery(function ($) {
 97 | 	if (Bk.autoInitialize) {
 98 | 		$('.' + Dropdown.defaults.className).bkDropdown();
 99 | 	}
100 | });
101 | 


--------------------------------------------------------------------------------
/src/modules/modal.js:
--------------------------------------------------------------------------------
  1 | var Modal = function () {
  2 | 	this.init.apply(this, arguments);
  3 | };
  4 | 
  5 | Modal.defaults = {
  6 | 	className: 'modal-trigger',
  7 | 	modal: '.modal',
  8 | 	close: '.modal-close',
  9 | 	bg: 'modal-bg',
 10 | 	openClass: 'modal-open'
 11 | };
 12 | 
 13 | Modal.prototype.init = function (el, options) {
 14 | 	var self = this;
 15 | 
 16 | 	// Store a reference to the jQuery element
 17 | 	this.$el = $(el);
 18 | 
 19 | 	// Set the options
 20 | 	this.options = $.extend({}, Modal.defaults, options, this.$el.data('options'));
 21 | 
 22 | 	// Add the class
 23 | 	this.$el.addClass(this.options.className);
 24 | 
 25 | 	$(document)
 26 | 		.on('click.bk.modal', function (e) {
 27 | 			self.closeModal();
 28 | 		})
 29 | 		.on('click.bk.modal', '.' + this.options.className, function (e) {
 30 | 			e.stopPropagation();
 31 | 			e.preventDefault();
 32 | 
 33 | 			if ($(e.currentTarget).data("options").modalId === self.options.modalId) {
 34 | 				self.onClick();
 35 | 			}
 36 | 		})
 37 | 		.on('click.bk.modal', this.options.modal, function (e) {
 38 | 			e.stopPropagation();
 39 | 			e.preventDefault();
 40 | 		})
 41 | 		.on('keyup.bk.modal', function (e) {
 42 | 			if (e.keyCode === 27) {
 43 | 				self.closeModal();
 44 | 			}
 45 | 		});
 46 | 
 47 | 	$(this.options.close).on('click.bk.modal', function () {
 48 | 		self.closeModal();
 49 | 	});
 50 | };
 51 | 
 52 | Modal.prototype.onClick = function (e) {
 53 | 
 54 | 	var $dest = $('#' + this.options.modalId);
 55 | 
 56 | 	this.openModal($dest);
 57 | };
 58 | 
 59 | Modal.prototype.openModal = function($dest) {
 60 | 	// Add class to body for overlay
 61 | 	$('body').addClass(this.options.bg);
 62 | 	// Add open class to modal
 63 | 	$dest.addClass(this.options.openClass);
 64 | };
 65 | 
 66 | Modal.prototype.closeModal = function () {
 67 | 	// Remove class from body to remove overlay
 68 | 	$('body').removeClass(this.options.bg);
 69 | 	// Remove open class from modal
 70 | 	$(this.options.modal).removeClass(this.options.openClass);
 71 | };
 72 | 
 73 | Modal.prototype.destroy = function () {
 74 | 	$(document).off('.modal');
 75 | 	$(this.options.close).off('.modal');
 76 | };
 77 | 
 78 | Bk.Modal = Modal;
 79 | 
 80 | // Expose as a jQuery Plugin
 81 | $.fn.bkModal = function (options) {
 82 | 	return this.each(function () {
 83 | 		var $el = $(this);
 84 | 		// Check if it is already set up
 85 | 		if (!$el.data('bkModal')) {
 86 | 			$el.data('bkModal', new Modal(this, options));
 87 | 		}
 88 | 	});
 89 | };
 90 | 
 91 | // Allow defaults to be accessed via a common jQuery pattern
 92 | $.fn.bkModal.defaults = Modal.defaults;
 93 | 
 94 | // Auto-initialize if set
 95 | jQuery(function ($) {
 96 | 	if (Bk.autoInitialize) {
 97 | 		$('.' + Modal.defaults.className).bkModal();
 98 | 	}
 99 | });
100 | 


--------------------------------------------------------------------------------
/src/modules/off-canvas.js:
--------------------------------------------------------------------------------
 1 | var OffCanvas = function () {
 2 | 	this.init.apply(this, arguments);
 3 | };
 4 | 
 5 | OffCanvas.defaults = {
 6 | 	className: 'off-canvas-contain',
 7 | 	trigger: '[class^="off-canvas-trigger"]',
 8 | 	leftOpenClass: 'off-canvas--open-left',
 9 | 	rightOpenClass: 'off-canvas--open-right'
10 | };
11 | 
12 | OffCanvas.prototype.init = function (el, options) {
13 | 	var self = this;
14 | 	
15 | 	// Store a reference to the jQuery element
16 | 	this.$el = $(el);
17 | 
18 | 	// Set the options
19 | 	var options = this.options = $.extend({}, OffCanvas.defaults, options, this.$el.data('options'));
20 | 
21 | 	// Add the class
22 | 	this.$el.addClass(options.className);
23 | 
24 | 	$(document)
25 | 		.on('click.bk.offcanvas', function () {
26 | 			self.closeOffCanvas();
27 | 		})
28 | 		.on('click.bk.offcanvas', options.trigger, function (e) {
29 | 			var $this = $(this),
30 | 				$offCanvas = $this.parents('.off-canvas-contain');
31 | 
32 | 			e.stopPropagation();
33 | 			e.preventDefault();
34 | 
35 | 			if ($offCanvas.hasClass(options.leftOpenClass) || $offCanvas.hasClass(options.rightOpenClass)) {
36 | 				self.closeOffCanvas(options);
37 | 			} else {
38 | 				self.openOffCanvas(options, $this, $offCanvas);
39 | 			}
40 | 		})
41 | 		.on('click.bk.offcanvas', '.off-canvas-left', function (e) {
42 | 			e.stopPropagation();
43 | 		})
44 | 		.on('click.bk.offcanvas', '.off-canvas-right', function (e) {
45 | 			e.stopPropagation();
46 | 		});
47 | };
48 | 
49 | OffCanvas.prototype.closeOffCanvas = function () {
50 | 	this.$el.removeClass('off-canvas--open-right').removeClass('off-canvas--open-left');
51 | };
52 | 
53 | OffCanvas.prototype.openOffCanvas = function (options, $this, $offCanvas) {
54 | 	if ($this.hasClass('off-canvas-trigger-left')) {
55 | 		$offCanvas.addClass(options.leftOpenClass);
56 | 	} else if ($this.hasClass('off-canvas-trigger-right')) {
57 | 		$offCanvas.addClass(options.rightOpenClass);
58 | 	}
59 | };
60 | 
61 | OffCanvas.prototype.destroy = function () {
62 | 	$(document).off(".offcanvas");
63 | };
64 | 
65 | Bk.OffCanvas = OffCanvas;
66 | 
67 | // Expose as a jQuery Plugin
68 | $.fn.bkOffCanvas = function (options) {
69 | 	return this.each(function () {
70 | 		var $el = $(this);
71 | 		// Check if it is already set up
72 | 		if (!$el.data('bkOffCanvas')) {
73 | 			$el.data('bkOffCanvas', new OffCanvas(this, options));
74 | 		}
75 | 	});
76 | };
77 | 
78 | // Allow defaults to be accessed via a common jQuery pattern
79 | $.fn.bkOffCanvas.defaults = OffCanvas.defaults;
80 | 
81 | // Auto-initialize if set
82 | jQuery(function ($) {
83 | 	if (Bk.autoInitialize) {
84 | 		$('.' + OffCanvas.defaults.className).bkOffCanvas();
85 | 	}
86 | });
87 | 


--------------------------------------------------------------------------------
/src/modules/tabs.js:
--------------------------------------------------------------------------------
 1 | var Tabs = function () {
 2 | 	this.init.apply(this, arguments);
 3 | };
 4 | 
 5 | Tabs.defaults = {
 6 | 	className: 'tabs',
 7 | 	panelClass: 'tabs-panels',
 8 | 	activeTrigger: 'tab-trigger--open',
 9 | 	activePanel: 'tab-panel--open'
10 | };
11 | 
12 | Tabs.prototype.init = function (el, options) {
13 | 	var self = this;
14 | 	
15 | 	// Store a reference to the jQuery element
16 | 	this.$el = $(el);
17 | 
18 | 	// Set the options
19 | 	this.options = $.extend({}, Tabs.defaults, options, this.$el.data('options'));
20 | 
21 | 	// Add the class
22 | 	this.$el.addClass(this.options.className);
23 | 
24 | 	this.$trigger = this.$el.find('li a');
25 | 
26 | 	this.$trigger.on('click.bk.tabs', function (e) {
27 | 		var $this = $(this);
28 | 
29 | 		e.preventDefault();
30 | 		
31 | 		self.doTabs($this);
32 | 	});
33 | };
34 | 
35 | Tabs.prototype.doTabs = function ($this) {
36 | 	var $panelGroup = $this.parent().parent().next('.' + this.options.panelClass),
37 | 		$panel = $panelGroup.children('li'),
38 | 		triggerPos = $this.parent().index(),
39 | 		$matchingPanel = $panel.eq(triggerPos);
40 | 
41 | 	// Remove all trigger active classes
42 | 	this.$trigger.parent().removeClass(this.options.activeTrigger);
43 | 
44 | 	// Trigger active class
45 | 	$this.parent().addClass(this.options.activeTrigger);
46 | 
47 | 	// Remove all panel active classes
48 | 	$panel.removeClass(this.options.activePanel);
49 | 
50 | 	// Panel active class
51 | 	$matchingPanel.addClass(this.options.activePanel);
52 | };
53 | 
54 | Tabs.prototype.destroy = function () {
55 | 	this.$trigger.off(".tabs");
56 | };
57 | 
58 | Bk.Tabs = Tabs;
59 | 
60 | // Expose as a jQuery Plugin
61 | $.fn.bkTabs = function (options) {
62 | 	return this.each(function () {
63 | 		var $el = $(this);
64 | 		// Check if it is already set up
65 | 		if (!$el.data('bkTabs')) {
66 | 			$el.data('bkTabs', new Tabs(this, options));
67 | 		}
68 | 	});
69 | };
70 | 
71 | // Allow defaults to be accessed via a common jQuery pattern
72 | $.fn.bkTabs.defaults = Tabs.defaults;
73 | 
74 | // Auto-initialize if set
75 | jQuery(function ($) {
76 | 	if (Bk.autoInitialize) {
77 | 		$('.' + Tabs.defaults.className).bkTabs();
78 | 	}
79 | });


--------------------------------------------------------------------------------
/src/modules/toggle.js:
--------------------------------------------------------------------------------
 1 | var Toggle = function () {
 2 | 	this.init.apply(this, arguments);
 3 | };
 4 | 
 5 | Toggle.defaults = {
 6 | 	className: 'toggle-trigger',
 7 | 	toggle: '',
 8 | 	activeTriggerClass: 'toggle-trigger-shown',
 9 | 	activeClass: 'toggle-shown',
10 | 	closeOnClick: false
11 | };
12 | 
13 | Toggle.prototype.init = function (el, options) {
14 | 	var self = this;
15 | 	
16 | 	// Store a reference to the jQuery element
17 | 	this.$el = $(el);
18 | 
19 | 	this.options = $.extend({}, Toggle.defaults, options, this.$el.data('options'));
20 | 
21 | 	// Add the class
22 | 	this.$el.addClass(this.options.className);
23 | 
24 | 	if (this.options.closeOnClick == true) {
25 | 		$(document).on('click', function (e) {
26 | 			$('#' + self.options.toggle).removeClass(self.options.activeClass);
27 | 		});
28 | 
29 | 		$('#' + this.options.toggle).on('click', function (e) {
30 | 			e.stopPropagation();
31 | 		});
32 | 	}
33 | 
34 | 	this.$el.on('click.bk.toggle', function (e) {
35 | 		var $this = $(this);
36 | 
37 | 		e.preventDefault();
38 | 		e.stopPropagation();
39 | 
40 | 		self.doToggle();
41 | 	});
42 | };
43 | 
44 | Toggle.prototype.doToggle = function () {
45 | 	var self = this,
46 | 		$target = $('#' + this.options.toggle);
47 | 
48 | 	// Toggle class on trigger element
49 | 	self.$el.toggleClass(this.options.activeTriggerClass);
50 | 
51 | 	// Toggle class on element desired to be shown/hidden
52 | 	$target.toggleClass(this.options.activeClass);
53 | };
54 | 
55 | Toggle.prototype.unToggle = function () {
56 | 	var self = this,
57 | 		$target = $('#' + this.options.toggle);
58 | 
59 | 	$target.removeClass(this.options.activeClass);
60 | };
61 | 
62 | Toggle.prototype.destroy = function () {
63 | 	this.$el.off(".toggle");
64 | };
65 | 
66 | Bk.Toggle = Toggle;
67 | 
68 | // Expose as a jQuery Plugin
69 | $.fn.bkToggle = function (options) {
70 | 	return this.each(function () {
71 | 		var $el = $(this);
72 | 		// Check if it is already set up
73 | 		if (!$el.data('bkToggle')) {
74 | 			$el.data('bkToggle', new Toggle(this, options));
75 | 		}
76 | 	});
77 | };
78 | 
79 | // Allow defaults to be accessed via a common jQuery pattern
80 | $.fn.bkToggle.defaults = Toggle.defaults;
81 | 
82 | // Auto-initialize if set
83 | jQuery(function ($) {
84 | 	if (Bk.autoInitialize) {
85 | 		$('.' + Toggle.defaults.className).bkToggle();
86 | 	}
87 | });


--------------------------------------------------------------------------------
/src/prefix.js:
--------------------------------------------------------------------------------
1 | /*!
2 |  * Barekit 0.7.0
3 |  *
4 |  * Copyright 2014 Trevan Hetzel. (http://trevan.coo)
5 |  * Licensed under the MIT license.
6 |  *
7 |  * http://trevanhetzel.github.io/barekit/
8 |  */
9 |  ;(function($) {


--------------------------------------------------------------------------------
/src/suffix.js:
--------------------------------------------------------------------------------
1 | }(jQuery));


--------------------------------------------------------------------------------