This repository is a mirror of the component module jeffcarp/fungible. It has been modified to work with NPM+Browserify. You can install it using the command npm install npmcomponent/jeffcarp-fungible
. Please do not open issues or send pull requests against this repo. If you have issues with this repo, report it to npmcomponent.
A collection of base CSS classes that let you write styled HTML without writing any CSS. Fungible originated out of the need to scaffold HTML quickly without having to slow down and write CSS for each element. Its declarative usage is inspired by AngularJS.
This is what HTML might look like if you're using Fungible.
<div class="mfb pk bad">
<span class="se fwb"></span>
</div>
<!--
mfb - m (margin), f (1.0em), b (bottom)
pk - p (padding), k (2.0em)
bad - b (border), a (1px), d (#ddd)
fwb - fw (font-weight), b (bold)
-->
Here's a rundown of what's available to you:
.bg-white
.b[size][color][direction]
_
.bad /* a - 1px */
.bbd /* b - 2px */
_
.bad /* d - #ddd */
_
.bad /* all */
.badr /* right */
.badl /* left */
.badt /* top */
.badb /* bottom */
.s[size]
_
.sa /* 8px */
.sb /* 10px */
.sc /* 12px */
.sd /* 14px */
.se /* 16px */
.sf /* 18px */
.sg /* 20px */
.sh /* 22px */
.si /* 24px */
.sj /* 26px */
.sk /* 28px */
.sm /* 32px */
.so /* 36px */
.sr /* 42px */
.sv /* 48px */
.left
.right
.ta[direction]
_
.tal /* left */
.tac /* center */
.tar /* right */
.fw[weight]
_
.fwn /* normal */
.fwb /* bold */
.d[value]
_
.di /* inline */
.dib /* inline-block */
.db /* block */
.white /* white */
.grey /* #888 */
.dagrey /* #666 */
.[p|m][size][direction]
_
.pbb /* padding */
.mbb /* margin */
_
.pax /* 0em */
.pby /* 0.2em */
.pcy /* 0.4em */
.pdy /* 0.6em */
.pey /* 0.8em */
.mfy /* 1em */
.mky /* 2em */
.mpy /* 3em */
.muy /* 4em */
.mzy /* 5em */
.mf /* all directions */
.mfl /* left */
.mfr /* right */
.mft /* top */
.mfb /* bottom */
.mfy /* top and bottom */
.mfx /* left and right */
.hidden /* display: none; */
.full /* width: 100%; */
.uppercase /* text-transform: uppercase; */
.italic /* font-style: italic; */
Install with component(1):
$ component install jeffcarp/fungible
Also available as a Rails gem (if you're using the asset pipeline): fungible-rails
- Search through files and only include classes that are mentioned in the template. (this might be better as an add-on)
MIT