Editorial and catalogue-inspired
<figcaption> pairings for mobile-first layouts.
Figment is a simple CSS framework for well-designed
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
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:
Finally, run the project:
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--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)
Thanks for considering contributing! Everything in
example/ is currently generated. There’s more information about how to get started here.
Copyright © 2014–2015 Kenneth Ormandy & Chloi Inc.