1024px-Flatirons_Winter_Sunrise_edit_2

At appendTo, there are several things most of our responsive projects have in common:

  • We usually need a grid.
  • We use similar interactive elements like dropdowns, off-canvas navigation, toggling, accordions, etc.
  • We write the least amount of code possible.
  • We oftentimes have to support back to IE8.
  • We like to use object-oriented classes on elements to reuse things like float and text-align properties.

But there’s one thing that us visual design engineers don’t like: responsive frameworks. It’s not so much that we don’t like the idea of a framework to speed up our development, but rather we dislike the opinioniated specificity of most frameworks and, most of all, we dislike overriding the default styling that comes with most frameworks.

So that is why I set out to build the perfect framework for our needs. One that is responsive, easily incorporates JavaScript functionality, is modern (CSS3 all the way), and most importantly, one that gets the heck out of our way. With contributions from several appendTo team members, I am excited to announce the first public release of BareKit.

What BareKit is

BareKit is a super minimal, open source, responsive framework. Unlike most frameworks, it comes with zero “styling”. It uses CSS, but only for positioning and display properties. This is to keep the framework completely independent from your own custom styles. Once you include BareKit in a project it gets out of your way and it’s used by simply adding classes to your markup.

Even JavaScript modules are instantiated by simple classes on elements. You can always instantiate the JavaScript modules manually, but a big goal of mine for this framework was to be able to just write HTML and custom CSS and have the ability to “make things work” without touching any JavaScript.

The compiled CSS file is 10kb and the JavaScript file is only 7kb, so using BareKit is not a very big risk in the performance area. The amount of functionality it provides without the overhead of huge unused selectors and functionality has been a game changer for me. I’ve been using it on all of my new projects here at appendTo to speed up the time it takes to get a project rolling and create elements quickly, reusing as many components as possible.

What it can do

This initial release comes with the following features:

  • A responsive grid
  • Media query mixins
  • The ability to compile along with your custom Sass or Stylus, giving access to all of BareKit’s mixins and variables (which are customizable)
  • Accordions
  • Dropdown navigation
  • Base form styling for checkboxes and radios
  • Modals
  • Off-canvas
  • Tabs
  • Simple class toggling
  • Utility classes (positioning, text-align, list styling, clearing and showing/hiding)

Getting started with BareKit

We will be posting a more in-depth article in the near future on actually building a sample website with BareKit, but for now it is extremely easy to get setup and start using the framework. The BareKit website contains all the information you need to get setup (basically Bower is the preferred method of installation).

As I mentioned, this project is open source so any contributions in the form of pull requests or GitHub issues are totally appreciated.