Introducing Bamboo CSS - A classless CSS library

I usually create demos for JavaScript or React like creating object from form data. For such demos, I always have to add some basic styles for HTML elements to make them look good. Using a CSS framework like Bootstrap or Tailwind CSS is overkill, so I decided to create a CSS library to do that. And it's Bamboo CSS.

Bamboo CSS is a classless CSS library that adds nice default styles for HTML elements.

View demo | See Github repo

When creating Bamboo CSS, I search for similar projects and I found some of them like water.css and new.css. But they're too opinionated that I can't use them as base style for my blog or websites.

It's worth noting that the goal of Bamboo CSS is not only being used as a standalone CSS library, but also with other CSS frameworks. That means you can use Bamboo CSS as a base style and build your website/blog on that.

So, I fork new.css to Bamboo CSS because new.css is less opinionated and supports more HTML elements. When doing so, I setup these goals for Bamboo CSS to make it better the other available classless libraries:

• Less opinionated
• Can be used as a base style for your website/blog or with other CSS frameworks
• Beautiful
• Supports for as much HTML elements as possible
• Responsive
• Consistent styling across browsers
• Lightweight
• Incorporate with best CSS practices
• Supports light and dark mode
• Themeable with scoped CSS variables

How to use Bamboo CSS

Using Bamboo CSS is simple, just add the following line into your HTML:

<link rel="stylesheet" href="https://unpkg.com/bamboo.css">

The default stylesheet provides automatic light/dark mode switching based on system preference.

If you prefer a light or dark mode, use the snippets below:

<!-- Light theme -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/light.min.css">

<!-- Dark theme -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/dark.min.css">

If you want to use it with your JavaScript app, you can install it via NPM:

npm install --save bamboo.css

Bamboo CSS provides the following CSS variables for theming:

:root {
    --b-font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --b-font-mono: Consolas, Monaco, monospace;

    --b-txt: #2e3440;
    --b-bg-1: #fff;
    --b-bg-2: #eceff4;
    --b-line: #eceff4;
    --b-link: #bf616a;
    --b-btn-bg: #242933;
    --b-btn-txt: #fff;
}

All CSS variables are prefixed with --b so it's safe to use Bamboo CSS with your existing websites.

Check more about the library on Github and if you like it, please give it a star!