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