Block

inuitcss’ Block object simply stacks an image on top of some text content.

This incredibly frequently occurring design pattern is now wrapped up in a
simple, reusable, configurable abstraction.

Dependencies

inuitcss’ Block object depends on two other inuitcss modules:

* settings.defaults
* tools.functions

If you install the Block object using Bower, you will get these dependencies at
the same time. If not using Bower, please be sure to install and @import these
dependencies in the relevant way.

Installation

The recommended installation method is Bower, but you can install the Block
module via a Git Submodule, or copy and paste.

$3

$ bower install --save inuit-block

Install using npm:

$ npm install --save inuit-block

Once installed, @import into your project in its Objects layer:

@import "bower_components/inuit-block/objects.block";

$3

$ git submodule add git@github.com:inuitcss/objects.block.git

Once installed, @import into your project in its Objects layer:

@import "objects.block/objects.block";

$3

The least recommended option for installation is to simply download
_objects.block.scss into your project and @import it into your project in
its Objects layer.

Usage

Basic usage of the Block object uses the required classes:

Text-like content goes here.

The only valid children of the .block node are .block__img and
.block__body.

Options

Other, optional classes can supplement the required base classes:

* .block--flush: remove the space between the stacked image- and text-content.
* .block--[tiny|small|large|huge]: alter the spacing between the stacked
image- and text-content.
* .block--[center|right]: align both the image- and text-content.

For example:

Text-like content goes here.