Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

egghead.io

Declarative UIs without CSS with elm-ui

via egghead.io

Overview

elm-ui is a language for layout and interface design. This is a novel iteration on declarative styling where you can use Elm types and functions to define your UI in a declarative way.
The novel part is that it does not require you to know CSS to be used. The API is very simple and can be learned quickly!
The approach taken by elm-ui is based on two big ideas: Getting the compiler to verify as much of the layout and styling as possible by defining them in Elm code Enabling refactoring capabilities of Elm for UI code.

Syllabus

  • Introduction to the elm-ui Course
  • Bootstrap an elm-ui Application with create-elm-app
  • Center an elm-ui Element Horizontally and Vertically
  • Model a Layout with row, column and spacing with elm-ui
  • Use View Functions to Create Reusable Pieces of UI in Elm
  • Style Text with elm-ui Headlines, Typographies, and Fonts
  • Use padding, paddingXY and paddingEach with elm-ui
  • Choose between text, textColumn and paragraph with elm-ui
  • Work with elm-ui Input Components
  • Customize My Own Dropdown with elm-ui-dropdown
  • Add elm-ui Border.shadow to Highlight Any Element
  • Customize the Dropdown Scrollbar with CSS
  • Customize My First Checkbox Icon with elm-ui
  • Give Multiple Dropdowns Their Own Individual State with elm-ui-dropdown
  • Split the Business Logic of Elm view Functions By Modeling the State
  • Manually Control Responsiveness with Elm classifyDevice
  • Create a Production Optimised Build with create-elm-app

Taught by

Flavio Corpa

Reviews

4.6 rating at egghead.io based on 2 ratings

Start your review of Declarative UIs without CSS with elm-ui

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.