Backbone is a simple to use HTML, LESS/CSS and JavaScript/jQuery responsive framework (or foundation/boilerplate) to help with rapid protyping and development of websites for use on Desktop, Laptops, Tablets and Mobile devices. As standard it includes a few default files and plugins, such as 'HTML5 Shiv', 'normalize.css', 'FontAwesome', 'respond.js', 'smoothscroll.js', 'placeholders.js', 'Edge Alerts', 'tipsy', 'popGrowl', 'Animations', 'ProBars', 'Responsive Tabs', 'Responsive Accordion', 'Responsive Toggle' and 'LiteBox'. Of course any of these files and plugins can be removed by simplying unlinking them to remove any unwanted bloat/load time. It also includes the Facebook API, Facebook Opengraph and Twitter Card HTML snippets, links to fav icons and apple icons in the 'assets/imgs' directory. As well as the conditional statement classes on the 'html' element.

Since most websites nowadays are accessed via portable devices such as Tablets and Mobiles, the whole Framework is built using CSS Media Queries. Since media queries do not work in older browsers such as Internet Explorer 8 and below we are using the 'respond.js,' polyfill as a fallback.

The Framework uses LESS and it's recommended to only use it in Development mode and compile all the LESS files into a minimized CSS file (provided and commented out), you can use LessTester to compile and minimize your code. The 'backbone-vars.less' file in the assets folder has various variables you can adjust to completely change the color scheme of your design such as document/browser color values, typography and forms etc to get you started.

All commonly used block elements default bottom margin is set to 20 pixels, these can adjusted by simply using the classes: bm-remove(0px), bm-smaller (5px), bm-small (10px), bm-medium (Default: 20px), bm-large (30px) and bm-larger (40px). If you wish to adjust the top margin of these elements as well, you can use the same class structure with a different prefix: tm-*.

It also uses the Box Model Fix which may require that you adjust to this style of programming and structuring if you haven't used it before.

There are various types of what we are calling 'quickers', which are handy for easily adjusting and styling elements, things such as margin/paddings, text alignment, text transformations/variants, element floating, element display, indentation and cursor symbols. Font sizes can also be adjusted by using the 'span' element and applying any of the font adjustment classes (font-xx-small, font-x-small, font-small, font-large, font-x-large and font-xx-large). All of these classes can be found in the 'backbone-frame.less' file under the '#Quickers' section.

As well as the use of classes in your HTML, there is also a 'backbone-mixins.less' file for quickly adding various styles to your CSS which include browser prefixes, this file is definitely worth a look!

Fixed grid layouts are used through the one-half, one-quarter, two-quarter, three-quarter, one-third and two-third classes. A container element must wrapped around these classes using the container class. For the last column, the last class should be applied to stop any page/template breakages. By default, there are style values with grid columns, you can add the boxed class to add a 20px padding, background and border (set in 'backbone-vars.less'), you can adjust the padding using the p-ten, p-twenty, p-thirty, p-fourty or p-fifty classes. Grid elements stack vertically when the viewport is less than 768 pixels.

Percent grid layouts are used through the one-half-percent, one-quarter-percent, two-quarter-percent, three-quarter-percent, one-third-percent and two-third-percent classes. For the last column, the last class should be applied to stop any page/template breakages. The boxed class can also be applied along with a p-* class to add padding. However, percentage grids differ from fixed grids in a few ways, first of all they are fluid to the containing element, meaning they can be placed within any element. They don't use a 20px gutter to separate columns and they do not stack vertically the same way as fixed grids do. To stack vertically in specific viewports, use the desktop-tablet or tablet-mobile class, depending on what device you wish for the elements to start stacking vertically. However, they will stack vertically when the viewport is less than 480 pixels (mobile).

As mentioned above, all percentage grids have no gutters, if you wish to add a gutter you can use the alpha (left gutter) and omega (right gutter) to add a 10px space to either side respecitvely. Since alpha/omega gutters are spaced with padding rather than margins (due to grid breakages using percentages over pixels), you cannot use these classes in conjunction with the boxed class as the boxed class will override the alpha/omega values. To over come this, simply place a one-whole-percent element with boxed p-* classes inside its parent column and remove the inner columns bottom margin with bm-remove.

Header 1 <h1>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus augue, volutpat tempus pretium sit amet, bibendum sed justo. In cursus volutpat felis quis lacinia. Nam eget aliquam est. Fusce vulputate turpis id lorem tincidunt, at laoreet lectus ultrices. Nullam non tristique mi. In sollicitudin a nisl vitae porttitor. Donec quis lorem rutrum, gravida lorem tempor, mattis purus. Cras sodales malesuada massa in rhoncus. Morbi sagittis odio iaculis justo condimentum dignissim.

Header 2 <h2>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus augue, volutpat tempus pretium sit amet, bibendum sed justo. In cursus volutpat felis quis lacinia. Nam eget aliquam est. Fusce vulputate turpis id lorem tincidunt, at laoreet lectus ultrices. Nullam non tristique mi. In sollicitudin a nisl vitae porttitor. Donec quis lorem rutrum, gravida lorem tempor, mattis purus. Cras sodales malesuada massa in rhoncus. Morbi sagittis odio iaculis justo condimentum dignissim.

Header 3 <h3>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus augue, volutpat tempus pretium sit amet, bibendum sed justo. In cursus volutpat felis quis lacinia. Nam eget aliquam est. Fusce vulputate turpis id lorem tincidunt, at laoreet lectus ultrices. Nullam non tristique mi. In sollicitudin a nisl vitae porttitor. Donec quis lorem rutrum, gravida lorem tempor, mattis purus. Cras sodales malesuada massa in rhoncus. Morbi sagittis odio iaculis justo condimentum dignissim.

Header 4 <h4>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus augue, volutpat tempus pretium sit amet, bibendum sed justo. In cursus volutpat felis quis lacinia. Nam eget aliquam est. Fusce vulputate turpis id lorem tincidunt, at laoreet lectus ultrices. Nullam non tristique mi. In sollicitudin a nisl vitae porttitor. Donec quis lorem rutrum, gravida lorem tempor, mattis purus. Cras sodales malesuada massa in rhoncus. Morbi sagittis odio iaculis justo condimentum dignissim.

Header 5 <h5>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus augue, volutpat tempus pretium sit amet, bibendum sed justo. In cursus volutpat felis quis lacinia. Nam eget aliquam est. Fusce vulputate turpis id lorem tincidunt, at laoreet lectus ultrices. Nullam non tristique mi. In sollicitudin a nisl vitae porttitor. Donec quis lorem rutrum, gravida lorem tempor, mattis purus. Cras sodales malesuada massa in rhoncus. Morbi sagittis odio iaculis justo condimentum dignissim.

Header 6 <h6>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus augue, volutpat tempus pretium sit amet, bibendum sed justo. In cursus volutpat felis quis lacinia. Nam eget aliquam est. Fusce vulputate turpis id lorem tincidunt, at laoreet lectus ultrices. Nullam non tristique mi. In sollicitudin a nisl vitae porttitor. Donec quis lorem rutrum, gravida lorem tempor, mattis purus. Cras sodales malesuada massa in rhoncus. Morbi sagittis odio iaculis justo condimentum dignissim.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus augue, volutpat tempus pretium sit amet, bibendum sed justo.

This is preformatted text

You can also use inline code by using the 'code' element like this.

Styling lists is as simple as applying 2 classes, either unstyled which removes any list style types, padding and margins. The other class inline forces all list items to one line. You can also apply circle, disk or square classes to the 'ul' element for different list style types.

It is also possible to adjust the left and right paddings of li elements using a set of classes, for the left/alpha padding: ap-smaller (5px), ap-small (10px), ap-medium (20px), ap-larger (30px) and ap-larger (40px). To adjust the right/omega padding, you can use the same class structure but by altering the prefix to op-*. To apply to both sides, alpha and omega, use the same class structure with the prefix aop-*.

Input, select and textarea elements come at a default width of 300 pixels, to adjust this you can apply either the w-small (180 pixels), w-medium (300 pixels), w-large (420 pixels) or w-full (100% of its container) classes. You can also increase the height, which by default is 40 pixels, by applying either the h-small (30 pixels), h-medium (40 pixels) or h-large (50 pixels) classes. Textarea heights for these classes are different from input and select elements, textareas by default are 120 pixels (h-medium), and are adjusted to 80 pixels (h-small) or 160 pixels (h-large). All these elements also stack vertically when the viewport is less than 768 pixels.

Buttons (as well as elements using the button class) come at a default width of 125 pixels, to adjust this you can apply either the w-small (100 pixels), w-medium (125 pixels), w-large (150 pixels) or w-full (100% of its container) classes. You can also increase the height, which by default is 40 pixels, by applying either the h-small (30 pixels), h-medium (40 pixels) or h-large (50 pixels) classes. If the text within a button spans larger than the width of the button, the button will increase to display the placeholder text inline. Button elements also stack vertically but not until the viewport is less than 480 pixels.

You can also adjust the font size to help match the sizes you apply for inputs and buttons using the classes: `f-small` (80%), `f-medium` (100%) and `f-large` (120%).

To implement, please refer to the Edge Alerts GitHub page for documentation.

There are few pre-set classes that are linked to how the tooltip is displayed. Below are 2 sets of examples showing tooltip positioning and it's display. Apply one of the classes to your element and then use the data-tooltip attribute with it's value of the text you wish to show in the tooltip. For Backbone there has been some slight customization to this plugin, and the addition of the plugin option 'fadeSpeed' has been added, which can be adjusted in the 'backbone.js' file on tooltips with 'fade' set to 'true', this speed is based in milliseconds. By default HTML is enabled and images are resized accordingly, however other elements may cause breakages or inconsistencies. Hover over the elements below to see the tooltip and it's class. For further customization, please refer to the tipsy website for documentation.

To implement, please refer to the popGrowl GitHub page for documentation.

To implement, please refer to the Animations GitHub page for documentation.

To implement, please refer to the ProBars GitHub page for documentation.

To implement, please refer to the Responsive Tabs GitHub page for documentation.

To implement, please refer to the Responsive Accordion GitHub page for documentation.

• Section One

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac fringilla nulla, sit amet consequat eros. Pellentesque pharetra blandit commodo. Phasellus massa nisl, feugiat ac bibendum et, dictum id ipsum. Quisque sit amet accumsan tortor. Etiam luctus, est ac iaculis posuere, justo elit aliquam risus, a interdum odio elit eleifend nisl. In vulputate lobortis lectus in eleifend. Etiam eget luctus sapien. Curabitur auctor volutpat enim sit amet vulputate. Nullam fringilla odio eu nisl tempus venenatis. Aliquam scelerisque ut lacus rhoncus hendrerit. Sed ut dolor et lorem faucibus imperdiet. Vivamus suscipit cursus sagittis. In sit amet dolor odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eget convallis lorem.

  Integer feugiat, nunc eu venenatis porttitor, tellus tortor sagittis enim, sed viverra mauris diam vel sem. Maecenas ac orci ipsum. Nunc pellentesque purus at neque mattis consectetur. Pellentesque bibendum eros ante, ut aliquam nunc vestibulum ac. Praesent dignissim nibh ac nisl tempor ultricies. Morbi vel dapibus mauris. Sed eu lorem non mauris vehicula posuere malesuada id ipsum. In tincidunt porta augue sit amet porttitor. Vivamus laoreet arcu vitae rhoncus tincidunt. Donec elementum turpis vitae sem feugiat tristique. Nulla vestibulum quis erat at commodo. Nunc sollicitudin, velit ut ultrices congue, nisi magna laoreet enim, sit amet pretium turpis sem ut est. Etiam nec blandit nisi. Maecenas tempor vehicula purus viverra pulvinar.

• Section Two

  Cras sagittis neque id tortor dictum tincidunt. Nulla volutpat cursus metus, sed pulvinar nibh vulputate a. Curabitur tristique pharetra elit quis tincidunt. Nulla sed libero hendrerit, condimentum velit tincidunt, sollicitudin tortor. Nulla volutpat lacinia tortor. Aenean auctor consectetur adipiscing. Proin venenatis, lacus in lacinia dapibus, urna lectus euismod erat, mollis vehicula diam elit sed est. Integer libero ligula, tincidunt eget tincidunt ut, dignissim quis sem. Sed interdum auctor lacus id malesuada. Aenean in mauris ac sapien auctor ultrices at pretium dui. Maecenas nec dictum turpis. Nam ipsum sapien, commodo at ligula ut, lobortis congue ante. Sed tincidunt dolor vitae libero congue pulvinar. In ultricies arcu vitae leo feugiat dignissim. Suspendisse potenti. Vivamus et ornare eros.

  Ut mattis tempor semper. Praesent felis urna, tempus ac lobortis in, aliquam eget metus. Nam imperdiet, augue sit amet vulputate tincidunt, dui libero ornare lacus, non adipiscing lacus dolor ac nulla. Maecenas ac lacinia neque. Praesent et risus ac massa egestas dapibus. Donec sit amet tellus vestibulum, viverra mi at, aliquet felis. Morbi luctus venenatis turpis eu egestas. Duis varius metus nec felis aliquet, vitae tincidunt arcu iaculis. Ut lacinia tempor felis ornare aliquam. Vestibulum convallis eleifend urna, ut placerat justo porta a. Curabitur porta massa lacus, ultrices pulvinar lorem volutpat egestas. Mauris odio arcu, semper tristique fringilla non, pretium in nunc. Pellentesque pharetra dui convallis odio scelerisque pellentesque.

• Section Three

  Mauris vel placerat dolor. Morbi mattis venenatis feugiat. Vivamus nunc diam, luctus id ipsum ut, tempor pharetra augue. Ut sagittis orci at posuere venenatis. Fusce at aliquam lacus. Sed id augue nisl. Nunc vitae ultricies dolor. Etiam rhoncus felis eget vulputate suscipit. Praesent convallis bibendum urna, ultricies consequat enim ullamcorper et. Fusce scelerisque dolor ut porta bibendum. Sed felis quam, vulputate cursus massa ac, sodales ullamcorper mauris.

  Maecenas sit amet tincidunt felis. Maecenas ut tortor posuere, faucibus leo non, auctor ante. Vivamus egestas lectus in mi aliquam, a sodales felis feugiat. Fusce eget pulvinar augue. Sed in leo id nibh egestas sollicitudin. Praesent a consectetur sem. Morbi posuere nisl libero, sed tempor quam viverra vitae. Nulla placerat semper tortor sollicitudin ultricies. Curabitur ac nunc felis. Nunc interdum convallis egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce et erat condimentum lorem mattis dignissim volutpat eget erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus consectetur varius arcu vitae rhoncus.

To implement, please refer to the Responsive Toggle GitHub page for documentation.

• Toggle One

  Integer feugiat, nunc eu venenatis porttitor, tellus tortor sagittis enim, sed viverra mauris diam vel sem. Maecenas ac orci ipsum. Nunc pellentesque purus at neque mattis consectetur. Pellentesque bibendum eros ante, ut aliquam nunc vestibulum ac. Praesent dignissim nibh ac nisl tempor ultricies. Morbi vel dapibus mauris. Sed eu lorem non mauris vehicula posuere malesuada id ipsum. In tincidunt porta augue sit amet porttitor. Vivamus laoreet arcu vitae rhoncus tincidunt. Donec elementum turpis vitae sem feugiat tristique. Nulla vestibulum quis erat at commodo. Nunc sollicitudin, velit ut ultrices congue, nisi magna laoreet enim, sit amet pretium turpis sem ut est. Etiam nec blandit nisi. Maecenas tempor vehicula purus viverra pulvinar.

• Toggle Two

  Ut mattis tempor semper. Praesent felis urna, tempus ac lobortis in, aliquam eget metus. Nam imperdiet, augue sit amet vulputate tincidunt, dui libero ornare lacus, non adipiscing lacus dolor ac nulla. Maecenas ac lacinia neque. Praesent et risus ac massa egestas dapibus. Donec sit amet tellus vestibulum, viverra mi at, aliquet felis. Morbi luctus venenatis turpis eu egestas. Duis varius metus nec felis aliquet, vitae tincidunt arcu iaculis. Ut lacinia tempor felis ornare aliquam. Vestibulum convallis eleifend urna, ut placerat justo porta a. Curabitur porta massa lacus, ultrices pulvinar lorem volutpat egestas. Mauris odio arcu, semper tristique fringilla non, pretium in nunc. Pellentesque pharetra dui convallis odio scelerisque pellentesque.

• Toggle Three

  Maecenas sit amet tincidunt felis. Maecenas ut tortor posuere, faucibus leo non, auctor ante. Vivamus egestas lectus in mi aliquam, a sodales felis feugiat. Fusce eget pulvinar augue. Sed in leo id nibh egestas sollicitudin. Praesent a consectetur sem. Morbi posuere nisl libero, sed tempor quam viverra vitae. Nulla placerat semper tortor sollicitudin ultricies. Curabitur ac nunc felis. Nunc interdum convallis egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce et erat condimentum lorem mattis dignissim volutpat eget erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus consectetur varius arcu vitae rhoncus.

To implement, please refer to the LiteBox GitHub page for documentation.

This best way to really start understanding Backbone is to start using it, look through the 'backbone-*.less' and the 'index.html' files to get a good understanding of how it all works and start creating a demo site to see how you find it!