Skip to main content

Quick start

Try Basil.css online

  • If you prefer a plain HTML setup without any build steps, you can use this JSFiddle as your starting point.
(coming soon)
  • If you are already familiar with Node.js and the concept of build tools, you can also try a complete build setup right within your browser on StackBlitz.
(coming soon)

Using a JS application

Installation is simple. If you are running a Javascript application, follow these steps:

  1. In your terminal install the package with your favourite package manager:
npm install basilcss
yarn add basilcss
pnpm install basilcss
bun install basilcss
  1. Go to your root file and add this line above your global CSS file:
import "basilcss"
  1. Start styling your HTML template.

Using a vanilla HTML/CSS/JS application

If you have a vanilla HTML/CSS/JS project just add this line in your <head> HTML tag above your root css file:

<link rel="stylesheet" href="" />

Make sure it's above so you can overwrite and spice up your styles as you develop your project.

Like so:

// make sure it's above the main css file
<link rel="stylesheet" href="" />
<link rel="stylesheet" href="./styles/main.css" />

See Examples using Basil.css with different tech stacks