Skip to content

kennethormandy/figment

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

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

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

Stars

Watchers

Forks

Packages

No packages published