timmybytes / splate

An SCSS boilerplate for web development projects.

An SCSS Boilerplate

_{Built with ❤︎ by Timothy Merritt}

Splate is an SCSS boilerplate (S+plate) for use in styling frontend web development projects. It’s based on the 7-1 SCSS format. Splate keeps your styles neat and tidy, and provides leeway for adding your own custom rules, with easy compiling and documentation creation via SassDoc.

View Splate Documentation

Version 2.0.0

Splate now uses sass (Dart SASS) for compiling SCSS, replacing the now deprecated node-sass.

What is ‘SCSS’?

SCSS (Sassy CSS) is a syntax style for SASS (Syntactically Awesome Style Sheets), which is itself an extension language for CSS. What does any of that mean? Webpages and web-based projects are styled with CSS, and while much can be achieved with default CSS, SCSS allows for more dynamic stylesheets that are easier to maintain, and add deeper programmatic functionality with utilities like variables, modules, nesting, and functions.

One of SCSS’s best features is the ability to separate styles into partials, allowing you to organize your styles into a more modular filetree that’s easier to work with. The partials contain small, modular bits of SCSS, which are imported into a main SCSS file before compiling. Splate is a pre-made directory structure for just such a use case.

Usage

To use Splate in your project, clone the repo, write your preferred styles in the src/scss/ files. You can choose to just compile the SCSS into CSS, preserve your SCSS files too, and/or integrate everything with any kind of HTML file structure into a finished dist/ directory.

Clone Splate locally, and install dependencies

Splate uses sass (Dart SASS) for compiling, copyfiles for cross-platform file copying, and sassdoc for creating a complete documentation site for your SCSS.

git clone https://github.com/timmybytes/splate.git
cd splate
npm install

Compile SCSS into CSS

Compiled CSS goes in the dist/ directory be default.

npm run scss

Compile SCSS live and watch for changes

npm run scss:watch

Copy all SCSS and HTML files from src/ to dist/

npm run build

Generate SassDoc documentation

Outputs to docs/ in root. See below for further instructions.

npm run doc

Create complete dist/ files and SCSS documentation

Finds and copies all HTML files and SCSS (and preserves their directory structures) to dist/, compiles all SCSS into single css file in dist/css/main.css, and creates/updates sassdoc/ simultaneously, either overwriting previous content or creating directories/files as needed.

npm run prod

This will leave you with a finished, distributable directory for your project.

SassDoc

Splate uses SassDoc for creating optional SCSS documentation.

The sassdoc/ directory contains very basic initial documentation for the project. SassDoc will overwrite the sassdoc/ directory each time it's generated and you can view or deploy the included html file for reference.

Contributing

I’m not currently looking for contributions to Splate. However, if you feel something could be improved, feel free to submit an issue for discussion. Any and all ideas will be considered!

License

This project is licensed under the MIT License. Splate is just a bunch of files—fork, tweak, and destroy them as you see fit.