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:

Getting started

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

git clone
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.



.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)


.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.)


.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)


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


The MIT License (MIT)

Copyright © 2014–2015 Kenneth Ormandy & Chloi Inc.