Box Groups

Vertical Grouping

title

content

title

label: value

content

<div class="i-box-group vert">
	<div class="i-box">
		<div class="i-box-header">
			<div class="i-box-title">title</div>
			<div class="i-box-buttons">
				<div class="toolbar">
					<button class="i-button">Button</button>
					<button class="i-button highlight">Button</button>
				</div>
			</div>
		</div>
		<div class="i-box-content">content</div>
	</div>
	<div class="i-box">
		<div class="i-box-header">
			<div class="i-box-title">title</div>
			<div class="i-box-metadata">
				<span class="label">label:</span>
				<span class="content">value</span>
			</div>
		</div>
		<div class="i-box-content">content</div>
	</div>
</div>

Forms

Form

To render forms, use the macros in _form.html. This is an example of the basic structure of an i-form.

<form class="i-form">
	<div class="form-group">
		<div class="form-label">
			<label>First name</label>
		</div>
		<div class="form-field">
			<input type="text">
			<div class="form-field-description">This is the description of the first name field</div>
		</div>
	</div>
</form>

Horizontal Form

The orientation of the form can be either horizontal or vertical (default). For more flexibility, the form-groups can also receive this classes in order to change the orientation of a specific field in the form. Several classes can be applied to the form components to alter their behaviour:

i-form:
- no-block-padding: Padding from form-label and form-field is removed
form-group:
- form-group-footer: Used for the footer of the form
form-label:
- form-label-middle: Aligns the label in the center (vertically)
- form-label-empty: Used when there is no text for the label
form-field:
- fit-to-parent: The width of this element will be identical to the one of its parent

<form class="i-form horizontal">
	<div class="form-group">
		<div class="form-label form-label-middle">
			<label>Name</label>
		</div>
		<div class="form-field">
			<input type="text">
			<div class="form-field-description">Add your first name</div>
		</div>
	</div>
	<div class="form-group">
		<div class="form-label form-label-empty"></div>
		<div class="form-field">
			<input type="text">
			<div class="form-field-description">Add your last name</div>
		</div>
	</div>
	<div class="form-group">
		<div class="form-label form-label-middle">
			<label>Static text</label>
		</div>
		<div class="form-field">
			<div class="static-text">This is some static text</div>
		</div>
	</div>
	<div class="form-group form-group-footer">
		<div class="form-label"></div>
		<div class="form-field">
			<button class="i-button">Button</button>
		</div>
	</div>
</form>

Form Fieldsets

<form class="i-form horizontal">
	<fieldset>
		<legend>Fieldset title</legend>
		<div class="fieldset-content">
			<p class="description">description of the fieldset</p>
			<div class="form-group">
				<div class="form-label">
					<label>First name</label>
				</div>
				<div class="form-field">
					<input type="text">
					<div class="form-field-description">This is the description of the first name field</div>
				</div>
			</div>
		</div>
	</fieldset>
</form>

Management Lists

Management List

The management lists mainly consist of the toolbar and table components

	ID	First name	Last name	Address
	1	John	Doe	123 Main St. Anytown
	1	Richard	Roe	125 Main St. Anytown

<div class="list">
	<div class="toolbars space-after">
		<div class="toolbar">
			<div class="group">
				<a class="icon-checkbox-checked i-button arrow left icon-only" href="#" data-toggle="dropdown"></a>
				<ul class="dropdown">
					<li><a href="#" id="select-all">All</a></li>
					<li><a href="#" id="select-none">None</a></li>
				</ul>
			</div>
			<button class="i-button icon-settings highlight">Customize list</button>
			<a class="i-button icon-plus">Add</a>
		</div>
		<div class="toolbar">
			<div class="group">
				<a class="i-button icon-link js-static-url"></a>
			</div>
			<div class="group">
				<div>
					<span class="i-button label icon-list">
                        <span><strong>2</strong> / 2</span>
					</span>
				</div>
			</div>
			<div class="group">
				<span class="i-button label icon-search"></span>
				<span class="clearableinput">
                    <input type="text" placeholder="Enter #id or search string" class="clearabletext">
                </span>
			</div>
		</div>
	</div>
	<div class="list-content">
		<div class="js-list-table-wrapper">
			<table class="i-table tablesorter tablesorter-default" role="grid">
				<thead>
					<tr class="i-table">
						<th class="i-table thin-column"></th>
						<th class="i-table id-column">ID</th>
						<th class="i-table">First name</th>
						<th class="i-table">Last name</th>
						<th class="i-table">Address</th>
						<th class="i-table actions-column"></th>
					</tr>
				</thead>
				<tbody>
					<tr class="i-table">
						<td class="i-table id-column">
							<input type="checkbox" class="select-row">
						</td>
						<td class="i-table id-column">1</td>
						<td class="i-table">John</td>
						<td class="i-table">Doe</td>
						<td class="i-table">123 Main St. Anytown</td>
						<td class="i-table actions-column">
							<div class="group right entry-action-buttons">
								<a href="#" class="icon-edit i-link highlight"></a>
								<a href="#" class="icon-shield i-link highlight"></a>
								<a href="#" class="icon-remove i-link danger"></a>
							</div>
						</td>
					</tr>
					<tr class="i-table">
						<td class="i-table id-column">
							<input type="checkbox" class="select-row">
						</td>
						<td class="i-table id-column">1</td>
						<td class="i-table">Richard</td>
						<td class="i-table">Roe</td>
						<td class="i-table">125 Main St. Anytown</td>
						<td class="i-table actions-column">
							<div class="group right entry-action-buttons">
								<a href="#" class="icon-edit i-link highlight"></a>
								<a href="#" class="icon-shield i-link highlight"></a>
								<a href="#" class="icon-remove i-link danger"></a>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>