fuel is a library made with atomic css principles, designed to extend other frameworks. This site is built only with lighter and fuel.
Any other thoughts? Head to the Github repository and make an issue! If you like this idea, don't forget to
Utilities
For now, use the "view source" functionality of your browser as documentation
Spacing fuel uses a simple spacing system inspired by the likes of BassCSS and Tachyons.
ph1 pv2
In this example, p means padding (m means margin), h means horizontal while v means vertical, and the number at the end is the level. Levels go from 0-4.
ml1 mt2
This example shows off margins. For the middle selector, you use t (top), b (bottom), l (left), and r (right) to say which direction you want the margin. Margin does not have v or h as directions.
p2 m2
If you want something on all sides, just do the above, with type then level.
Text fuel has several different classes for transforming text in various ways.
Size
mega
huge
large
regular
small
Alignment
tl
tc
tr
Style
bold
normal
light
caps
tracked
Reminder: You can use <i> or <em> for italic <u> for underline
Colors
Text Colors
c-primary
c-accent
c-info
c-success
c-warning
c-error
c-black
c-white
c-gray
Background Colors
bg-primary
bg-accent
bg-info
bg-success
bg-warning
bg-error
bg-black
bg-white
bg-gray
Border Colors
b-primary
b-accent
b-info
b-success
b-warning
b-error
b-black
b-white
b-gray
Misc
These elements all use the inline class.
dim
rounded
pill
Gapless grid
(Only visible on non-mobile screens)
Components
For now, use the "view source" functionality of your browser as documentation
Buttons
Basic, solid color (primary) buttons are built in to lighter, but you can achieve the following buttons with various fuel classes.
Basic Buttons
Primary Button
Accent Button
Info Button
Success Button
Warning Button
Error Button
Ghost Buttons
Primary Button
Accent Button
Info Button
Success Button
Warning Button
Error Button
Rounded Buttons
Primary Button
Accent Button
Info Button
Success Button
Warning Button
Error Button
Primary Button
Accent Button
Info Button
Success Button
Warning Button
Error Button
Pill Buttons
Primary Button
Accent Button
Info Button
Success Button
Warning Button
Error Button
Primary Button
Accent Button
Info Button
Success Button
Warning Button
Error Button
Alerts
Using color classes and spacing classes, it's easy to create any kind of alert box you might need!
Oh no!
This is an example of an error alert
This is an example of a warning alert
You can also re-color card borders
Navbar
By exploiting how the grid works and pairing it with color classes, you can create a convincing nav bar!
Badges
By inserting a span class with different background and color classes, you can create badges within another element.
Heading Badge
New
Button Badge
5
List Groups
This also demonstrates the inline class!
Some item that is long
Some item
Some item, that exists
Selected Item
Some item
Some item, that exists
Full Page Landing
Using the vh-100, vc, and tc classes with a background color, you can create a screen-filling hero section.