0.0.3 • Published 7 years ago
@domoinc/da-styles v0.0.3
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.