Carabiner is a lightweight CSS framework that uses Sass. It can be used as a UI kit, but it's designed to be modified and altered to fit your needs.
This is a body paragraph with a hyperlink inside it. This is a body paragraph with a hyperlink inside it.
Paragraphs with inline code blocks
look like this.
When one man, for whatever reason, has the opportunity to lead an extraordinary life, he has no right to keep it to himself.
-- Jacques Cousteau
A multi line code block might look like this:
function Person(name) {
this.name = name;
this.speak = function () {
return this.name;
};
}
var alice = new Person('Alice');
alice.speak();
Grids are created using the following classes: .container
, .grid-row
, .col
, and .col-*
.
You can apply the .container
to create a wrapper class. If no columns are required, you can insert your content right in the body of the div.
<div class="container">
<-- insert your content here -->
</div>
If you want to use columns, you have to nest them in a .grid-row
container to make sure you don't double the gutter.
<div class="container">
<div class="grid-row">
<div class="col col-4">
<-- insert your content here -->
</div>
<div class="col col-8">
<-- insert your content here -->
</div>
</div>
</div>
They'll come out looking something like this:
You can use helper classes to modify columns on mobile and tablet devices. These include:
.mobile-full
.mobile-half
.tablet-full
.tablet-col-*
Resize the window to see how the columns below change.
Grids can be safely nested inside of grids as well.
The dimension of the grid are defined in variables.scss
and can be modified as desired. Look for these variables:
$grid-column-gutter: 15px;
$grid-column-width: 82px;
$mobile-container: 100%;
$tablet-container: 720px;
This is a basic table:
Item | Quantity | Price | Total |
---|---|---|---|
Apples | 6 | $0.50 | $3.00 |
Oranges | 4 | $1.00 | $4.00 |
Bananas | 5 | $0.75 | $3.75 |
This is a bordered table, created by adding the .table-bordered
class:
Item | Quantity | Price | Total |
---|---|---|---|
Apples | 6 | $0.50 | $3.00 |
Oranges | 4 | $1.00 | $4.00 |
Bananas | 5 | $0.75 | $3.75 |
This is a striped table, created by adding the .table-striped
class:
Item | Quantity | Price | Total |
---|---|---|---|
Apples | 6 | $0.50 | $3.00 |
Oranges | 4 | $1.00 | $4.00 |
Bananas | 5 | $0.75 | $3.75 |