@frontendnetwork/scssscratch v1.0.0
SCSS Scratch
SCSS Scratch is a barebones structure/starting-point for SCSS-projects.
👨🏼💻 Usage
Installation
Download the repository and import it into your SASS-Processor or clone it:
git clone https://github.com/FrontEndNetWork/SCSS-Scratch
Then run:
npm install
You're good to go now!
Structure
_globals
In the style.scss
-file, you'll find the following config:
@use "node_modules/minireset.css/minireset";
@use '_globals/mixins';
@use '_globals/utilities' as *;
@use '_globals/variables' as *;
@use '_globals/colors';
@use '_globals/fonts';
@use "main";
@use "shame";
This includes a version of minireset.css
, mixins and functions (e.g. rem-calculation) (_globals/mixins.scss
), utilities of barebones.scss
(_globals/utilities.scss
) and documents for variables, colors and fonts which are set for the whole page.
Flexbox Grid
If you need a flexbox-grid, you can uncomment the follwoing line:
// @use '_globals/grid';
Main Styles
Do your main styling in the main.scss
-file. It it imported with:
@use "main";
Shame
For anything quick and dirty, which will be cleaned up later, you can use the shame.scss
stylesheet. It it imported with:
@use "shame"
_modules
In /_modules/mod-logo.scss
you'll find a file which can be used as an example for how the included mixins and utilities are used.
Please remove this file before processing.
👩⚖️ License
All text and code in this repository is licensed under WTFPL.
🤝 Credits
- Created by @philipbrembeck
- This is a fork & recreation of barebones