# GHOSTs UI

This is my ui "framework" mainly based on semantic HTML, while this project is mostly for my personal sites and projects I do expose some docs below.

> NOTE: since it's my personal ui lib it might change often and won't be strictly documented - might make a public dirivitive in the future

# Use

You can either import or use a cdn:

-   Importing

    -   `ghostsui/scss/ghostsui.scss`
    -   `ghostsui/css/ghostsui.css`

-   CDN
    ```html
    <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/ghostsui@1/css/ghostsui.css"
    />
    ```

# What is in this:

[Album](https://imgur.com/a/9H3Uo2w) : [REPL](https://svelte.dev/repl/f913eb2fd8c04a0f81ed929e4d5c858d?version=3.42.5)

-   ### Text

    ![](https://i.imgur.com/5GowlC7.png)

-   ### Flex

    ![](https://i.imgur.com/8iXMH14.png)

-   ### Anchors

    ![](https://i.imgur.com/zsjP7Cg.png)

-   ### Banners

    ![](https://i.imgur.com/GcywaCQ.png)

-   ### Buttons

    ![](https://i.imgur.com/02VXllP.png)

-   ### Cards

    ![](https://i.imgur.com/92Ry2Cu.png)

-   ### Input
    ![](https://i.imgur.com/h5pF3Lz.png)

...more, I got bored of taking screen shots

# To Do

-   [x] Better outline
-   [x] Refine variables
-   [ ] More inputs (radio, select, number, etc)
-   [x] Section (margin bottom (rfs probably))
-   [x] Switch back to button class as I incorrectly used role="button"
-   [x] Tables
-   [x] Highlight colour
-   [ ] Fix placeholder