fart.css is a CSS library of styles reusable across your fart-tastic frontends.

Getting started

To get started with fart.css, include the following line in the <head> of your HTML file:

<link rel="stylesheet" type="text/css" href="https://css.fart.tools" />

From there, you can use the classes and styles provided by the fart.css CSS library.

Variables

fart.css provides a set of CSS variables var(--css-variable) for colors:

Colors are defined in the root.css file.

:root {
  --fart-primary: #c3ef3c;
  --fart-dark-primary: #004021;
  --fart-darker-dark-primary: #002d17;
  --fart-lighter-dark-primary: #005b31;

  --fart-secondary: #db7093;
  --fart-highlight: #db709384;

  --fart-white: #ddd;
  --fart-off-white: #aaa;
}

Fonts

The fonts.css file imports Overpass from Google Fonts.

Keyframes

fart.css provides a set of keyframes for animations in the keyframes.css file.

Semantics

fart.css provides implicit styling for a set of common HTML elements in the semantics.css file.

Body and HTML elements are styled with:

html,
body {
  background-color: var(--fart-dark-primary);
  color: var(--fart-white);
  font-family: sans-serif;
  margin: 0;
}

Check out the available styles in the semantics.css file.

Headings

Headings <h1> through <h6> are styled with a custom font and size.

Example h1

Example h2

Example h3

Example h4

Example h5

Example h6

Links

Links <a>, .fart-link, and .fart-link-visible-on-hover are styled with a custom color and hover effect. Use .fart-link-visible-on-hover to style links whose underline is only visible on hover.

Example .fart-link
Example .fart-link-visible-on-hover

Lists

Lists <ul> and <ol> are styled with a custom color and padding.

Example list item 1
Example list item 2
Example nested list
- Example nested list item 1
- Example nested list item 2

Blockquotes

Blockquotes <blockquote> are styled with a custom color and padding.

Example blockquote

Horizontal rule

Use <hr> or .fart-hr to create a horizontal rule. The rule is styled with var(--fart-primary).

Misc

fart.css provides miscellaneous styles in the misc.css file.

Buttons

Buttons .fart-button are have a rounded button style with a custom color and hover effect.

Example button

Sections

Sections .fart-section are styled with a custom color and padding.

Headers

Headers .fart-header are styled with a custom font and size.

Example header

Sparkles

Sparkles .fart-sparkle are styled with sparkle emojis on either side of the text content.

Example sparkle

Hoverable logos

Hoverable logos .fart-logo are styled with a custom animation on hover.

🧪

You made it to the bottom!

Thanks for checking out fart.css! If you have any questions or feedback, Chat↗ with the community on Discord and check out our ★Source↗ on GitHub! Top↑

On this page