Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

Editorial figure and caption pairings for mobile-first layouts.

Resources

License

You can’t perform that action at this time.