@dpc-sdp/ripple-global
The core styles and utilities used by all ripple components. Includes sets of
colours, fonts, breakpoints.
rplOptions
This is a globally available options object to allow passing options between ripple components. Don't abuse this, keep it light as the object gets passed between all components.
nuxt: false,
isDev: false,
hostname: 'localhost',
origin: '',
quickexit: false,
quickexiturl: 'https://www.google.com',
plugins: [],
viclogo: true
externalLinksInNewWindow: false
card: {
trimFieldfonts: ['Your-font-name']
}
For add your options, you need to use the Ripple global plugin in your Vue.js porject.
import RplGlobal from '@dpc-sdp/ripple-global'
Vue.use(RplGlobal, {
For how Vue plugin works, please check https://vuejs.org/v2/guide/plugins.html#Using-a-Plugin.
Install
npm install @dpc-sdp/ripple-global --save
Dependency graph
@dpc-sdp/ripple-global
├── masonry-layout
├── moment
├── object-fit-images
└── vue-focus
Import
import { RplDivider } from '@dpc-sdp/ripple-global'
import RplGlobal from '@dpc-sdp/ripple-global'
Usage and Tests
See Storybook/Atoms/Global/Colors.
See Storybook/Atoms/Global/Fonts.
See Storybook/Atoms/Global/Typography.
See Storybook/Atoms/Global/Breakpoints.
See Storybook/Atoms/Global/Divider.
Known issues
- Typography: Display headings (with background) have reduced padding on IE11 / Edge.
License
Licensed under the Apache-2.0 License.