We have offline codepen alternatives like WebMaker, but these can be limiting. Therefore we want a local environment thats quick to setup and affords us a CSS Ecosystem to both pull from and publish to.

Approach

Install the @superflycss/cli, create a new project, and start the live reload server:

npm i -g @superflycss/cli
sfc new project
cd project
sfc serve 

Take a look at the src/test/html/index.html file in vscode:

code src/test/html/index.html

Notice that it contains a link element importing bootstrap 4 via CDN.

You can now make changes to this file or the css content in src/main/css or src/test/css and see these changes live reloaded. Happy prototyping!

Want More?

This setup allows you to add SuperflyCSS packages and build these into your main css file on the fly.

It generates the project and start html template for you.

There’s a lot more like standardized project layout, nunjucks templating support, CSS minification, etc.

Explore the CLI documentation and superflycss uber repository to learn more.