Skip to content

Latest commit

 

History

History
111 lines (99 loc) · 3.08 KB

README.md

File metadata and controls

111 lines (99 loc) · 3.08 KB
Raw

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
  1. Run project in development environment
yarn dev # this will run gulp development task
  1. After finish updating, Send pull request to this repo.
  2. That's it!
Made with 💖 by Chun Rapeepat @chunza2542, Codebase from https://github.com/BioMaRu/biomatic, Thank.