Use
Using FVSCL is pretty straighforward if you're comfortable using Svelte or have experience with modern web frameworks.
It's an installable NPM package so hopefully none of this is too complicated.
Step 1: Installing FVSCL
npx degit sveltejs/template my-new-fvscl-app
cd my-new-fvscl-app
npm i fvscl --save-dev
npm i
npm run dev
The above code will install svelte in a directory called my-new-fvscl-app with a base template and with FVSCL available to import.
If all has gone well then the app should start running locally - terminal should tell you where.
Step 2: Using components
<script>
import {Heading, Button} from "fvscl";
</script>
<Heading level="1">Hello world</Heading>
<Button onClick={() => alert('Clicky click')}>Button</Button>That's basically it.
Step 3: Customising the CSS
Due to FVSCL using custom css properties it's easy to override things. By applying some global variables to :root or html then it's fast to get started. Some components have specific css variables that can override certain stylistic choices.
html {
--min-width: 320;
--max-width: 1440;
--min-size: 14;
--max-size: 18;
--min-ratio: 1.1;
--max-ratio: 1.4;
}The above code will set the base size at screens of width 320px to be 14px and the ratio between steps (e.g between h1 and h2 elements) will be 1.1. . At screen widths of 1440px the base size will be 18px and the ratio between steps will be 1.4.
FVSCL uses 2 negative steps and 5 positive steps from the base unit.
See the code on gitlab for an example of how to do it or read the Utopia article for much more information.