Editorial figure and caption pairings for mobile-first layouts.
CSS JavaScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
test
.gitignore
CONTRIBUTING.md
LICENSE.md
README.md
figment.scss
package.json

README.md

Figment

Editorial and catalogue-inspired <figure> and <figcaption> pairings for mobile-first layouts. Figment is a simple CSS framework for well-designed <figure> and <figcaption> pairings.

It gives you:

  • Better default styling for captioned images, videos, embeds
  • A consistent, BEM-like API for specifying inline media layouts, whether you hand-code them in Markdown or use them with a CMS
  • The chance to move to site-specific styles quickly; there’s no
  • Optional configuration, so it can fit to your existing grid

Getting started

To run the project locally, clone it and then move into that directory:

git clone http://github.com/kennethormandy/figment
cd figment

Next, install the development dependencies using npm:

npm install

Finally, run the project:

npm start

How, Harp is serving it locally for you at localhost:9000.

API

Available:

.figure--aside    - A figure with the caption as marginalia when possible.
.figure--border   - A figure framed with a border.
.figure--browser  - A figure framed with browser chrome.
.figure--breakout - A figure that visually breaks the container when there is space available.
.figure--overlay  - An image with an optional overlayed caption.
.figure--embed    - A figure with media embedded from another service. (ex. Vimeo, YouTube, Twitter card)
.figure--square   - An embed cropped, scaled, or already set to a square. (ex. Instagram, Vine)

Coming:

.figure--cropped  - A figure that can be acceptably cropped at certain screen sizes.
.figure--device   - A figure framed with a mobile device. (Undecided how to specfiy a device.)

Potential:

.figure--right
.figure--left
.figure--crop (marginal image that can acceptably bleed off the canvas)
.figure--spread (paired? like split and breakout combined, into split image and quote or similar)

Contributing

Thanks for considering contributing! Everything in example/ is currently generated. There’s more information about how to get started here.

License

The MIT License (MIT)

Copyright © 2014–2015 Kenneth Ormandy & Chloi Inc.