/elm-ui

UI Library in Elm

Primary LanguageCSSBSD 2-Clause "Simplified" LicenseBSD-2-Clause

⚠️ This library is still under development use it in production at your own risk. ⚠️

Elm UI

An opinionated UI library and application framework for the web in Elm, following the Elm Architecture.

Build Status NPM Package Dependencies

Getting Started

Elm-UI provides you the following features:

  • An application framework:
    • Elm is used for the frontend logic
    • Sass is used for the stylesheets
    • Lots of components ready to be used
    • Support for environment configurations
  • A development workflow:
    • A command for scaffolding a project with a demo to quickly get started
    • A development server which will reload your page when an Elm file is changed and inject the css when a Sass file is changed (via BrowserSync)
    • The error messages are displayed (with color if available) in the browser both for Elm and Sass
    • A build command to build your final files
  • Conventions to keep things simple

Installing

Elm-UI is avaiable as a command line client via NPM:

npm install elm-ui -g

See Command Line Interface (CLI) for documentation.

Scaffolding a new Project

To scaffold a new project just use the elm-ui init my-project-name command.

The elm-ui.json

The project configuration lives in the elm-ui.json file, which is a clone of Elms elm-package.json file. This is needed because the Elm Package Manager doesn't support installing packages from Github, so Elm-UI manages the the actual elm-package-json.

You can add elm packages and source directories that you need into the elm-ui.json file. Elm-UI dependecies are automatically added when installing, you can see them here.

Installing Packages

After you scaffolded a project you need to install Elm packages with the elm-ui install command.

Starting the development server

Use the elm-ui server to start a development server.

There are three applications are available on different ports:

  • localhost:8001 - The main application
  • localhost:8002 - The proxied application that reloads on changes
  • localhost:8003 - The BrowserSync UI (options)

Building

  • Build the final files with elm-ui build into dist directory.

Implemented Componets

All of the components business logic is written completely in Elm (while using the minimum Native bindings possible).

Interactive components so far:

  • Ui.App - The base for a web or mobile application
  • Ui.Button - Basic button component with different sizes and styles
  • Ui.ButtonGroup - A component for handling multiple buttons in a row
  • Ui.IconButton - A button with an icon on the left or right side
  • Ui.Calendar - A calendar component (orignially for the date picker)
  • Ui.Checkbox - Basic checkobx with three variations (checkbox, toggle, radio)
  • Ui.Chooser - A searchable, customizable select box with lots of features
  • Ui.ColorPanel - An interface for manipulating a hue, saturation and value properties of a color
  • Ui.ColorPicker - An input for selecting a color with a color panel
  • Ui.DatePicker - A date picker component using a calendar
  • Ui.DropdownMenu - A dropdown menu that is always visible on the screen
  • Ui.Image - An image that fades when loaded
  • Ui.InplaceInput - An input that can be edited in place (display and form view with a save button)
  • Ui.Input - Basic input component
  • Ui.Loader - A loader component
  • Ui.Modal - A base for modal dialogs
  • Ui.NotificationCenter - A component for displaying messages to the user
  • Ui.NumberPad - An interface for providing number values (like a calculator or lock screen)
  • Ui.NumberRange - An interface for maniuplating a number value by dragging
  • Ui.Pager - A pager component
  • Ui.Ratings - A ratings component
  • Ui.SearchInput - An input component for handling text search
  • Ui.Slider - A slider component
  • Ui.Tagger - A component to manage tags on an entity
  • Ui.Textarea - An automatically growing textarea
  • Ui.Time - A component to show relative time
  • Ui.Tabs - A tab component

Static components so far:

  • Ui.Container - A flexbox container for layouts
  • Ui.icon - Icons from Ionicons
  • Ui.title - Title
  • Ui.subTitle - Subtitle
  • Ui.panel - Panel for grouping content
  • Ui.inputGroup - Container for and input and a label
  • Ui.fab - Floating action button
  • Ui.Header - A mobile header
  • Ui.Header.title - A title for a mobile header
  • Ui.Header.icon - An icon to be used in a header
  • Ui.Header.item - An item to be used in a header
  • Ui.Header.iconItem - An icon item to be used in a header
  • Ui.Header.separator - A separator to be used in a header

Planned components:

  • Ui.Upload - A file upload component
  • Ui.MaskedInput - An input component where the value is masked by a pattern
  • Ui.CheckboxGroup - A component for selecting a value via checkboxes

Documentation

Currently the only documentation is the Elm documentation that you can generate with the npm run elm-docs and then opening the documentation.json with the preview feature in http://package.elm-lang.org/help/docs-preview.