A minimal CSS framework that uses no classes to give pages a retro look.
In order to use 8.bit CSS, you should just import the CSS file into the page. File(s) are stored under public/css/.
These are the available themes:
| Theme | Filename |
|---|---|
| all | public/css/8.bit.css |
| blue | public/css/8.bit-blue.css |
| grayscale | public/css/8.bit-grayscale.css |
| green | public/css/8.bit-green.css |
| pink | public/css/8.bit-pink.css |
| red | public/css/8.bit-red.css |
| yellow | public/css/8.bit-yellow.css |
-
Get the appropriate file, based on the theme you want to use
-
Import the CSS in the page
<head>:<link rel="stylesheet" href="css/8.bit-green.css">
The file 8.bit.css can be used to switch theme without loadind different files.
To do so, you should add a CSS class to the html tag: theme-8bit-[color].
8.bit CSS uses CSS variables, to make it easy to customize the theme. See the available CSS variables in the src/scss/_variables.scss.
To customize a variable, add a <style> tag to the page, after the import of the 8.bit CSS file. In the tag, change the variables as follow:
<style>
:root {
--font-family: 'Source Code Pro', monospace;
}
</style>If you change the font with a custom one, don't forget to import the font file as well!
Enjoy!