Elm Mdc

screenshot of Elm Mdc

Elm Mdc

Elm port of the Material Components for the Web CSS/JS library

Overview:

Material Components for the Web for Elm (Elm-mdc) is a library that allows developers to create visually appealing Elm applications with a Material Design aesthetic. It uses the CSS provided by Google's Material Components for the Web, but rewrites the JavaScript functionality in Elm. The library provides a set of components and styles that can be easily integrated into an Elm project, enabling developers to build applications that align with Google's Material Design guidelines.

Features:

  • Material Design Look: Elm-mdc allows developers to create applications with a Material Design aesthetic, following Google's design guidelines.
  • CSS Integration: The library leverages the CSS files provided by Google's Material Components for the Web, ensuring consistent styling throughout the application.
  • Rewritten JavaScript: While using the CSS from Google, Elm-mdc reimplements the JavaScript functionality in Elm, ensuring a seamless integration with Elm applications.

Installation:

To install Elm-mdc, follow these steps:

  1. Create an index.html file with the necessary CSS and JavaScript references.
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
    <link rel="stylesheet" href="https://unpkg.com/elm-mdc@latest/dist/mdc-elm.css">
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    <script src="elm-mdc.js"></script>
    <script src="elm.js"></script>
    
  2. Make sure the elm-mdc.js file is correctly served by your web server.
  3. Install Elm-mdc from GitHub by adding it to your Elm project's dependencies.
  4. Build the required sources.
  5. Change the source-directories property in elm.json to include Elm-mdc.
  6. Create an index.html file with the appropriate structure.
  7. Create your first Elm application, for example, by copying the provided hello world example.
  8. Compile the Elm application using the following command: elm make src/Main.elm --output app.js.

Summary:

Elm-mdc is a library that allows developers to easily create Elm applications with a Material Design look. It leverages the CSS provided by Google's Material Components for the Web, but rewrites the JavaScript functionality in Elm. With Elm-mdc, developers can quickly integrate Material Design components into their Elm projects and build visually appealing applications that align with Google's design guidelines.

material-design
Material Design

Material Design is a design system developed by Google that provides a set of guidelines, components, and tools for creating visually appealing and functional user interfaces. Material Design is designed to be flexible and customizable, making it a great choice for a wide range of applications and use cases.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.