Search, filters and actions

Most admin applications are simply an interface to a database. The most important bit in an admin application then might just be how you search through data and run actions on it.

The Search Box

The search spans the width of the container making it quite prominent. Large, simple type makes it easy to use. The autofocus property helps give it focus on page load.

<div class="flakes-search">
	<input class="search-box" placeholder="Search Products" autofocus>
</div>

Search Filters

More often than not, you will need to apply filters to search queries. Simple search filters like the ones below will come in handy.

<div class="flakes-search">
	<input class="search-box" placeholder="Search" autofocus>
	<div class="filters">
		<label class="filter-checkbox">
			<input class="checkbox" type="checkbox"> Filter 1
		</label>
		<label class="filter-checkbox">
			<input class="checkbox" type="checkbox"> Filter 2
		</label>
	</div>
</div>

Actions Bar

Searching and filtering data is all fine and good. But what about taking actions on subsets of data? The actions bar is a container for buttons or actions that can be taken on data.

<div class="flakes-actions-bar">
	<a class="action button-gray smaller right" href="">Add a product</a>
	<a class="action button-gray smaller right" href="">Export</a>

	<a class="action button-gray smaller" href="">Delete</a>
	<a class="action button-gray smaller" href="">Edit</a>
</div>

Search + Filters + Actions

The beautiful thing about the above three units is that they play well together. You can combine all three to form a single unit. Notice that everything is still responsive and sticks together nicely.