@terencequ/chainsaw v0.0.79
Chainsaw
Links
GitHub: https://github.com/terencequ/chainsaw
NPM: https://www.npmjs.com/package/@terencequ/chainsaw
Description
Chainsaw is a CSS library for my personal use. Written in SASS, this library is customisable, has a wide range of helper classes, and contributes to providing a unique style that I can employ in all my websites.
Me, looking at my ugly websites I made before learning CSS properly...
If anyone ever finds this, hope this brings you some value!
Importing the stylesheet
Importing the stylesheet into your website is easy. Make sure you have a copy of the .css file generated by the repository.
Place it in a <link rel="stylesheet" href="...">, and everything should be good to go.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Import the CSS stylesheet. -->
<link rel="stylesheet" href="/dist/index.css">
<title>Chainsaw Display Website</title>
</head>
<body>
...
...
...
</body>
</html>Theming
This .css library uses SASS mixins to generate styling for a bunch of pre-made themes. If you have access to the source .scss code, you can create your own theme maps.
To use the maps, your html <body> must be structured like so:
<!-- Body needs to have a 'color-theme-...' class, and a 'text-theme-...' class. -->
<body class="color-theme-light text-theme-goofy">
<div class="chainsaw-container">
...
</div>
</body>There needs to be a color theme class, and a text theme class, and one div must be made to wrap the entire website's contents, with the class chainsaw-container.
- Color theme class must be a class on the
<body>, and the naming followscolor-theme-{theme key}. - Text theme class must be a class on the
<body>, and the naming follows-theme-{theme key}.
See all available theme types in src/core/_themes.scss.