Rebar is a lightweight HTML5 / CSS3 framework for making responsive websites built using the LESS preprocessor
This is a collection of CSS styles and corresponding HTML elements that are currently being styled. Use this code to develop the front-end of your website.
The CSS styles are all broken apart into smaller easy to manage LESS files that draw from configurable variables in the less/rebar/config.less file which is then compiled to CSS.
You can install Rebar using the Bower package manager by typing:
$ bower install rebar
If you're unfamiliar with LESS I suggest CodeKit for Mac OS, or Grunt which uses Node.js and runs on the command line.
Rebar is a collection of modular CSS files that helps rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, forms and media queries. Go ahead, resize this super basic page to see the grid in action.
Written with small file sizes in mind, the core rebar.css library is under 30K in size.
Rebar is built on three core principles:
The easiest way to start developing with Rebar is to check out the docs & info on this page and download the open source repository.
If you want to help report bugs and create a pull requests with quality additions, we would be very happy. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at hi@brennannovak.com.
Lomo locavore swag retro stumptown four loko keytar polaroid. Portland selfies cray, plaid pop-up salvia sustainable literally. Marfa church-key 3 wolf moon narwhal aesthetic. Hoodie Marfa fixie wayfarers, Pinterest trust fund fanny pack 3 wolf moon dreamcatcher. Echo Park chillwave jean shorts ugh. IPhone Terry Richardson letterpress, literally keytar scenester kale chips tumblr dreamcatcher deep v. We suggest using Hipster Ipsum
Rebar is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. Rebar is built on three core principles:
Rebar has a familiar, lightweight 960 grid as its base, but elegantly scales down to downsized browser windows, tablets, mobile phones (in landscape and portrait). Go ahead, resize this page!
Rebar is a tool for rapid development. Get started fast with CSS best practices, a well-structured grid that makes mobile consideration easy, an organized file structure and super basic UI elements like lightly styled forms, buttons, tabs and more.
Rebar is not a UI framework. It's a development kit that provides the most basic styles as a foundation, but is ready to adopt whatever your design or style is.
Rebar's base grid is a variation of the 960 grid system. The syntax is simple and it's effective cross browser, but the awesome part is that it also has the flexibility to go mobile like a champ. Go ahead, resize the browser and watch as the layout reacts!
These are examples of large items grids
Ugh fixie butcher, cornhole Pinterest scenester banh mi Tonx retro salvia tousled cool link
Carles artisan try-hard, Helvetica letterpress swag umami flexitarian lo-fi seitan
Asymmetrical pork belly VHS. Pickled XOXO Pitchfork paleo pork belly.
Asymmetrical hoodie plaid, YOLO occupy slow-carb. Wolf McSweeney's pickled fashion axe
Squid asymmetrical chambray fap flexitarian tousled vegan.
Trust fund chillwave ugh American Apparel Bushwick food truck kitsch.
Pinterest plaid quinoa. Vice literally pour-over chambray VHS freegan. Quinoa Cosby
Blog before they sold out 8-bit, food truck roof party slow-carb Vice Neutra bicycle rights. Fap hashtag lo-fi, banh mi
Bicycle rights Austin sustainable Marfa, cardigan pickled raw denim Intelligentsia street art Neutra distillery Banksy Truffaut.
The typography of Rebar is designed to create a strong hierarchy with basic styles. The primary font is Open Sans, but the font stack can be easily changed with just a couple adjustments. Regular paragraphs are set at a 14px base with 21px line height.
This is a blockquote style example. It stands out, and it is awesome!
Brennan Noval, Rebar Creator
Here is some text inside a <pre> element.
*Note, it needs to be flush against edge of document, as the <pre> element
Here is some JS code inline function() { alert('Halló World') } which is located inside of a code element with.
{
"hello": "halló",
"i am for code": "here is my structure"
"actually data" : {
"inside of elements" : ["pre", "code"]
}
}
The list elements in Rebar are designed to create a strong hierarchy with basic styles.
Base ul element
Base ol element
Add the ul.none class
Add the ul.square class
Add the ul.circle class
Add the ul.large class to list element
Add the ul.small class to list element
Add the ul.horizontal class to list element
In order to make one of the following HTML element types more appealing & clickable:
a, input[type=submit] input[type=reset] input[type=button] button
All you need to do is add one of the following classes to any of the elements:
.button-primary .button-secondary .button-info .button-alert .button-warning
To make a button small, simply add the .button-small as well as the above class to a given element
In order to nicely style form elements, add the .standard class to a form element. You can also add the .tiny .small .medium .large .full class to any of the following elements input textarea select to alter the size.
You can add form validation UI feedback by adding the following classes .validation-success .validation-warning .validation-error to label element and it will style children elements input select textarea elements.
Apply the .rounded class to the table element
| Moral | Description | Count |
|---|---|---|
| Time | An easy way to contact groups of people & organize their responses | 123 |
| Cash | An easy way to contact groups of people & organize their responses | 456 |
| Patience | An easy way to contact groups of people & organize their responses | 789 |
| Thank you for reading :) | ||
This table has the .zebra and .full class on the table element [UNFINISHED]
| Time | An easy way to contact groups of people & organize their responses | 123 |
| Cash | An easy way to contact groups of people & organize their responses | 456 |
| Patience | An easy way to contact groups of people & organize their responses | 789 |
Rebar uses a lot of media queries to serve the scalable grid, but also for the convenience of styling your site on different size screens. Rebar's media queries are almost exclusively targeted at max and min widths rather than device sizes or orientations. The advantage of this is browsers and future mobile devices that don't map to exact set dimensions will still benefit from the styles. That being said, all of the queries were written to be optimal on Apple iOS devices. The built in media queries include:
Click square to see HEX value for easier copying