How to build a responsive layout without a single line of CSS*

Lucamug
6 min readSep 23, 2019

This is a tutorial on how to build a mildly complex web layout without any knowledge of CSS (and also any knowledge of Javascript and HTML for that matter).

The layout is built using Elm and elm-ui. Elm is a pure functional language that compile to Javascript. elm-ui is an Elm library that create a semantic layer on top of CSS and HTML. If you are new to Elm, the Elm official guide and the elm-ui documentation are two good starting points.

TL;DR The result

The stand-alone version: https://layout-without-css.surge.sh/

The Ellie version:

The code: https://github.com/lucamug/layout-without-css

The task

We want to build a responsive layout of a modal window that should render properly both on small and large viewports.

The requirements

On large viewports (aka desktop)

  • Should appear centered vertically and horizontally
  • Should have a maximum width limit
  • Should have a maximum height limit equal to the height of the viewport minus 40 px (20 px above and 20 px below)
  • Vertical height should shrink to adjust with the content
  • The inner part should be scrollable if needed
  • On NON empty pages the content underneath should be covered with a semitransparent dark layer that, when clicked, should close the modal
  • On empty pages the modal should be floating above an image

On small viewports (aka mobile)

  • The modal should go from top to bottom of the viewport
  • The content should be top aligned

--

--