Blueprint interactions

Blueprint interactions

This tutorial is a bit like the last tutorial. The style and the markup are just here as a demonstration of the blueprint style out of the box. Interactions are a nice way to bring feedback to the user. Blueprint (and compass) gives us many style of interaction. Be sure to check the demo of this tutorial to see what's it look like and don't forget that all the default are customizable and should go into your _base.scss partial.

The markup

This a simple way to markup your feedback. Note that there is lots of other way, feedback can be apply ton any container.

<h1>Interactions</h1>

<div class="feedback">This is feedback</div>
<div class="error">This is an error</div>
<div class="alert">This is an alert</div>
<div class="notice">This is a notice</div>
<div class="success">This is a success</div>
<div class="info">This is an info</div>
<div class="hide">This is hidden</div>

<p>
  <span class="highlight">This is highlighted</span>
  <span class="added">This is added</span>
  <span class="removed">This is removed</span>
</p>

The style

There is not so much to talk about here neither. The reset and blueprint import are usual as is the typography include. The blueprint-interaction mixin will load all feedback types available from blueprint.

@import "blueprint/reset";
@import "blueprint";

@include blueprint-typography;
@include blueprint-interaction;

#container {
  @include container;
}