Skip to content

[DEPRECATED] [go to intuitcss/inuitcss] Stack an image above some text content.

Notifications You must be signed in to change notification settings

inuitcss/objects.block

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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:

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.

Install using Bower:

$ 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";

Install as a Git Submodule

$ git submodule add [email protected]:inuitcss/objects.block.git

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

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

Install via file download

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:

<div class="block">
    <img src="/path/to/image.png" alt="" class="block__img" />
    <div class="block__body">
        <p>Text-like content goes here.</p>
    </div>
</div>

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:

<div class="block  block--small  block--center">
    <img src="/path/to/image.png" alt="" class="block__img" />
    <div class="block__body">
        <p>Text-like content goes here.</p>
    </div>
</div>

About

[DEPRECATED] [go to intuitcss/inuitcss] Stack an image above some text content.

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages