FoundryCSS is a Sass based, semi-opinionated CSS framework - opinionated enough to help speed up the development process of small or uncomplicated designs/interfaces; but not so opinionated to impede larger, more complicated project builds.
###1. Install Foundry as a dependency in your project; npm install foundry-css
###2. Dive into Foundry's node_modules folder, and copy the templates/_theme.scss file into your project's SCSS directory.
###3. Make sure your SCSS compiler’s build task has access to FoundryCSS's node_modules path; src via the node_modules folder;
"scripts": {
"build": "node-sass-chokidar --include-path ./node_modules/foundry-css/src resources/scss/ -o css/"
}
###4. Make sure your project’s main SCSS file loads your modules in the following order; // 1. Import the FoundryCSS core @import ‘foundry-core’;
// 2. Import your project-level theme file
@import ‘{path-to-your-scss}/theme.scss’;
// 3. Import the FoundryCSS UI styles
@import ‘foundry-ui’;
// 4. Import your project-specific .scss modules
@import ‘{path-to-your-scss}/blocks/my-buttons’;
@import ’{path-to-your-scss}/components/my-text-inputs‘;
...
###5 Theming & Customisation
Open up the _theme.scss file you copied over from node_modules and tweak it's values to suit your project; FoundryCSS will honour any uncommented value in this file over it's own defaults. Colours, fonts, and global spacing can all be controlled from this file.
###6. Get cracking! Sprinkle FoundryCSS styles into your project wherever you need them!