# simple-marko-ui

> A simple library of UI components for MarkoJS.

Latest version **0.0.3** (published 2021-12-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install simple-marko-ui
pnpm add simple-marko-ui
yarn add simple-marko-ui
bun add simple-marko-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2021-12-10 |
| First published | 2021-11-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 53 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Hunter Stratton |
| Maintainers | paradxil |
| Keywords | marko, markojs, ui, components, marko-components |

## Links

- npm: https://www.npmjs.com/package/simple-marko-ui
- Repository: https://github.com/Paradxil/simple-marko-ui
- Homepage: https://github.com/Paradxil/simple-marko-ui#readme
- Issues: https://github.com/Paradxil/simple-marko-ui/issues
- npm.io page: https://npm.io/package/simple-marko-ui

## Dependencies (6)

- [marko](https://npm.io/package/marko.md) ^5.9.0
- [date-fns](https://npm.io/package/date-fns.md) ^2.24.0
- [open-color](https://npm.io/package/open-color.md) ^1.9.1
- [@marko/serve](https://npm.io/package/@marko/serve.md) ^4.2.1
- [feather-marko](https://npm.io/package/feather-marko.md) ^0.0.4
- [@popperjs/core](https://npm.io/package/@popperjs/core.md) ^2.10.2

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 0.0.3 (latest) — 2021-12-10
- 0.0.2 — 2021-11-24
- 0.0.1 — 2021-11-24

## README

# simple-marko-ui
A simple set of UI components for MarkoJS. Created to make ui design with MarkoJS fast and limit the amount of custom styles required.

## Install
`npm i simple-marko-ui`

That's it!
Marko will  [automatically find the tags](https://markojs.com/docs/custom-tags/#using-tags-from-npm) for you.

## Usage
**Getting started:**

simple-marko-ui tags are all prefixed with `ui-` for easy use. Simply drop them into your Marko files.

```marko
ui-text -- Hello world!
```

See individual component documentation for details about what attributes and options each component supports.

**Attributes:**

Most components accept a standard base set of attributes that allow for making easy style or layout changes. Individual components also often have attributes specific to their use cases.

|Attribute|Description|
|---|---|
|`filled`|Fill the background with the primary color.|
|`secondary`|Fill the background with the secondary color.|
|`light`|Use the light text color.|
|`dark`|Use the dark text color.|
|`rounded`|Round the corners.|
|`raised`|Display a box shadow around the element.|
|`outlined`|Display a border around the element.|
|`padded`|Pad the element.|
|`paddedwide`|Pad the element with more padding.|
|`paddednarrow`|Pad the element with less padding.|
|`fullwidth`|Fill available horizontal space.|
|`hidden`|Don't display this element.|

Example: 
```marko
ui-button text='Click Me!' trailingicon='arrow-right' raised rounded paddedwide
```

**Layout:**

Using the `ui-linear-layout` component makes it easier to quickly create responsive designs. For example, the following code creates a three column layout that wraps when needed. This component uses flexbox to position elements. It default to a horizontal layout but accepts the `vertical` attribute. By nesting `ui-linear-layout` components you can quickly create complex layouts.

```marko
ui-linear-layout wrap
    @element
        ui-linear-layout vertical
            @element
                ui-heading -- Column 1
    @element
        ui-linear-layout vertical
            @element
                ui-heading -- Column 2
    @element
        ui-linear-layout vertical
            @element
                ui-heading -- Column 3
```

**Theming:**

Theming is currently done using css variables. Note that use of `!important` is required. An easier method of theming using tag attributes is planned. This would also allow for nested themes.

```css
:root {
    --primary: #fff !important;
    --primary-dark: #f1f3f5 !important;
    --text-dark: #495057 !important;
    --text-light: #fff !important;
    --border: #ced4da !important;
    --rounded-radius: 5px !important;
    --padding: 8px !important;
    --padding-narrow: 4px !important;
    --padding-wide: 16px !important;
    --text-font: sans-serif !important;
    --button-font: sans-serif !important;
    --header-font: sans-serif !important;
    --font-size-h1: 2.5em !important;
}
```

## Components
Completed:
- `ui-button`
- `ui-combobox`
- `ui-container`
- `ui-date-select`
- `ui-duration`
- `ui-emphasis`
- `ui-heading`
- `ui-horizontal-layout` (see `ui-linear-layout`)
- `ui-icon`
- `ui-label`
- `ui-linear-layout`
- `ui-spacer`
- `ui-submit`
- `ui-text`
- `ui-timer`
- `ui-vertical-layout` (see `ui-linear-layout`)

In progress (usable):
- `ui-card`
- `ui-color-select`
- `ui-date`
- `ui-list`
- `ui-pageview`
- `ui-popover`
- `ui-select`
- `ui-sidebar`
- `ui-textbox`
- `ui-time`

Planned:
- `ui-tooltip`

## Contribute
Feel free to submit bug reports, issues, or feature requests.

Pull requests are welcome.

## License
This project is licensed under MIT.

Copyright (c) 2021 Hunter Stratton

## Developers
Hunter Stratton

---
_Source: https://npm.io/package/simple-marko-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._