gayacss v1.0.1

GayaCSS

Provides small yet useful web UI components written in SASS and vanilla JavaScript.

• ~17KB minified CSS (based on normalize.css)
• ~12KB minified JS (zero dependecy)

NOTE: This project is in the early stages. You can browse demo components inside tests directory.

Installation

1. Download compiled + minified files from dist folder.
2. Or npm i gayacss

Elements and Components

1. Simple Flexbox Grid
2. Forms
   • Custom Select (w/ multiple select like tags input)
   • Custom File Input
   • Custom Number Input
3. Dropdowns
4. Modals and Confirmation Dialog
5. Tables
6. Buttons
7. Chips
8. Badges
9. Pagination
10. Tabs
11. Messages
12. comming soon..

Flexbox Grid

<div class="cols">
    <div class="col col-12 md:col-6"></div>
    <div class="col col-12 md:col-4"></div>
    <div class="col col-12 md:col-2"></div>
</div>

Input With Icon

<div class="control">
    <i class="fas fa-user icon"></i>
    <input type="text" placeholder="Input text with icon">
</div>

Custom Select

Searchable option, support single and multiple select. In multiple mode, each selected option displayed as a chip with close button.

<!-- single select -->
<div class="control control-select">
    <select name="single-select" id="single-select" aria-placeholder="custom single select">
        <option value="val1">Option 1</option>
        <option value="val2">Option 2</option>
        <option value="val3">Option 3</option>
        <option value="val4">Option 4</option>
        <option value="val5">Option 5</option>
    </select>
</div>

Custom File Input

<div class="control control-group control-file" data-open-file="#example-control-file" data-filename="#filename-to-display">
    <input type="file" id="example-control-file">
    <input type="text" id="filename-to-display" readonly placeholder="custom input file">
    <button class="btn btn-primary">Select File</button>
</div>

Custom Number Input

<div class="control control-group control-num">
    <span class="control-group-append">USD</span>
    <input type="number" id="example-control-number" placeholder="Custom number control">
    <button data-increment="#example-control-number" class="btn btn-light">+</button>
    <button data-decrement="#example-control-number" class="btn btn-light">-</button>
</div>

Dropdowns

<button class="btn btn-primary" data-dropdown="#drop1">Open Dropdown</button>
<div class="dropdown-content" id="drop1">Dropdown Content</div>

Modals

<button class="btn btn-secondary" data-modal="#modal-sm">Open Small Modal</button>
<div class="modal modal-sm" id="modal-sm">
    <div class="modal-box">
        <div class="modal-box-header">
            <i class="fas fa-user icon"></i>
            <h5 class="modal-box-title">My Modal</h5>
        </div>
        <div class="modal-box-content">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, nesciunt.</p>
        </div>
        <div class="modal-box-footer">
            <button class="btn btn-primary">Awesome!</button>
            <button class="btn btn-secondary" data-modal-close>Close Modal</button>
        </div>
    </div>
</div>

You can make confirmation dialog by utilizing data-confirm attribute.

<!-- use data-form to submit the form, or data-href to create link button -->
<button class="btn btn-error"
    data-confirm="The Confirmation Title"
    data-icon="fas fa-home"
    data-size="modal-md"
    data-text="Are you sure you want to remove this item?"
    data-button-confirm="Yes, I'm dead serious!"
    data-button-cancel="Cancel"
    data-form="#myform">
    Open Confirmation
</button>

Development

GayaCSS uses laravel-mix to bundle CSS and JS file.

• Development mode: npm run dev
• Production mode: npm run prod
• Watch for changes: npm run watch

Browser Support

GayaCSS uses autoprefixer to make styles compatible with older browsers.

• Firefox ESR
• Chrome (LAST 4)
• Safari (LAST 4)
• Opera (LAST 4)
• Edge >= 12
• Explorer >= 11