Box


Introduction

A box in Magic.css is used to contain items, typically objects requiring user interaction, such as a form. Here's a quick example:

Sign in

...is made with the following syntax:

<div class="box center">
	<h1 class="box-title">Sign in</h1>
	<input type="text" placeholder="Username">
	<input type="password" placeholder="Password">
	<button class="btn btn-default btn-outline">Sign in</button>
</div>

Making boxes

Simple box

Boxes, despite seeming very simple, are quite customisable. Firstly, basic markup for a box is as follows:

<div class="box">
	...
</div>

Fluid box

Then, you may wish to make the box fill 100% of the container:

<div class="box box-fluid">
	...
</div>

I'm fluid!

Coloured box

As with most other elements, you can also assign a Magic colour to a box. See the colour page for a guide on colours.

<div class="box blue">
	...
</div>

I'm blue!

Centered box

By default, boxes are left-aligned. To center any non-text element in Magic (including boxes), you just need to add the center class:

<div class="box center">
	...
</div>

I'm centered!

Box title

By default, adding a <h1> to act as the title of a box will not appear neat, due to excessive padding. To neatly add a title to a box:

I'm a title!

This title looks much neater than one without the box-title class, as it's sized correctly and does not have the excessive padding the headers typically do.

<div class="box">
	<h1 class="box-title">I'm a title!</h1>
	<p>This title looks much neater than one without the class, as it's sized correctly and does not have the excessive padding the headers typically do.</p>
</div>

Floater box

You can also make a box that 'floats' or 'hovers' when it is hovered over. This is particularly useful in a three-column marketing layout as it adds interest to boring content:

Hover on me!

<div class="box floater">
	...
</div>

Boxes in columns

Using the box-fluid class you can make boxes work neatly in columns. This is particularly useful for landing page layouts:

Box 1

Box 2

Box 3

<div class="row">
  <div class="col col4">
    <div>
      <div class="box box-fluid floater">
        <h1 class="box-title">Box 1</h1>
      </div>
    </div>
  </div>
  <div class="col col4">
    <div>
      <div class="box box-fluid floater">
        <h1 class="box-title">Box 2</h1>
      </div>
    </div>
  </div>
  <div class="col col4">
    <div>
      <div class="box box-fluid floater">
        <h1 class="box-title">Box 3</h1>
      </div>
    </div>
  </div>
</div>
See the grid documentation for more information.

Usage

Magic.css includes boxes for user-interactive content (e.g. sign-in forms, confirmation codes, etc). However, due to their simple nature, boxes can be used for practically any purpose. Though they may seem like it, they are not the equivalent of 'Alerts' in Bootstrap. In fact, there doesn't appear to be any close alternative to it. However, Bulma has something practically equivalent. They are fully responsive (to the point that such simple elements can be responsive!), especially in terms of their margins.