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="https://unpkg.com/basilcss@latest/basil.css" />

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

Like so:​

<head>
  // make sure it's above the main css file
  <link rel="stylesheet" href="https://unpkg.com/basilcss@latest/basil.css" />
  <link rel="stylesheet" href="./styles/main.css" />
</head>

See Examples using Basil.css with different tech stacks​

Svelte icon