CSS HTML
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
img
.gitignore
README.md
index.html

README.md

Rudiment

A responsive grid system completely void of bloat and un-needed features.

Basic Usage

Download or clone this whole repository, or use the format below within the body element to get started.

<div class="container">
    <div class="row">

        <div class="col-8">
            <p>I take up 2/3rds of this row!</p>
        </div>

        <div class="col-4">
            <p>I only take up 1/3rd of this row.</p>
        </div>

    </div>
</div>

The container element holds rows.

The row element holds columns.

The column elements hold vertical content. They should total out to twelve per row. A column of 8 width takes up 2/3rds of the row, therefore a column of 4 width takes up 1/3rd of the row.

Text

Font

The font is set default to Open Sans through Google Fonts.

Headings

This system only utilizes H1, H2, and H3 elements. Add the others as you need them.

Text Alignment

text-left, text-right, text-justify, center (this one works on any type of content.)

Font Weight

text-light, text-medium, text-bold

Buttons

Use the button class on a div nested inside of an anchor element to create a button.

Code

Use the code class on a div to display a code block. To preserve code formatting, use a pre element.

Navigation

To create a simple nav bar, simply create a div with the class nav. Include a p element with anchor elements nested inside.

<nav class="nav">
    <p><a href="#">LinkOne</a> |
    <a href="#">LinkTwo</a> |
    <a href="#">LinkThree</a> |
    <a href="#">LinkFour</a></p>
</nav>

Misc

To adjust spacing, there are a few utility classes.

To add a little space above or below any element, you can use pad-top-x and pad-bottom-x respectively, x being 0, 5, 10, 15, 20, or 25.