furret.css

We recently switched domains! You'll find that https://css.furret.codes will redirect here and all of our examples now use our new domain https://css.furret.dev. The old domain will be sunset permanently on March 1st, 2023 at which point it will not take any requests. Migrate on over here y'all :D.

My personal website styling toolkit, modeled after the lovely Water.css by Kognise. Written to allow quick and beautiful styling for simple document-like websites. Furret.css also allows for higher-quality and semantically correct HTML markup because of its extensive tag support. Grab a copy at the cdn.

Install

To get started quickly with furret.css, add the following to the <head> of your HTML:

<link rel="stylesheet" href="https://css.furret.dev/furretcss/v2/full/light.min.css" />

Furret.css comes in full versions and partials that allow for cherry picking. You can find more information about the partials at this page.

Furret.css also uses the fonts Outfit and DM Mono (both of which can be found in Google Fonts), however it works equally as well with the browser-based fallbacks. To use these two fonts add the following to your <head>:

<link rel="preconnect" href="https://fonts.googleapis.com/" />
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,[email protected],300;0,400;0,500;1,300;1,400;1,500&family=Outfit:[email protected];200;300;400;500;600;700;800;900&display=swap"
  rel="stylesheet"
/>

Furret.css has flexible and extensive theming options. To learn more on how to setup theming, visit the theming page.

Typography

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi perspiciatis iste a, quisquam nemo aut sit eligendi exercitationem iure tempore laborum necessitatibus ab odio ad, veniam debitis voluptatibus possimus perferendis.

This is strong, this is bold, this is emphasized, this is italicised, this is underlined, this is striken through, this is marked, this is small, this is deletedand inserted.

This is abbreviated, this is a definition.

This is linked.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

The HTML blockquote Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> cite element.

Header

This is a section of text. Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, aliquid? Voluptates ut, asperiores quibusdam, illo ipsa rem cum autem maiores officiis beatae sint odio eius laboriosam qui repellat eaque atque?

This is a variable, this is inline-code, this is CTRL+C (keyboard) and this is a block of preformatted text:

// Hello World in Javascript
class Author {
  constructor(firstName, lastName, yearBorn) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.yearBorn = yearBorn;
  }

  getFullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

// Create a new Author
const author = new Author('Douglas', 'Adams', 1952);
author.firstName = 'Doug';

// Prints "Doug Adams"
const fullName = author.getFullName();
console.log(fullName);

This text is sample output: ls -a

This is an unordered list:

This is an ordered list:

  1. Item 1

  2. Item 2

  3. Item 3

This is a definition list:

Item 1

About Item 1

Item 2

About Item 2

Item 3

About Item 3

This is an address:

[email protected] (+1) 817-555-0100 817-555-0100

Tables

Item Description Count Availability
Item 1 Lorem ipsum dolor sit, amet consectetur adipisicing elit. 10 True
Item 2 Lorem ipsum dolor sit, amet consectetur adipisicing elit. 10 True
Item 3 Lorem ipsum dolor sit, amet consectetur adipisicing elit. 10 False
Item 4 Lorem ipsum dolor sit, amet consectetur adipisicing elit. 10 True
Totals 40 Total Items 75% Availability

Images

rayhanadev logo
rayhanadev logo

RayhanADev's Logo

Forms

Basic Form Fields

This section has some basic fields such as: text, password, disabled, reset and submit.

Switch Form Fields

This section has switch fields such as: checkbox and radio.

Checkbox
Radios
Buttons
Time Form Fields

This section has time fields such as: date, datetime-local, month, time and week.

Numerical Form Fields

This section has numerical fields such as: number and range.

FileData Form Fields

This section has filedata fields such as: file and image.

Submit Buttons

This section has submit fields such as: submit and reset.