RayhanADev's Logo
We recently switched domains! You'll find that
https://css.furret.codeswill redirect here and all of our examples now use our new domainhttps://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.
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.
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.
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
citeattribute, while a text representation of the source can be given using the<cite>cite element.
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:
Item A
Item B
Item C
This is an ordered list:
Item 1
Item 2
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| 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 |
RayhanADev's Logo