Introduction

BACON/strip was created to be a completely customizable, lightweight responsive framework. Built with Sass, this framework allows you to customize everything, from how you name the selectors for containers in the grid, to the prefixes used for tools and plugins. This ability was initially created to be able to easily retrofit an existing grid system, but it also allows you to show a little of your own style in your code (the container for this page has had its selector renamed to .bacontainer).

The framework also provides an easy way to create plugins to enhance its usefulness. Although it is simple and lightweight, BACON/strip can easily be extended to suit your unique needs.

Base Components

BACON/strip contains only the essential base components needed to build a responsive site. It includes a grid and default styling for many HTML elements, although that styling can be easily customized by editing the base variables.

Grid

The grid in BACON/strip is a responsive grid which fluidly transitions between breakpoints to allow you to style your HTML to adapt to different sizes of display.

By default, the grid container has a maximum width of 1075px, but this is easily changed using Sass.

<div class="container">
    <div class="row">
        <div class="one column">One</div>
        <div class="eleven columns">Eleven</div>
    </div>
    <div class="row">
        <div class="two columns">Two</div>
        <div class="ten columns">Ten</div>
    </div>
    <div class="row">
        <div class="three columns">Three</div>
        <div class="nine columns">Nine</div>
    </div>
    <div class="row">
        <div class="four columns">Four</div>
        <div class="eight columns">Eight</div>
    </div>
    <div class="row">
        <div class="five columns">Five</div>
        <div class="seven columns">Seven</div>
    </div>
    <div class="row">
        <div class="six columns">Six</div>
        <div class="six columns">Six</div>
    </div>
</div>

You can also define columns by helper selectors:

<div class="container">
    <div class="row">
        <div class="one-half column">one-half</div>
        <div class="one-half column">one-half</div>
    </div>
    <div class="row">
        <div class="one-third column">one-third</div>
        <div class="one-third column">one-third</div>
        <div class="one-third column">one-third</div>
    </div>
    <div class="row">
        <div class="one-quarter column">one-quarter</div>
        <div class="one-quarter column">one-quarter</div>
        <div class="one-quarter column">one-quarter</div>
        <div class="one-quarter column">one-quarter</div>
    </div>
</div>

Offsets are also available:

<div class="container">
    <div class="row">
        <div class="ten columns offset-by-one">offset-by-one</div>
    </div>
    <div class="row">
        <div class="eight columns offset-by-two">offset-by-two</div>
    </div>
    <div class="row">
        <div class="six columns offset-by-three">offset-by-three</div>
    </div>
    <div class="row">
        <div class="four columns offset-by-four">offset-by-four</div>
    </div>
    <div class="row">
        <div class="two columns offset-by-five">offset-by-five</div>
    </div>
    <div class="row">
        <div class="one column offset-by-six">offset-by-six</div>
    </div>
    <div class="row">
        <div class="one column offset-by-seven">offset-by-seven</div>
    </div>
    <div class="row">
        <div class="one column offset-by-eight">offset-by-eight</div>
    </div>
    <div class="row">
        <div class="one column offset-by-nine">offset-by-nine</div>
    </div>
    <div class="row">
        <div class="one column offset-by-ten">offset-by-ten</div>
    </div>
    <div class="row">
        <div class="one column offset-by-eleven">offset-by-eleven</div>
    </div>
</div>

Columns may also be nested:

<div class="container">
    <div class="row">
        <div class="one-half column">Parent
            <div class="container">
                <div class="row">
                    <div class="eight columns offset-by-two">Child</div>
                </div>
            </div>
        </div>
        <div class="one-half column">Parent
            <div class="container">
                <div class="row">
                    <div class="one-quarter column">Child</div>
                    <div class="one-quarter column">Child</div>
                    <div class="one-quarter column">Child</div>
                    <div class="one-quarter column">Child</div>
                </div>
            </div>
        </div>
    </div>
</div>

Typography

Lists

Code/Pre

Code styling is included. Wrap code in a <code> tag, it will show like this. You can add blocks of code by wrapping a <code> tag with a <pre> tag. This will preserve whitespace, including tabs.

function print_some_pretty_great_code () {
    echo "Done.";
}

<pre><code>
function print_some_pretty_great_code () {
    echo "Done.";
}
</code></pre>

Forms

<form>
    <div class="row">
        <div class="six columns">
            <label for="email">Email Address</label>
            <input class="bs-full-width" type="email" placeholder="test@test.com" id="email">
        </div>
        <div class="six columns">
            <label for="category">Inquiry category</label>
            <select class="bs-full-width" id="category">
                <option value="Option 1">Quote Request</option>
                <option value="Option 2">Support Request</option>
                <option value="Option 3">Other</option>
            </select>
        </div>
    </div>
    <label for="message">Message</label>
        <textarea class="bs-full-width" placeholder="Message text..." id="mesage"></textarea>
        <label class="bs-pull-right">
            <input type="checkbox">
            <span class="label-body">Send a yourself a copy</span>
        </label>
    <input class="button button-primary" type="submit" value="Submit">
</form>

<!-- Always wrap checkbox and radio inputs in a label and use a <span class="label-body"> inside to style -->

<!-- Note: The class .bs-full-width (default selector) is a utility class shorthand for css property width: 100% -->

Customizing

BACON/strip is created to be simple to use, but it is also very customizable with Sass. You can easily change the primary colour which automatically styles many elements throughout the site, or even customize the class names used for containers, rows, and columns.

Base Components

You can create your own definitions for nearly all of the variables in the base/_variables.scss file. These definitions customize the styles and classes used throughout the stylesheet that is generated through BACON/strip.

The comments and variable names in base/_variables.scss help guide you toward understanding what they are for and how they are used, but there are some worth highlighting:

Breakpoints

There are 5 defined breakpoints in BACON/strip, and you can customize the widths to suit your needs. These breakpoints are used to set up media queries, media shorthand variables, and activate the responsive grid. The defaults are listed below, but you can change them by defining the width you want before @import "BACON/strip";

• $bp-larger-than-mobile: 400px;
• $bp-larger-than-phablet: 550px;
• $bp-larger-than-tablet: 750px;
• $bp-larger-than-desktop: 1000px;
• $bp-larger-than-desktophd: 1200px;

By default, the grid activates at the tablet breakpoint. This can be changed by setting the $grid-active variable to a different media shorthand variable. The default is $grid-active: $media-gt-tablet; but you could change it to $grid-active: $media-gt-phablet to activate the grid on the phablet breakpoint.

Buttons

To be sure that your custom button styles are available for all element types, include all element definitions when you extend the button class. Here is a good starting point if you wanted to create a .button-red class:

// Red Button Class
.button-red, 
input[type="submit"].button-red, 
input[type="reset"].button-red, 
input[type="button"].button-red {
  @extend .button;

  color: #FFF;
  background-color: #F00;
  border-color: darken(#F00, 20%);
}

Media Queries

There are some media shorthand variables defined to make it easier for you to define styles based on defined breakpoints. They are also used within the grid so that it responds to any changes you've made to the default breakpoint sizes. You can use these shorthand variables within media queries in your styles:

Target a Specific Breakpoint

$media-*breakpoint* allows you to target a specific breakpoint for full control.

Greater Than a Breakpoint

$media-gt-*breakpoint* allows you to target breakpoints larger than the breakpoint's definition.

Less Than a Breakpoint

$media-lt-*breakpoint* allows you to target breakpoints smaller than the breakpoint's definition.

h1 {
    
    font-size: 3 rem;

    // Mobile Styles
    @media #{$media-mobile} {
        font-size: 2rem;
    }

    // Larger than Desktop Styles 
    @media #{$media-gt-desktop} {
        font-size: 3.5rem;
    }

    // Smaller than Tablet Styles
    @media #{$media-lt-tablet} {
        font-size: 2.25rem;
    }
}

Note: You will need to use interpolation when using these variables as part of selectors (or @media queries). In Sass, nesting the media queries within the element you're customizing for a breakpoint allows you to see all of the styles for that element in the same place.

Plugins

BACON/strip contains only the essential base components needed to build a responsive site, but it also includes a few default plugins to solve some common problems.

Breakpoint Utilities

The Breakpoint Utilities plugin provides some simple classes allowing you to show and hide elements depending on the visible breakpoint. You can hide elements on specific breakpoints (with widths you can override) using the following classes:

• .hide-mobile
• .hide-phablet
• .hide-tablet
• .hide-desktop
• .hide-desktop-hd

Similar classes are used to show an element, with a suffix for how you want the element to display. For example, .show-desktop-block shows the element with display: block; in the desktop breakpoint. The display suffixes include .show-*breakpoint*-block, .show-*breakpoint*-inline, and .show-*breakpoint*-inline-block.

Non-responsive Columns

Non-responsive columns can help you create grid layouts when the grid is inactive, usually on a mobile device. This allows you to create simple columns that do not change to block elements at the smallest screen sizes.

To use, rather than specifying the column layout of an element using the .column class, use the .nr-column class

// Non-responsive columns
<div class="row">
    <div class="six nr-columns">This column will always take up 50% of the row, 
        even when the grid is disabled</div>
    <div class="six nr-columns">This column will too!</div>
</div>
    
// Default, responsive columns
<div class="row">
    <div class="six columns">This column will take up 100% of the row when the grid is disabled, 
        but 50% when the grid is active</div>
    <div class="six columns">This column is also responsive!</div>
</div>

Responsive Media Wrappers

This plugin allows you to make embedded videos and other iframed media responsive. Wrap your embed in a .rmedia-wrapper and add a ratio class to the wrapper and they will be fully responsive in all viewport sizes. .r16x9 and .r4x3 ratios are available for common video ratios.

// Responsive Video
<div class="rmedia-wrapper r16x9">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/4M6qAMMqFhI" frameborder="0" allowfullscreen></iframe>
</div>

Creating Your Own

To create your own plugins, put your plugin .scss file in the BACON/bits folder and import it in your styles.scss file after the included plugins.

To ensure your plugins aren't overwritten by others, include the $plugins-prefix in your classes:

// Simple Border Plugin
#{$plugins-prefix}simple-border {
    border: 1px solid #000;
}

Thanks To

• BACON/strip started based on the Sass Version of Skeleton by Seth Coelen, adapting the Skeleton Responsive Boilerplate by Dave Gamache. I needed a bit more extensibility for my uses, which led to the creation of BACON/strip. Many thanks to Seth and Dave for their great work.
• BACON/strip incorporates normalize.css
• HTML5 Bones was used as a starting point for this information page.
• ASCII art in comments modified from http://www.asciiartfarts.com/20100817.html