axelerator/picomponents/1.1.0

NOTE: the latest version is 2.0.1

Picomponents

Package Docs | Documentation | Starter Code Template | Starter Demo

Picomponents is a UI component library using the brilliant pico CSS framework.

Pico.css is a Minimal CSS Framework for Semantic HTML.

Pico requires extremely little custom markup for a Html page to look beautiful to begin with. So picomponents really just provides a collection of helper functions to make the Elm code that constructs the DOM more concise while having the output look beautiful.

It also provides customized widgets for the FancyForms library to enable you to create beautiful forms efficiently and type safe.

Design goals/decisions

  • Only add helpers where helpful. We're not implementing all of Pico as custom helpers since a lot is based on semantic HTML which can already efficiently be constructed with Elm core functions.

  • Except for very frequently used elements! We make exceptions for elements like primaryButton and br that we think are used often enough to warrant a helper that just saves a few characters.

  • Try to avoid extra dependencies/tooling Users should not have to install npm or have to run extra buildsteps to get going. (We do have one static JS file with a webcomponent that you have to include though 😓)