# 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

{% hint style="warning" %}
 Container responsiveness is currently a little jumpy. This should be improved in `1.1`
{% endhint %}

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. 

{% code title="index.html" %}

```markup
<div class="container">
    <h1>This is in the container</h1>
    <p>this is some more text</p>
</div>
```

{% endcode %}

### 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.&#x20;

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.&#x20;

```markup
<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.&#x20;

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

```markup
<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:

| `div.nav-logo` Navbar Logo | `a.nav-burger` Burger Button | `div.nav-menu` Contains Navbar Items |
| -------------------------- | ---------------------------- | ------------------------------------ |

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.&#x20;

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.&#x20;

{% hint style="info" %}
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
{% endhint %}

{% hint style="danger" %}
Target's don't play nice with Vue.js, if you're using Vue, make sure to use the `.open` class instead.
{% endhint %}