Bare Bones

What Is It?

Bare Bones is a medium-sized CSS file packing quite the punch. It can help you build robust and responsive sites that look beautiful on any device. Bare Bones is built on three core principles:

Sturdy flex grid

Using CSS's flex property gives you the ability of a flex item to alter its dimensions to consume the space around it. No more float-based layouts!

Responsive down to mobile

Targeting the unpredictability of screen sizes, the row and column structure is a fully responsive layout, looking perfect on all devices.

Lovely UI component kit

Providing basic interface elements that have a modern look and feel, save development time, offer plenty of options, and fit nicely within all devices.

Container Size Options

Bare Bones gives your three container options for a greater degree of customization and to suit your project's layout needs. The default container is .flex-wrap which provides a standard responsive feel. There is a thinner option of .flex-wrap-narrow for a layout encumbering far less screen realestate and may be ideal for websites with simpler and minimalist content structures such as a blog. The last option is .flex-row-full which is a container always set to 95% of the viewport which provides a full width layout in any situation.

Give it a shot

• .flex-wrap
• .flex-wrap-full
• .flex-wrap-narrow

The Grid

UI Components

Buttons

Button classes can be applied to <input>, <a>, and <button>.

Every button requires the flex-btn class to work. After that, get creative with the available variety classes for a nice finishing touch.

Primary class options:
flex-btn-full
flex-btn-full-sm
flex-btn-(a size)
btn-frame
btn-round
btn-rounder
btn-flat
bdr-heavy

Color options: every button type uses the bg-(a color) class for a background color. The exception is btn-frame which requires a border color using bdr-(a border color).
default, grey, blue, darkblue, green, yellow, red, black

Button Markup

 	    			
 	    			<!-- Standard button -->
 	    			
 	    				<input type="submit" class="flex-btn bg-default"/>
 	    			

 	    			
 	    			<!-- Button colors -->
 	    			
 	    				<input type="submit" class="flex-btn bg-black"/>
 	    			
 	    			
 	    				<input type="submit" class="flex-btn bg-blue"/>
 	    			

 	    			
 	    			<!-- Round buttons -->
 	    			
 	    				<input type="submit" class="flex-btn btn-round bg-yellow"/>
 	    			
 	    			
 	    				<input type="submit" class="flex-btn btn-round bg-green"/>
 	    			

 	    			
 	    			<!-- flat buttons -->
 	    			
 	    				<input type="submit" class="flex-btn btn-flat bg-darkblue"/>
 	    			
 	    			
 	    				<input type="submit" class="flex-btn btn-flat bg-red"/>
 	    			

					
 	    			<!-- Border only buttons -->
 	    			
 	    				<input type="submit" class="flex-btn btn-round btn-frame bdr-grey"/>
 	    			
 	    			
 	    				<input type="submit" class="flex-btn btn-round btn-frame bdr-yellow bdr-heavy"/>
 	    			

 	    			
 	    			<!-- Button sizes -->
 	    			
 	    				<input type="submit" class="flex-btn-xs bg-grey"/>
 	    			
 	    			
 	    				<input type="submit" class="flex-btn-sm bg-darkblue"/>
 	    			
 	    			
 	    				<input type="submit" class="flex-btn-lrg bg-green"/>
 	    			
 	    			
 	    				<input type="submit" class="flex-btn-xl bg-yellow"/>
 	    			

					
 	    			<!-- Full width buttons-->
 	    			
 	    				<input type="submit" class="flex-btn-full bg-green"/>
 	    			
 	    			
 	    				<input type="submit" class="flex-btn-full-sm bg-red"/>
 	    			

					
 	    			<!-- Button variations -->
 	    			
 	    				<input type="submit" class="flex-btn-sm btn-flat bg-red"/>
 	    			
 	    			
 	    				<input type="submit" class="flex-btn-lrg btn-round btn-frame bdr-yellow"/>
 	    			
 	    			
 	    				<input type="submit" class="flex-btn-xl btn-flat btn-frame bdr-blue"/>
 	    			

 	    		

Forms

For the <form> tag, simply apply the flex-form class.

Form class options:
form-fill

For <input>, <select>, and <textarea> you'll need to apply the flex-input class. In addition, <textarea> required the ta-default class.

For <radio> and <checkbox> you'll need to apply either the radio or checbox class.

Getting Started

Bare Bones is so light-weight and quick to implement into any new or existing website. All you need is a parent wrapper class (see options below), one or more child rows, and within the rows, any number of columns that equate to 100. Each column class is prefixed with a "flex-c-" abbreviated for flex column and finally concatenated with its percent-based width.

Here is what a basic set up looks like.

Media Queries

Bare Bones uses a grand total of three media queries to construct the scalable grid. This sets up an ideal situation for a reliable and consistent website that scales effortlessly from desktop down to mobile. Bare Bones targets media queries using a min width specifier and only modifies that parent flex-wrap class. So while the main container is adjusting to the viewport, the percent-based columns respond wonderfully to their parent.

License & Log

Bare Bones (currently v1.0) is currently available for use on GitHub. The whole framework is free to use under the open-source MIT license. I'm very excited about the possibilities with CSS flex and would love to have a small community of contributors to Bare Bones!