bamboo

Bamboo CSS

Bamboo CSS - A classless CSS utility for your HTML | Product Hunt

A classless CSS library which adds nice default style for all HTML elements. It saves you a lot of time when you need to style HTML for your HTML/React/Vue demo on CodePen/CodeSandbox. It can also be used as a base style for your blog/website.

Bamboo CSS uses normalize.css and sanitize.css to ensure consistent styling across browsers (no IE support). When using Bamboo CSS, you don’t need to include normalize.css or sanitize.css anymore.

Bamboo CSS uses CSS variables for theming, allowing to dynamically change the theme if you want. By default, it provides 2 themes for light and dark modes. The theme is automatically switched based on the system mode.

All CSS variables are prefixed with --b-, allowing to use Bamboo CSS with any CSS framework without conflicts.

Bamboo CSS is very lightweight, only 1.67KB (minified and gzipped).

View demo

Learn more why I create Bamboo CSS

Features:

Usage

CDN

Latest Version + πŸŒ™/β˜€ Automatic Theme

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

πŸŒ™/β˜€ Automatic Theme

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

πŸŒ™ Dark Theme

<link rel="stylesheet" href="https://unpkg.com/bamboo.css@1.3.7/dist/dark.min.css">

β˜€ Light Theme

<link rel="stylesheet" href="https://unpkg.com/bamboo.css@1.3.7/dist/light.min.css">

NPM

npm install --save bamboo.css

Download

See https://rilwis.github.io/bamboo/dist/bamboo.min.css

Theming

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;
	--b-focus: #d8dee9;
}

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

Credits