Five States of a Lovely User Interface

Five States of a Lovely User Interface.markdown

Five States of a Lovely User Interface

Implementing the five states of a lovely user interface with Less and Backbone.

A Pen by zardoz on CodePen.

License.

index.html

<h1>Five States of the User Interface</h1>

<section class="lovely-view is-empty has-error is-loading is-first-time">
	<div class="error">Please correct the issues shown below before we can save your awesome information.</div>
	<div class="loading">Loading your awesome information ...</div>
	<div class="first-time">Since this is your first time we suggest you [call to action]</div>
	<div class="empty-state">Great, that's really tidy now, why don't you [call to action]</div>
	<div class="content">This is your awesome information.</div>
</section>
<section class="toolbar">
	<button>Error</button>
	<button>Loading</button>
	<button>First</button>
	<button>Empty</button>
	<button>Hide</button>
</section>

script.js

class LovelyView {
//	setFirstTime: function () {

//	}
};

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>

style.css

.hide() {
	display: none;
	visibility: hidden;
}

.show(@display: block) {
	display: @display;
	visibility: visible;
}

.is-hidden {
	.hide();
}

.first-time {
	.hide();
	color: orange;
}

.empty-state {
	.hide();
	color: salmon;
}

.loading {
	.hide();
	color: cyan;
}

.error {
	.hide();
	color: red;
}

.is-first-time .first-time {
	.show();
}

.is-empty .empty-state {
	.show();
}

.is-loading .loading {
	.show();
}

.has-error .error {
	.show();
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/darkly/bootstrap.min.css" rel="stylesheet" />