Custom App Styles

Extending Material Components to look & feel more like native Domo.

Getting Started

Step 1. Install

npm install --save @domoinc/da-styles material-components-web

Step 2. Include Styles

Let Webpack bundle the SASS files with your app-specific style sheets. This import order is important!

@import '~@domoinc/da-styles/scss/overrides'; // sets mdc variables
@import '~material-components-web/material-components-web';
@import '~@domoinc/da-styles/scss/components'; // domofies mdc

Step 3. Include Open Sans font

Rather than bundling the fonts into the base, we opted for you to load it via CDN which allows your app to take advantage of performance gains from caching.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">

or in your SASS file

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');

Step 4. Init and use MDC as documented

Demos

To see working examples of the components clone the repo locally and start the webpack-dev-server:

git clone https://git.empdev.domo.com/CustomApps/da-styles
cd da-styles && yarn install && npm start

Contributing

There is definite room to grow and customize these styles. Contributions are highly encouraged. MDC-Web has been included for development purposes and the demo files are where you can test your changes.

Install dependencies and start developing

yarn install && npm start

Make your changes in ./scss and see the dev server refresh with the latest.