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.
Splate now uses sass
(Dart SASS) for compiling SCSS, replacing the now deprecated node-sass
.
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.
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.
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
Compiled CSS goes in the dist/
directory be default.
npm run scss
npm run scss:watch
npm run build
Outputs to docs/
in root. See below for further instructions.
npm run doc
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.
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.
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!
This project is licensed under the MIT License. Splate is just a bunch of files—fork, tweak, and destroy them as you see fit.