A lightweight, zero-JS composable HTML-UI library designed for those who build on desktop and aim for mobile.
Bakung.css is a lightweight, pure-css framework offering config-free customization, and is easy to tweak without needing to know SASS/SCSS or even touch the original CSS file. We achieve this by leveraging CSS variables.
Although this is a pure-CSS framework with no built-in JavaScript, we provide dedicated CSS attributes that you can leverage to integrate your own custom scripts.
Our versioning is based on the year and month. Version 26.1.0 was launched in January 2026; all future releases, including minor updates, will follow this year/month format, for ex. 27.3.0 is release in March 2027.
INSTALL
npm i @bakung-ui/bakung.cssor
yarn add @bakung-ui/bakung.cssDownload
https://github.com/bakung-ui/bakung.css/releases/latest/
CDN
https://app.unpkg.com/@bakung-ui/bakung.css@latest/
https://cdn.jsdelivr.net/npm/@bakung-ui/bakung.css@latest/
REQUIREMENTS
<!DOCTYPE html>
<html lang="">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400&family=Montserrat:wght@100..900&family=Sometype+Mono:wght@400..700&display=swap" rel="stylesheet">
<!--
Put your css files link here
-->
</head>
<body>
</body>
</html>CUSTOMIZE
[MAIN FOLDER]
├ css // Files in here are editable
| ├ _helpers.css // You can edit, though only to a limited extent
| ├ _styles.css // You can edit, though only to a limited extent
| ├ _utilities.css
| ├ _variables.css
| └ index.css // Entry file to merge css files
└ dist
├ bakung-lite-utils.min.css // Included _utilities.css
├ bakung-lite-utils.static.min.css // Without variables
├ bakung-lite-vars.min.css // Included _variables.css
├ bakung-lite.min.css // Without _utilities.css & _variables.css
├ bakung-lite.static.min.css // Without variables
├ bakung.css
├ bakung.min.css // You shall use this for production
└ bakung.min.static.css // Without variables
Feel free to customize files in the css folder especially _variables.css file.
To customize the styles to your preference, make sure @bakung-ui/minimax.css is installed , then you can either modify the minimax.css files directly or apply overrides within _variables.css and _styles.css file.
After making changes, run command npm run build to build your changes, check your new build files in dist folder.
When changing the font-family in your CSS, ensure you also update the corresponding font link in the HTML <head>.
- Chromium*
- Firefox
- Safari
Please read the contribution guidelines in order to make the contribution process easy and effective for everyone involved.
If you intend to create repositories or distribution packages related to bakung.css, please follow the bakung-ui guidelines to ensure discoverability and ease of use for the community, See the guideline.
