Bamboo CSS - A classless CSS library

Anh Tran — Mon, 08 Mar 2021 06:18:45 +0000

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/bamboo.css@1.3.4/dist/light.min.css">

<!-- Dark theme -->
<link rel="stylesheet" href="https://unpkg.com/bamboo.css@1.3.4/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!

DEV Community: Anh Tran

Bamboo CSS - A classless CSS library

How to use Bamboo CSS