illustration for Declarative UIs without CSS with elm-ui

Declarative UIs without CSS with elm-ui

Instructor

Flavio Corpa
42m closed-captioning
19
people completed
Bookmark
Download
RSS

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.

đŸŒ± This is a Fresh Course

Staff reviewed: a month ago

This course is new and up-to-date. It will provide you with a different paradigm to view design, layout, and CSS.

What you'll learn

  • Use a declarative mindset for building UIs
  • Positioning elements, including centering
  • Creating a layout with rows and columns
  • Building a form

Quick Facts

  • elm-ui allows you to define styling with a minimal knowledge of CSS
  • elm-ui is not only useful as a layout system but also on the component/element level
  • elm-ui is more logic based than CSS based
  • There is no cascade when declaring elm-ui
  • elm doesn't have statements, it has expressions

Questions to Reflect Upon:

  • What's the best approach to building UIs?
  • How should I balance the tradeoffs between functionality and accessibility?

Course Content

42m ‱ 17 lessons

    You might also like these resources:

    illustration for Start Using Elm to Build Web Applications

    Start Using Elm to Build Web Applications

    Murphy Randle・30m・Course

    In this course you will learn the basic fundamentals of Elm so that you can start building applications today. Elm is a beginner friendly functional reactive programming language for building web applications.

    illustration for Sprinkle declarative, reactive behaviour on your HTML with Alpine JS

    Sprinkle declarative, reactive behaviour on your HTML with Alpine JS

    Simon Vrachliotis・17m・Course

    Alpine JS is a rugged, minimal framework for composing JavaScript behaviour in your markup. It brings declarative, reactive, data-driven nature of libraries like React or Vue to your HTML templates.

    illustration for Functional Programming in JavaScript with Ramda.js

    Functional Programming in JavaScript with Ramda.js

    Andy Van Slaars・1h 38m・Course

    Learn how you can use ramda.js to bring functional programming concepts into your JavaScript code. Ramda offers composability and immutability right out of the box, so you can leave your imperative code behind and build cleaner, more maintainable code.