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 final goal of this project is to create a good building block for those new to Sass, and a solid foundation for those who are more experienced but tired of writing the same layout code every time they start a new project.
burro 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:
_variables.scss- You'll want to set this up at the beginning of your project so you can call on these as you work.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>
Example: <aside>Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.</aside>
Border
Class: .border
Example: <div class="border">Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.</div>
Rounded-Borders
fully rounded
Class: .rounded
Example: <div class="border rounded">Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.</div>
right-side rounded
Class: .rounded-right
Example: <div class="border rounded-right">Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.</div>
left-side rounded
Class: .rounded-left
Example: <div class="border rounded-left">Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.</div>
top-side rounded
Class: .rounded-top
Example: <div class="border rounded-top">Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.</div>
bottom-side rounded
Class: .rounded-bottom
Example: <div class="border rounded-bottom">Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.</div>
top-left corner rounded
Class: .rounded-top-left
Example: <div class="border rounded-top-left">Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.</div>
top-right corner rounded
Class: .rounded-top-right
Example: <div class="border rounded-top-right">Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.</div>
bottom-left corner rounded
Class: .rounded-bottom-left
Example: <div class="border rounded-bottom-left">Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.</div>
bottom-right corner rounded
Class: .rounded-bottom-right
Example: <div class="border rounded-bottom-right">Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.</div>
Footer
Tag: <footer>
Example: <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>
h1,h2,h3,h4,h5,h6 {
//text-align:center; // Uncomment for centered headers
padding:0 0 0 10px; // Comment if you want centered headers
}
As commented in the code, if you want your headers to automatically text-align:center, switch the commenting on the above lines. So, if you do want those to be centered, your code would look like:
h1,h2,h3,h4,h5,h6 {
text-align:center; // Uncomment for centered headers
//padding:0 0 0 10px; // Comment if you want centered headers
}
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>
Example: <img src="http://placehold.it/350x150">
Class: .centerimg
Example: <img class = "centerimg" src="http://placehold.it/350x150">
This keeps images centered in their parent element.
Class: .rollover
Example: <img class = "rollover" src="http://placehold.it/350x150">
Lighten opacity on hover.
Class: .caption
Example: <img src="http://placehold.it/350x150"><div class="caption">It's a caption!</div>
Quotes and Blockquotes
Quotes
Tag: <q>
Example: <q>I have a dream</q>
Blockquotes
Tag: <blockquote>
Example: <blockquote>Donec sed nisl pretium nulla bibendum hendrerit. Integer tincidunt pharetra orci id volutpat.</blockquote>
Objects
The objects in burro give some automatic styling to general pieces commonly added to markup.
Breadcrumb
Class: .breadcrumb
Example: <div class= "breadcrumb"><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li></ul></div>
Buttons
Class: .brandbtn
Example: <button class="brandbtn"><a href="foo.com">Jason Demeuse</a></button>
Class: .roundbrandbtn
Example: <button class="roundbrandbtn"><a href="foo.com">Jason Demeuse</a></button>
Errors
Class: .error
Example: <span class="error">You've encountered an error!</span>
Class: .strongerror
Example: <span class="error">Serious error!</span>
Flexbox
<div class="flexgrid">
<div class="flexcol flexfluid">
<h2>Fluid</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="flexcol flexfixed">
<h2>Fixed</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="flexcol flexfluid">
<h2>Fluid</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
Navigation
Class: .logo
Example: <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
Example: <div class="pagination"><a href="#">1</a> | <a href="#">2</a> | <a href="#">3</a> | <a href="#">4</a></div>
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>
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);
Sticky Footer
The sticky footer is a way to keep your footer stuck to the bottom, independent of window size or site content.
footer {
@include stickyfooter;
}
Feel free to improve on this or send questions or comments.
This work is licensed under a Creative Commons Attribution 3.0 Unported License.
