burro

Fork on Github

burro is a Sass framework for building responsive layouts quickly and easily, and with few assumptions about style it let's you take the creative reign.

The goal of burro is to create a good building block for those new to Sass, and a solid foundation for developers who are more experienced but tired of writing the same layout code every time they start a new project.

This framework was created to do the heavy lifting, while compressing down to only 9kb. This lets you dig right into the design without having to worry about the setup.



Documentation

Getting Started

If you haven't yet begun working with Sass, head over to their home page and browse the documentation. Sass is extremely intuitive and is fairly easy to pick up, especially if you already have a good handle on CSS.

To process and compress your burro sheets into a single CSS file, use this console command: sass --watch style.scss:style.min.css for a compressed CSS output.

You'll mostly be working with two files in burro:

1. `_variables.scss` - You'll want to set this up at the beginning of your project so you can call on these as you work.

2. `style.scss` - This is where everything is hooked up, and where you'll write your extra CSS code or import any other CSS files

Understanding Style.scss

	@charset 'UTF-8';

	@import 'burro/utilities/variables';
	@import 'burro/mule';

These three lines don't need to be changed at all, it is merely calling the character set and pulling all the `.scss` files together.




	//@import 'stirrups/normalize';
	//@import 'stirrups/meyerrest';
	//@import 'stirrups/html5doctorreset';
	//@import 'stirrups/yuireset';

You can uncomment any of these lines to include it's respective reset.



	@include grid(3);

If you want to use the responsive grid pattern, make sure the above line is not commented out and put the number of columns you want in your grid as the argument. More about the grid under Utilities.

Understanding Variables.scss

The `variable.scss` handles the variables that control the entire framework. Since burro is OOCSS focused and the variables are all concentrated in the same place, it is very easy to make sweeping changes to your style with a minimum amount of effort. The variables that are *expected* be edited are explained below.



	$brandprimary:#018F8F;
	$brandsecondary:#F7AD70;

	$brandthird:$darkgrey;
	$brandfourth:$darkgrey;
	$brandfifth:$darkgrey;
	$brandsixth:$darkgrey;

This is the place to set branding colors. By default, the `$brandprimary` and `$brandsecondary` are the only two branding colors heavily involved in the framework. `$brandthird`, `$brandfourth`, `$brandfifth`, and `$brandsixth` are set aside as well, but by default only affect headings `h3` - `h6`.

	$black:#151414;
	$darkgrey:#3E3E3E;
	$lightgrey:#E4E4E4;

These are the neutral defaults. They are set to work well with general color schemes, but feel free to customize.

	$head1: 3em;
	$head2: 2.5em;
	$head3: 2.2em;
	$head4: 2em;
	$head5: 1.5em;
	$head6: 1.3em;

	$quote: 1em;
	$bigaside: 1.4em;
	$mediumaside: 1em;
	$smallaside: .8em;

	$brandfamily: "Open Sans", sans-serif;

The font-sizes are meant to stay concrete, but fiddling with them may be necessary. `$brandfamily` should be edited to match your favorite font-family (and don't forget to include your fonts in your markup).

The $pad variable sets the majority of the padding in the framework.

Default Behavior

burro has a large amount of default behavior. In the below cases, certain classes and/or HTML tags are expected to be used in order to take advantage of these behaviors. Most are straightforward, but I feel should be pointed out explicitly. Other default behavior is expected to come up organically and shouldn't need to be stated.

Aside

Tag: <aside>

Code: <aside>Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.</aside>

Sample:

Border

Class: .border

Code: <div class="border">Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.</div>

Sample:
Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.

Rounded-Borders

fully rounded

Class: .rounded

Code:<div class="border rounded">Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.</div>

Sample:
Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.


right-side rounded

Class: .rounded-right

Code: <div class="border rounded-right">\>Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.</div>

Sample:
Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.


left-side rounded

Class: .rounded-left

Code: <div class="border rounded-left">Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.</div>

Sample:
Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.


top-side rounded

Class: .rounded-top

Code: <div class="border rounded-top">Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.</div>

Sample:
Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.


bottom-side rounded

Class: .rounded-bottom

Code: <div class="border rounded-bottom">Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.</div>

Sample:
Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.


top-left corner rounded

Class: .rounded-top-left

Code: <div class="border rounded-top-left">Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.</div>

Sample:
Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.


top-right corner rounded

Class: .rounded-top-right

Code: <div class="border rounded-top-right">Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.</div>

Sample:
Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.


bottom-left corner rounded

Class: .rounded-bottom-left

Code: <div class="border rounded-bottom-left">Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.</div>

Sample:
Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.


bottom-right corner rounded

Class: .rounded-bottom-right

Code: <div class="border rounded-bottom-right">Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.</div>

Sample:
Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.




Tag: <footer>

Code: <footer>Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.</footer>

Headings



Tags: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Example: <h1>Donec sed</h1&lgt;



Hiding



Class: .hidden

Example: <span class="hidden">Hide me from view!</span>

Class: .invisible

Example: <span class="hidden">Make me invisible!</span>

Images



Tag: <img>

Code: <img src="http://placehold.it/350x150">

Example:




Class: .centerimg

Code: <img class = "centerimg" src="http://placehold.it/350x150">

Example:


This keeps images centered in their parent element.





Class: .rollover

Code: <img class = "rollover" src="http://placehold.it/350x150>

Example:


Lighten opacity on hover.



Class: .caption

Code: <img src="http://placehold.it/350x150"><div class="caption"><It's a caption!></div>

Example:
It's a caption!




Quotes and Blockquotes

Quotes



Tag: <q>

Code: <q>I have a dream</q>

Sample: I have a dream

Blockquotes



Tag: <blockquote>

Code: <blockquote>Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.</blockquote> Sample:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed nisl purus, eu dapibus purus. Quisque porta erat quis lectus placerat a volutpat libero auctor. Quisque egestas dolor at leo bibendum placerat. Sed pharetra vehicula adipiscing. Sed eget sem id est ultrices sollicitudin et in metus. Curabitur neque diam, malesuada ultrices bibendum sit amet, elementum fringilla lacus. Quisque quis nisi a dui aliquam congue. Vivamus sagittis blandit enim et suscipit. Cras fringilla dictum rutrum. Suspendisse dapibus cursus odio, sit amet semper purus cursus vitae. Ut eleifend malesuada felis vel pharetra. Praesent accumsan dictum dui sit amet aliquam. Mauris congue malesuada tellus a bibendum. Nunc congue ipsum non lectus adipiscing adipiscing eget ut risus. Aenean commodo posuere ante, eget sollicitudin dolor tristique eget.


Objects

The objects in burro give some automatic styling to general pieces commonly added to markup.




Class: .breadcrumb

Code: <div class= "breadcrumb"><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li></ul></div>

Example:


Buttons



Class: .brandbtn

Code: <button class="brandbtn"><a href="foo.com">Jason Demeuse</a></button>

Sample:



Class: .roundbrandbtn

Code: <button class="roundbrandbtn"><a href="foo.com">Jason Demeuse</a></button>

Sample:



Errors



Class: .error

Sample: You've encountered an error!

Class: .strongerror

Sample: You've encountered a serious error!



Flexbox

<div class="flexgrid">
  <div class="flexcol flexfluid">
    <h2>Fluid</h2>
	<p> FLUID</p>
	</div>
	<div class="flexcol flexfixed">
	<h2>Fixed</h2>
		<p>FIXED</p>	
	</div>
	<div class="flexcol flexfluid">
	<h2>Fluid</h2>
		<p>FLUID</p>	
	</div>
</div>
Example of Flexbox grid with classes


Class: .logo

Code: <img class="logo" src="foo.png">



Class: .horiznav

Example A: <nav class = "horiznav"><ul><li>...</li></ul></nav>

Example B: <div class = "horiznav"><ul><li>...</li></ul></nav>

Pagination



Class: .pagination

Code: <div class="pagination"><a href="#">1</a> | <a href="#">2</a> | <a href="#">3</a> | <a href="#">4</a></div>

Example:

Utilities

The utilities folder contains helper code that includes everything from quick fixes to entire working chunks of code as mixins.


Clearfix

Add the .clearfix class to any element to apply.



Floats

Quick floats to easily add floats while maintaining modularity. Add .pushleft to add a float:left and a .pushright to add a float:right.



Grid

@include grid(5);

If you want to use the responsive grid pattern, make sure the above line is not commented out and put the number of columns you want in your grid as the argument. When you do this, you'll also want to set up your HTML markup to correspond. So as an example, if I used the above @include grid(5);, I'd want to include the following HTML:

Grid Markup 
<div class="section group">
	<div class="col span_1_of_5">
		This is column 1
	</div>
	<div class="col span_1_of_5">
		This is column 2
	</div>
	<div class="col span_1_of_5">
		This is column 3
	</div>
	<div class="col span_1_of_5">
		This is column 4
	</div>
	<div class="col span_1_of_5">
		This is column 5
	</div>
</div>
The grid visually:
grid(12)
grid(12)
grid(12)
grid(12)
grid(12)
grid(12)
grid(12)
grid(12)
grid(12)
grid(12)
grid(12)
grid(12)
grid(11)
grid(11)
grid(11)
grid(11)
grid(11)
grid(11)
grid(11)
grid(11)
grid(11)
grid(11)
grid(11)
grid(10)
grid(10)
grid(10)
grid(10)
grid(10)
grid(10)
grid(10)
grid(10)
grid(10)
grid(10)
grid(9)
grid(9)
grid(9)
grid(9)
grid(9)
grid(9)
grid(9)
grid(9)
grid(9)
grid(8)
grid(8)
grid(8)
grid(8)
grid(8)
grid(8)
grid(8)
grid(8)
grid(7)
grid(7)
grid(7)
grid(7)
grid(7)
grid(7)
grid(7)
grid(6)
grid(6)
grid(6)
grid(6)
grid(6)
grid(6)
grid(5)
grid(5)
grid(5)
grid(5)
grid(5)
grid(4)
grid(4)
grid(4)
grid(4)
grid(3)
grid(3)
grid(3)
grid(2)
grid(2)


Mixins

Uncle Dave's Ol' Padded Box

Introduced by Dave Rupert, this padded box is a nice way to handle responsive background images. To use this with and image class, just include the mixin along with the image url as an argument.



@include uncledave(img/foo.png);

The sticky footer is a way to keep your footer stuck to the bottom, independent of window size or site content.

	footer {
		@include stickyfooter;
	}