elmfoundation-sitesfunctional programming

Building an Elm Library for Foundation CSS Framework

E is a functional language that compiles to JavaScript. If you are used to using a tech stack that involved Webpack, Redux, npm/yarn, React, Immutable.js & TypeScript, then you would be shocked to death to know that Elm takes care of all that.

I have recently used Foundation in one of my projects and I saw an opportunity to write a Foundation library for Elm. The most popular Elm library at the moment is elm-mdl, however it is not actively maintained. Foundation 6 is packed with the most advanced CSS framework in the web, Grid XY. And I saw an opportunity to bring this to the Elm community.

Following is a little sneak peek of what the Elm code will look like compared to the actual HTML that we write to achieve the same.

On a side note, I would really appreciate if you support the project. Please let me know that this project is useful, there is no other way for me to know.

Grid XY in HTML / CSS

<div class="container fluid">
    <div class="grid-x margin-x">
        <div class="cell">
            <!-- Hello Elm! -->

Grid XY in Elm. Declarative Love :*

view : Model -> Html Msg
view model =
                [ container Fluid, direction X, gutter Margin ]
                [ cell [] [ text "cell" ] ]


I am Meher. I am technologist & AVP at Credit Suisse in Pune, India.
I build high performance apps using React, Redux, GraphQL & RamdaJS.
  • LinkedIn Profile
  • Github Profile
  • Instagram Profile
  • Facebook Profile