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.
Save time marking up a page with the straightforward mobile-first, responsive grid classes and breakpoint mixins.
BareKit comes with both Sass and Stylus stylesheets, so you can use and compile whichever you love.
There is no design or visual styles to BareKit. It's solely meant to serve as the backbone of your site's structure.
BareKit has been tested in all the modern desktop and mobile browsers and gracefully degrades back to IE8.
The best way to get BareKit up and running on a project is to install via Bower. You shouldn't ever touch the source anyway, so with Bower it's easy to get the latest updates.
First, make sure you have Bower installed. Then you can add this line to a bower.json file "barekit": "~0.6.2" or simply do a bower install barekit.
If you don't want to use Bower you can always download the source from GitHub.
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).
If you installed jQuery and BareKit using Bower, the paths would look something like this:
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/barekit/js/barekit.min.js"></script>
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.
Again, if you installed via Bower, the @import rule would look something like this:
// Import BareKit
@import "bower_components/barekit/css/barekit";
Using BareKit in this way allows you to compile it using your own preferred pre-processor, task runner, compression style, etc.
The other way to use the BareKit CSS is, of course, to just reference it directly in your markup.
<link rel="stylesheet" href="bower_components/barekit/css/barekit.css">
BareKit doesn't come with a ton of things that you'll want to overwrite, since it is very much a bare framework with no presentational styles. However, you can change things like the grid offset, breakpoints, off-canvas width, etc. To do so, you'll need to create a _settings.scss or _settings.styl partial in your CSS directory.
A list of all the variables used in the core code can be found here. It's recommmended to just copy that file and simply uncomment and change the variables you need to.
BareKit comes with no styles, other than base positioning and display properties. This is to keep the framework and structure of your site completely independent from your own custom styles.
The best practice for styling elements further is to add your own classes to elements and scope your styling to your custom classes.
All of the JavaScript modules are set up to instantiate whenever a corresponding class name is found in the DOM. This makes it easy to rock out functionality without ever having to write any lines of JavaScript. The modules are also set up as jQuery plugins, though, so if you need to instantiate something (if you create an element after the DOM is loaded, for example), you can still do so.
Each JavaScript module in this Usage section lists the appropriate method to call to instantiate the module.
Marking up the grid requires a .row element to wrap columns. Columns are defined using the .has-gutter class and widths are defined using the .sm-*, .md-* and .lg-* classes. The grid is developed mobile-first, so the .sm-* classes get applied by default (from small up), .md-* get applied once the medium breakpoint is reached, and .lg-* get applied in the large breakpoint.
1
11
2
10
3
9
4
8
5
7
6
6
7
5
8
4
9
3
10
2
11
1
You might be wondering why an extra .has-gutter class is needed to define columns. Simple answer: to allow you to also use the width classes out of "grid" context. If you don't want the box model (float and padding) properties of the true grid columns, you can just leave off the .has-gutter class and simply use the width classes.
Creating an offset between two columns (a gap to the left) is easily done using the .sm-offset-*, .md-offset-* and .lg-offset-* classes. For example, an element with the classes .lg-8 .lg-offset-1 would display as eight columns with a one column gap to the left at the large breakpoint.
BareKit also supports "half" sizes for both column widths and offsets.
The breakpoints at which the grid classes take affect can be overrode in the settings file. The default breakpoints are:
small: 30em
medium: 50em
large: 64em
As of the current release, BareKit does not support the addition of more breakpoints.
BareKit has a media query mixin that makes referencing mobile-first media queries in your Sass or Stylus a breeze (the mixin is only avaiable if you're referencing the CSS with the Sass or Stylus @import rule).
The Sass mixin:
@include breakpoint(medium) {...}
The Stylus mixin:
+breakpoint(medium) {...}
The mixin currently only takes medium and large values for the parameter (small is the default). These are directly based off of the breakpoint values in your _settings.scss or _settings.styl file.
An accordion must be marked up using a dl list with dts with anchors for the "triggers" and dds for the content.
When a content panel is open, it's associated "trigger" dt gets a class added of .accordion-trigger--open. The open panel itself gets a class of .accordion-panel--open.
<dl class="accordion" data-options='{ "multiExpand": true }'>
- Accordion title 1
- Accordion content 1
- Accordion title 2
- Accordion content 2
- Accordion title 3
- Accordion content 3
</dl>Accordions have one option that can be set to true or false (or left off): multiExpand. This option dictates whether or not multiple content panels can be open at the same time. The option is set with a data-options attribute on the dl:
<dl class="accordion" data-options='{ "multiExpand": true }'>The dropdown navigation component is an unordered list with support for nested unordered lists that appear on hover or click (an almost CSS only dropdown).
An option to trigger the dropdown on click can be set on the parent ul via a data-options attribute. If set to true, the "open" list item gets a class of .dropdown-trigger--open added, otherwise if the option is not set or set to false, the dropdown is all handled with CSS display properties.
<ul class="dropdown-nav" data-options='{ "click": false }'>
-
Link 1
-
Link 2
-
Link 3
-
Link 4
</ul>
<ul class="dropdown-nav" data-options='{ "click": true }'>
-
Link 1
-
Link 2
-
Link 3
-
Link 4
</ul>
BareKit doesn't have much in the way of forms, but it does set up all checkboxes and radios with a base style. It uses a technique of hiding the inputs and using pseudo-elements instead that's applied globally that allows you to get away from the default browser styles.
To use these bare custom styles, you must wrap your input in a label with a class of .checkbox or .radio, repsectively, and add a span after the input with your actual label text.
The responsive modal is a base popup modal triggered by any element you set. It does not contain any transitions or fades (you can always do that with CSS!).
<a href="#" class="modal-trigger" data-options='{ "modalId": "example-modal" }'>Trigger modal</a>
The off-canvas component in BareKit uses a simple class toggling technique to alter the position of some elements with CSS when the class is active.
For the off-canvas to work correctly, a .off-canvas-contain element must contain everything, including both the off-canvas and the content that will get pushed over when the off-canvas is open. For a typical mobile off-canvas layout, for example, this element would typically be the body.
I am content off-canvas.
Trigger
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.
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.
BareKit supports up to two off-canvas elements on the same page, as long as one is "left" and one is "right". Defining the direction in which they open is done by setting suffixing the .off-canvas- and .off-canvas-trigger- classes with either left or right.
Example with two off-canvas elements
I am content off-canvas to the left.
I am content off-canvas to the right.
Left trigger
Right trigger
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.
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.
Tabs consist of two unordered lists: one for the "triggers" and one for the actual content that gets hidden/shown. To create a tab component, you just need a ul with a class of .tabs with list items and anchors. Then another ul with a class of .tabs-panels is required with list items that display the content. The active panel is determined by the position in the unordered list. For example, clicking the third tab will display the third content panel.
- Tab content 1
- Tab content 2
- Tab content 3
The toggle component is a simple way to show/hide items on a page. When clicking on a "trigger", it simply shows/hides the specified element. The element to toggle is specified via a data-options attribute on the "trigger" element.
<a href="#" class="toggle-trigger" data-options='{ "toggle": "toggle-example" }'>Toggle</a>
Hello!
There are several reusable utility classes available in BareKit to make marking up a page faster and more consistent.
.left.right.text-left.text-center.text-right.no-bullets.clearfix.show-md.show-lg.hide-md.hide-lg