Bee UI is a lightweight SCSS based UI Framework. You can use, manage and contribute with it in easyest way...
- Beautiful Components ─ text
- Lightweight ─ text
- Responsive ─ text
- Zero-dependency ─ text
Shown install method
If you want to use all of our compmonent, just add this CDN inside of your <head></head> block.
<link rel="stylesheet" href="https://www.xirosoft.com/bee-ui/dist/css/bee-ui.all.min.css" />If you want to use single or some number of components.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image-box - Bee UI</title>
<!-- Bee UI CDN -->
<link rel="stylesheet" href="https://www.xirosoft.com/bee-ui/dist/css/beeui.all.min.css" />
<link rel="stylesheet" href="https://www.xirosoft.com/bee-ui/dist/css/components/image-box.css" />
</head>
<body>
<div class="image-box">
<div class="image-box-header">
<img src="image-box.webp" alt="image-box-header" />
</div>
<div class="image-box-content">
<h2 class="image-box-title">
<a href="#">This is an <strong>image box</strong></a>
</h2>
<div class="image-box-desc">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus, debitis!</p>
</div>
</div>
</div>
</body>
</html>Use Gitpod, a free online dev environment for GitHub.
Or clone locally:
$ git clone https://github.com/xirosoft/bee-ui.git
$ cd bee-ui
$ npm install
$ npm watch.
├── dist/ # Compiled files
└── components/ # Compiled Components
├── docs/ # Documentation
└── src/ # Source
├── builds/ #
├── components/ # Components
├── internal/ # Function, mixin, theme...
└── utils/ # SCSS Utils styles
├── bee-all.scss #
└── bee-core.scss #
This project exists thanks to all the people who contribute. [Contribute].
Themefy
- Folder Stucture : Cirrus