Layout

Layout Helpers

BlastOff provides some useful classes to help with quickly laying out content on the screen. This is a fairly minimal framework, so expect to have to do some stuff by hand.

Container

Container responsiveness is currently a little jumpy. This should be improved in 1.1

Containers provide a useful way of padding content so it doesn't just show up on the edges of the screen. Give a div or any block-level element the .container class to make it a container.

index.html
<div class="container">
    <h1>This is in the container</h1>
    <p>this is some more text</p>
</div>

Grid

The grid is not currently very good, but it provides a basic way to lay out data in a tabular fashion. Grids collapse on small screens to display in a row.

The .row class should be used on a block-level element, and .column on child elements. They will automatically space out to fill the space. 

<div class="row">
    <div class="column>
        <h1>First Col</h1>
    </div>
    <div class="column">
        <h1>Second Col</h1>
    </div
</div>

Navigation

BlastOff has a nice navbar equipped with a pure-css hamburger menu that automatically shows up on mobile devices. Because it is made with only CSS it requires some slightly convoluted HTML to make it work properly. Of course, if you prefer to use JavaScript or the framework du jour with your site, feel free to make clicking the hamburger icon add the .open class to your side menu. It will animate accordingly.

For example, here is the HTML for the navbar used on the BlastOff site:

<nav class="navbar material white">
    <div class="container">
        <div class="nav-logo">
            <a href="/"><h3>Blast Off</h3></a>
        </div>
        <a class="nav-burger" href="#nav-mobile"><i class="fas fa-bars"></i></a>
        <div class="nav-menu">
            <h3>
                <a href="somewhere else">Link</a>
            </h3>
        </div>
    </div>
</nav>

<div class="nav-mobile" id="nav-mobile">
    <div class="modal-background">

    </div>
    <div class="nav-body">
        <a class="nav-close" href="#!"><i class="fa fa-times"></i></a>
        <img src="logo-wordmark.png" />
    </div>
</div>

This may seem a bit confusing at first, here's how it works:

The navbar is split into three segments, the logo, which appears on the left, the burger, which only appears on mobile devices, which should be used to open the mobile menu, and the menu, which contains the buttons and links.

You may have noticed that the a.nav-burger links to #nav-mobile, this is how BlastOff opens the mobile navigation with CSS. When an element with the class .nav-mobile is the target, it will appear. As mentioned above you can also give it the .open class with your JavaScript if you would like to avoid having to use targets.

An element is targeted when it's ID is in the URL, for example example.com/page#123 would target an element with ID 123, most browsers will also attempt to jump to that elements location on the page

Target's don't play nice with Vue.js, if you're using Vue, make sure to use the .open class instead.

PreviousHome

Last updated