foundry-css

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.

Usage no npm install needed!

<script type="module">
  import foundryCss from 'https://cdn.skypack.dev/foundry-css';
</script>

README

FoundryCSS

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.

Getting Started

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!