A box in Magic.css is used to contain items, typically objects requiring user interaction, such as a form. Here's a quick example:
...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>
Boxes, despite seeming very simple, are quite customisable. Firstly, basic markup for a box is as follows:
<div class="box">
...
</div>
Then, you may wish to make the box fill 100% of the container:
<div class="box box-fluid">
...
</div>
I'm fluid!
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!
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!
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:
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>
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>
Using the box-fluid class you can make boxes work neatly in columns. This is particularly useful for landing page layouts:
<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>
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.