SINISTER
Sinister is an SCSS and JS utility library.
The SCSS library tries to simplify daily common cases like creating a grid, managing spacings like paddings, gaps etc, managing project color palette in SCSS level as well as give usefull utility mixin and functions. For more read the documentation.
You can implement Sinister in your SCSS routine just by importing it to your SCSS file.
The JS part is currently in hietus, with not much to offer.
Most of the mixins
and functions
are unit tested and work as expected.
That being said, this is a one-man project. I only work on the it only when I have some free time, so be aware that some things might not work as intended since coverage is not 100% yet.
Installation
npm i @get-sinister/sass
Changelog
Not working at the moment
Configuration
In order for sinister to work, 2 files are needed.
-
In your root directory, where
npm_package
is located, create a file called_sin.config.scss
.. ├── package.json ├── node_modules/ ├── _sin.config.scss
Then open
_sin.config.scss
file and add the boilerplate to start working._sin.config.scss content @use './node_modules/@get-sinister/sass/sin-core/functions/public/set-config-func' as sin; $configuration: sin.set-config( ( breakpoints: ( new-breakpoint: 420px; ) ) );
tip: at any point in your scss file you can type
@debug help();
to print sinister configuration values.tip: keep in mind that if you update
_sin.config.scss
values, and you are usingsass --watch
you will have to restart.
-
Inside your scss files directory create a file called
_sin.scss
. You will have to@use
this file to load sinister in your project.├── package.json ├── node_modules/ ├── _sin.config.scss ├── scss/ ├── custom.scss # Main scss file ├── pages/ # Folder with more scss files ├── _sin.scss # file to import `Sinister` to your project.
To see the scema and default values check the documentation.
-
The functionality of Sinister lies within
sin-core
folder. All you have to do is load this folder into a file in order to start working with it. Open_sin.scss
file and add the@forward
link to the package.@forward '../node_modules/@get-sinister/sass/sin-core';
-
Importing sinister to a new file is easy. Use the
@use
to import it to the file you are working on. Read More
ex.
@use '../sin' as *;
Keep in mind that the path is relative.
Documentation
For more, refer to the online documentation.
- Documentation
- For older versions check the archive
Warning!
The software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.the software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.