Cover image for elmcsspatterns.io


bigardone profile image Ricardo García Vega Originally published at codeloveandboards.com ・2 min read

The inspiration

A couple of weeks ago, while searching for a convenient CSS pattern that I needed to implement in one of my elm projects, I stumbled upon csslayout.io and felt in love with it instantly. His author, phuocng, has done a fantastic job not only collecting such a massive collection of patterns but making them easy to find and implement.

The motivation

csslayout.io is the kind of resource that I like to keep handy while working on my front-end, as I tend to write my styles without using any CSS framework whatsoever. Moreover, for the last year, I only use elm-css to generate the CSS, which feels to me like Sass but functional and statically typed, which is just awesome. Unfortunately, there aren't any similar resources for elm-css that I'm aware of, so I couldn't resist writing my version, collecting and sharing the common patterns that I often use.

On the other hand, I've been looking for an excuse to play around with elm-spa lately, which I think is going to be one of the next big things in the elm ecosystem. If you are not familiar with elm-spa, it basically consists of an elm library and a JS client, which automagically takes care of generating all the boilerplate regarding elm single-page applications, letting you focus on the fun part. His author, ryannhg, is doing an excellent job, keep it up!

The result

So having csslayout.io as inspiration, and elm-css + elm-spa as motivation, I have started working on elmcsspatterns.io. It is still an early version, and I will probably change everything now and then, but if you are into elm and elm-css I hope you find it useful, and if not, I hope it makes you want to try them :)


Happy coding!

GitHub logo bigardone / elm-css-patterns

Common CSS patterns done with elm and elm-css

Posted on by:

bigardone profile

Ricardo García Vega


My name is Ricardo García Vega, and I'm a passionate, full stack developer living on the northern coast of Spain and working remotely. I love building web applications using Elixir, Phoenix, and Elm.


markdown guide