https://github.com/kennethormandy/figment
Editorial figure and caption pairings for mobile-first layouts.
https://github.com/kennethormandy/figment
Last synced: over 1 year ago
JSON representation
Editorial figure and caption pairings for mobile-first layouts.
- Host: GitHub
- URL: https://github.com/kennethormandy/figment
- Owner: kennethormandy
- License: mit
- Created: 2014-09-06T20:59:07.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2015-12-02T19:19:16.000Z (over 10 years ago)
- Last Synced: 2025-03-25T02:43:28.788Z (over 1 year ago)
- Language: CSS
- Homepage: http://figment.kennethormandy.com
- Size: 38.3 MB
- Stars: 12
- Watchers: 2
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Figment
Editorial and catalogue-inspired `` and `` pairings for mobile-first layouts.
Figment is a simple CSS framework for well-designed `` and `` 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:
```sh
git clone http://github.com/kennethormandy/figment
cd figment
```
Next, install the development dependencies using [npm](https://npmjs.org):
```sh
npm install
```
Finally, run the project:
```sh
npm start
```
How, [Harp](http://harpjs.com) is serving it locally for you at [localhost:9000](http://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](CONTRIBUTING.md).
## License
[The MIT License (MIT)](LICENSE.md)
Copyright © 2014–2015 [Kenneth Ormandy](http://kennethormandy.com) & [Chloi Inc.](http://chloi.io)