Files
62 |
63 | This page includes all the files available on the furret.css CDN.
64 | Note that all .css files come with minified versions
65 | that are available by adding replacing .css with
66 | .min.css.
67 |
| Item | 73 |Description | 74 |
|---|---|
| Plugins | 79 ||
| /furretcss/js/theme-toggle.js | 82 |Plugin that allows for theme toggling capabilities. | 83 |
| Version 1 | 86 ||
| /furretcss/v1/dark.css | 89 |90 | Dark-themed variant of furret.css version 1. Includes 91 | all features of furret.css in one file. 92 | | 93 |
| /furretcss/v1/library.css | 96 |97 | Automatically-themed variant of furret.css version 1. 98 | Includes all features of furret.css in one file. 99 | | 100 |
| /furretcss/v1/light.css | 103 |104 | Light-themed variant of furret.css version 1. Includes 105 | all features of furret.css in one file. 106 | | 107 |
| Version 2 | 110 ||
| /furretcss/v2/full/dark.css | 113 |114 | Dark-themed variant of furret.css version 2. Includes 115 | all features of furret.css in one file. 116 | | 117 |
| /furretcss/v2/full/light.css | 120 |121 | Light-themed variant of furret.css version 2. Includes 122 | all features of furret.css in one file. 123 | | 124 |
| /furretcss/v2/themes/dark.css | 127 |128 | Exclusively dark theme variables for furret.css version 129 | 2. Must be paired with a cherry-picked file. 130 | | 131 |
| /furretcss/v2/themes/light.css | 134 |135 | Exclusively light theme variables for furret.css version 136 | 2. Must be paired with a cherry-picked file. 137 | | 138 |
| /furretcss/v2/forms.css | 141 |142 | Furret.css version 2 styling for all form-related 143 | elements. Must be paired with at least one themed file. 144 | | 145 |
| /furretcss/v2/images.css | 148 |149 | Furret.css version 2 styling for all media-related 150 | elements. Must be paired with at least one theme file. 151 | | 152 |
| /furretcss/v2/tables.css | 155 |156 | Furret.css version 2 styling for all table-related 157 | elements. Must be paired with at least one theme file. 158 | | 159 |
| /furretcss/v2/typography.css | 162 |163 | Furret.css version 2 styling for all typography-related 164 | elements. Must be paired with at least one theme file. 165 | | 166 |
Theming
64 |65 | Furret.css was built with beauty as a key point. As such, it comes 66 | with seperate light and dark themes, along with syntax highlighting 67 | and theme toggling! 68 |
69 | 70 | 78 | 79 |Dark Theme
80 |
81 | To use the dark theme, change the light in the stylesheet url
82 | to dark, or add the following to the to the
83 | <head> of your HTML:
84 |
<link rel="stylesheet" href="https://css.furret.dev/furretcss/v2/full/dark.min.css" />Syntax Highlighting
90 |
91 | Furret.css does not include syntax highlighting out of the box,
92 | however it can be used with
93 | highlight.js and a custom
94 | stylesheet. To use the syntax highlighter, add the following to the
95 | <head> of your HTML:
96 |
<link rel="stylesheet" href="https://css.furret.dev/highlightjs/light.css" />
100 | <script src="https://css.furret.dev/highlightjs/highlight.js"></script>And the following to the end of your <body>:
<script>hljs.highlightAll();</script>
106 | You can use the dark syntax highlighting theme by replacing
107 | light.css with dark.css.
108 |
Theme Toggling
110 |
111 | In order to provide the best experience with for developers and
112 | users, furret.css defaults to a single theme and comes with
113 | Javascript that allows for a toggleable light and dark theme. This
114 | will respect user preferences and allows for persisted themes. To
115 | add toggleable theming, add the following script to the
116 | <head> of your HTML:
117 |
<script src="https://css.furret.dev/furretcss/js/theme-toggle.js"></script>And the following to the end of your <body>:
<script>furrets.addThemeToggle();</script>Files
This page includes all the files available on the furret.css CDN. Note that all .css files come with minified versions that are available by adding replacing .css with .min.css.
| Item | Description |
|---|---|
| Plugins | |
| /furretcss/js/theme-toggle.js | Plugin that allows for theme toggling capabilities. |
| Version 1 | |
| /furretcss/v1/dark.css | Dark-themed variant of furret.css version 1. Includes all features of furret.css in one file. |
| /furretcss/v1/library.css | Automatically-themed variant of furret.css version 1. Includes all features of furret.css in one file. |
| /furretcss/v1/light.css | Light-themed variant of furret.css version 1. Includes all features of furret.css in one file. |
| Version 2 | |
| /furretcss/v2/full/dark.css | Dark-themed variant of furret.css version 2. Includes all features of furret.css in one file. |
| /furretcss/v2/full/light.css | Light-themed variant of furret.css version 2. Includes all features of furret.css in one file. |
| /furretcss/v2/themes/dark.css | Exclusively dark theme variables for furret.css version 2. Must be paired with a cherry-picked file. |
| /furretcss/v2/themes/light.css | Exclusively light theme variables for furret.css version 2. Must be paired with a cherry-picked file. |
| /furretcss/v2/forms.css | Furret.css version 2 styling for all form-related elements. Must be paired with at least one themed file. |
| /furretcss/v2/images.css | Furret.css version 2 styling for all media-related elements. Must be paired with at least one theme file. |
| /furretcss/v2/tables.css | Furret.css version 2 styling for all table-related elements. Must be paired with at least one theme file. |
| /furretcss/v2/typography.css | Furret.css version 2 styling for all typography-related elements. Must be paired with at least one theme file. |
furret.css
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.
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/" />
2 | <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
3 | <link
4 | href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap"
5 | rel="stylesheet"
6 | />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
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
7 | class Author {
8 | constructor(firstName, lastName, yearBorn) {
9 | this.firstName = firstName;
10 | this.lastName = lastName;
11 | this.yearBorn = yearBorn;
12 | }
13 |
14 | getFullName() {
15 | return this.firstName + ' ' + this.lastName;
16 | }
17 | }
18 |
19 | // Create a new Author
20 | const author = new Author('Douglas', 'Adams', 1952);
21 | author.firstName = 'Doug';
22 |
23 | // Prints "Doug Adams"
24 | const fullName = author.getFullName();
25 | 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:
rayhanadev@protonmail.com (+1) 817-555-0100 817-555-0100Tables
| 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's Logo
Forms
-------------------------------------------------------------------------------- /website/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rayhanadev/furretcss/9b69f8c9d9c8fbc4d76da92c1fd9d84ca54264f9/website/logo.png -------------------------------------------------------------------------------- /website/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rayhanadev/furretcss/9b69f8c9d9c8fbc4d76da92c1fd9d84ca54264f9/website/mstile-150x150.png -------------------------------------------------------------------------------- /website/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 67 | -------------------------------------------------------------------------------- /website/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "furret.css", 3 | "short_name": "furret.css", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#14131e", 17 | "background_color": "#14131e", 18 | "start_url": "https://css.furret.dev", 19 | "display": "standalone" 20 | } 21 | -------------------------------------------------------------------------------- /website/theming.html: -------------------------------------------------------------------------------- 1 |Theming
Furret.css was built with beauty as a key point. As such, it comes with seperate light and dark themes, along with syntax highlighting and theme toggling!
Dark Theme
To use the dark theme, change the light in the stylesheet url to dark, or add the following to the to the <head> of your HTML:
<link rel="stylesheet" href="https://css.furret.dev/furretcss/v2/full/dark.min.css" />Syntax Highlighting
Furret.css does not include syntax highlighting out of the box, however it can be used with highlight.js and a custom stylesheet. To use the syntax highlighter, add the following to the <head> of your HTML:
<link rel="stylesheet" href="https://css.furret.dev/highlightjs/light.css" />
2 | <script src="https://css.furret.dev/highlightjs/highlight.js"></script>And the following to the end of your <body>:
<script>hljs.highlightAll();</script> You can use the dark syntax highlighting theme by replacing light.css with dark.css.
Theme Toggling
In order to provide the best experience with for developers and users, furret.css defaults to a single theme and comes with Javascript that allows for a toggleable light and dark theme. This will respect user preferences and allows for persisted themes. To add toggleable theming, add the following script to the <head> of your HTML:
<script src="https://css.furret.dev/furretcss/js/theme-toggle.js"></script>And the following to the end of your <body>:
<script>furrets.addThemeToggle();</script>