SUIT CSS components-media

A SUIT CSS component that provides a media object, commonly used for things like comments.

Read more about SUIT CSS's design principles.

Installation

• npm: npm install suitcss-components-media
• Component(1): component install simonsmith/components-media
• Bower: bower install suitcss-components-media

Available classes

• Media - [core] The core media component
• Media--alignRight - [modifier] Align the media object to the right

Configurable variables

• --Media-heading-margin
• --Media-object-gutter

Use

Example:

<div class="Media">
  <div class="Media-object">
    <img src="http://lorempixel.com/80/80/" alt="">
  </div>
  <div class="Media-body">
    <h2 class="Media-heading">Heading</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
    venenatis interdum urna, quis sodales mauris rutrum quis.
  </div>
</div>

Testing

Install Node (comes with npm).

npm install

To generate a build:

npm run build

To generate the testing build.

npm run build-test

Basic visual tests are in test/index.html.

Browser support

• Google Chrome
• Firefox
• Opera
• Safari
• Internet Explorer 8+