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 for you.

Usage

Getting started:

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

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:

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.

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.

: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