An Easy-to-use CSS UI KIT inspired by 📺 Microsoft Window 95

Feature Request & Issue

Checkout this link https://github.com/chunza2542/acacia/issues,

Installation

Download dist folder to your project directory, then put this code inside you head tag.

<link rel="stylesheet" href="path/to/your/acacia.min.css">

Example

This code showing an example of Copying Files panel

<div class="aca-panel">
    <div class="header">Copying Files...</div>
    <div class="body">
      Source:<br>
      L:\COMMON\CLIENT32\WIN95\MAIN<br>
      Destination:<br>
      C:\WINDOW<br><br>
      <div class="aca-progress">
          <div style="width: 35%;" class="aca-progress-bar"></div>
      </div>
      <br>
      <center>
          <button class="aca-button">Cancel</button>
      </center>
    </div>
</div>

Documentation

Button

• aca-button - MS WIN95 Button class
• suggesstion - Suggestion Button
• aca-button-link - Button for Link Button or link tag

<button class="aca-button suggestion">OK...</button>
<button class="aca-button">Cancel...</button>
<button class="aca-button">Browse...</button>
<button class="aca-button-link">Open in browser</button>

Input

• aca-text-field - MS WIN95 Text Field class
• aca-select - MS WIN95 Select Input class
• aca-checkbox - MS WIN95 Checkbox Input class (Experiment)
• aca-radio - MS WIN95 Radio Input class (Experiment)

<input type="text" class="aca-text-field" placeholder="Example...">

<select class="aca-select">
	<option value="">Bangkok</option>
 	<option value="">This is a very long text</option>
</select>

Progress Bar

• aca-progress - MS WIN95 Progress Bar
• aca-progress-bar - Progress Bar use inside class aca-progress

<div class="aca-progress">
	<div style="width: 35%;" class="aca-progress-bar"></div>
</div>

Panel

• aca-panel - MS WIN95 Panel Container
• header - Header Tab use inside class aca-panel
• body - Header Tab use inside class aca-panel
• footer - Footer Tab use inside class body

<div class="aca-panel">
    <div class="header">Heading</div>
    <div class="body">
    	Something...
	<div class="footer">
            <button class="aca-button suggestion">OK</button>
            <button class="aca-button">Cancel</button>
            <button class="aca-button">Browse...</button>
       	</div>
    </div>
</div>

Contribution Guide

1. Fork & clone this repository to your local directory

git clone https://github.com/chunza2542/acacia.git

2. Run project in development environment

yarn dev # this will run gulp development task

3. After finish updating, Send pull request to this repo.
4. That's it!

---

Made with 💖 by Chun Rapeepat @chunza2542, Codebase from https://github.com/BioMaRu/biomatic, Thank.