basscss-addons/modules/media-object/README.md

Optional modules to extend Basscss

# Basscss Media

Flexbox media object module for Basscss - http://basscss.com

## Basic Usage

```html
<div class="media">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>
```

## Centered 

```html
<div class="media media-center">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>
```

## Bottom Aligned

```html
<div class="media media-bottom">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>
```

## Source Order

```html
<div class="media">
  <div class="media-body">
    Media Object
  </div>
  <img src="http://placehold.it/96" class="media-img" />
</div>
```

## Double-Sided

```html
<div class="media media-center">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
  <img src="http://placehold.it/96" class="media-img" />
</div>
```

## Multiple Images

```html
<div class="media media-center">
  <img src="http://placehold.it/96" class="media-img" />
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>
```

## Responsive Media Objects

```html
<div class="sm-media media-center">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>
```

```html
<div class="md-media media-center">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>
```

```html
<div class="lg-media media-center">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>
```