MelangeCSS - Guide

“ Truth suffers from too much analysis.

It's not hard to imagine your HTML becoming littered with the same set of single-use classes and that this duplication can make it hard to sustain development of your app. And, while MelangeCSS includes a grid-based foundation for a design system, you may wish to cultivate more involved re-usable components.

Indeed, building a site directly in HTML and CSS with MelangeCSS would result in this. But, if you are building a web app, you almost certainly have a templating system that allows for extraction of re-usable bits of code. That is how Melange intends for you to manage duplication.

Consider a button component that has four different versions: a large primary, large secondary, small primary, and small secondary like so:

Your templating system, including front-end frameworks like React, should be able to provide a way to generate this markup based on parameters or properties. For example:

function Button({size,type,label}) {
  const dimensions = size == "big"     ? "ph-4 pv-3 br-4 f-4"
                                       : "ph-3 pv-2 br-3 f-3"
  const colors     = type == "primary" ? "bg-blue-100 white"
                                       : "bg-white blue-100"
  const cssClasses = `${dimensions} ${colors} ba tc`

  return (
    <button className={cssClasses}>
      { label }
    </button>
  )
}

Or, in Rails:

def styled_button(size, type, label)
  dimensions = size == "big"     ? "ph-4 pv-3 br-4 f-4"
                                 : "ph-3 pv-2 br-3 f-3"
  colors     = type == "primary" ? "bg-blue-100 white"
                                 : "bg-white blue-100"
  const cssClasses = `${dimensions} ${colors} ba tc`
  content_tag(:button, class: "#{dimensions} #{colors} ba tc") do
    label
  end
end

These are only examples. You can do it however you want. And, because MelangeCSS is only a CSS file with variables, you could certainly create your own CSS if you like:

.button {
  border: solid;
  text-align: center;
}
.button.primary {
  color: #fff;
  background-color: var(--blue-200);
}
.button.primary {
  color: var(--blue-200);
  background-color: #fff;
}
.button.big {
  border-radius: var(--bw4);
  padding: var(--sp3) var(--sp4);
  font-size: var(--fs4);
}
.button.small {
  border-radius: var(--bw3);
  padding: var(--sp2) var(--sp3);
  font-size: var(--fs3);
}

The key thing to remember is that your web app's components are not just CSS classes - they are markup, styling, JavaScript, and even back-end support. By treating them this way, you manage them with your web app's templating system as opposed to a CSS class, since a CSS class is rarely sufficient to truly create a re-usable component.