An opinionated UI library and application framework for the web in Elm, following the Elm Architecture.
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
Elm-UI is avaiable as a command line client via NPM:
npm install elm-ui -g
See Command Line Interface (CLI) for documentation.
To scaffold a new project just use the elm-ui init my-project-name
command.
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.
After you scaffolded a project you need to install Elm packages with the
elm-ui install
command.
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)
- Build the final files with
elm-ui build
into dist directory.
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
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.