Package Exports

@frontendnetwork/scssscratch
@frontendnetwork/scssscratch/_main.scss

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@frontendnetwork/scssscratch) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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