Styling a module

It's important to distinguish between styling a module, and structuring a module with CSS. Styling a module in this context is to change its look and feel without altering position or layout.

Click here to learn how to edit a module's layout and position

To style a module, you can pass CSS values as configuration (learn more about module configuration):

{
    "myModule": {
        "font-size": "14px",
        "background-color": "#424242",
        "some-other-property": true
    }
}

CSS Output

.myModule, [class*="myModule-"] {
    font-size: 14px;
    background-color: #424242;
}

Styling a component

See the Components section

Styling a modifier

See the Modifiers section

Module structure (layout & position)

Whilst it is certainly possible to pass layout and structural CSS to a module through configuration, it is not recommended.