Current Version: 1.0.0-RC4

Guide - Reuse

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(--mg-blue-200); } .button.primary { color: var(--mg-blue-200); background-color: #fff; } .button.big { border-radius: var(--mg-bw4); padding: var(--mg-sp3) var(--mg-sp4); font-size: var(--mg-fs4); } .button.small { border-radius: var(--mg-bw3); padding: var(--mg-sp2) var(--mg-sp3); font-size: var(--mg-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.