@dpc-sdp/ripple-global NPM

@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, // enable if using in SSR environment eg: nuxt
  isDev: false, // set to true to enable dev mode, used to show Ripple component errors if have.
  hostname: 'localhost', // set hostname for rpl-link etc
  imgQueryString: (bp) => {
    // Override function that appends query string to images to use with image processing CDN's - see @spc-sdp/ripple-nuxt-ui for example
    return `?height=100&width=200` 
  },
  origin: '', // URL with protocol://host(:port) e.g. http://localhost:3000
  quickexit: false, // enable quick exit feature
  quickexiturl: 'https://www.google.com', // URL to use for quickexit
  plugins: [], // array of cheerio transformer function plugins to pass to RplMarkup
  viclogo: true // whether to display primary vic.gov.au logo
  externalLinksInNewWindow: false // (Bool) Whether links open in new window by default
  card: {
    trimFieldfonts: ['Your-font-name'] // If custom fonts are used in card trimmed field, set them here.
  }

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, { // You options ... })

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.

Known issues

Typography: Display headings (with background) have reduced padding on IE11 / Edge.

License

Licensed under the Apache-2.0 License.

masonry-layout moment object-fit-images vue-focus

@b-schiller/yourvic-map-core @b-schiller/yourvic-maps @everything-registry/sub-chunk-254 @dpc-sdp/ripple-layout @dpc-sdp/ripple-publish-date-and-author @dpc-sdp/ripple-related-links @dpc-sdp/ripple-responsive-img @dpc-sdp/ripple-search @dpc-sdp/ripple-share-this @dpc-sdp/ripple-site-footer @dpc-sdp/ripple-site-header @dpc-sdp/ripple-site-section-navigation @dpc-sdp/ripple-sitemap @dpc-sdp/ripple-timeline @dpc-sdp/ripple-updated-date @dpc-sdp/ripple-whats-next @dpc-sdp/vla-contact-block @dpc-sdp/myvic-bundle @dpc-sdp/myvic-global @dpc-sdp/myvic-map-core @dpc-sdp/myvic-treemap @dpc-sdp/ripple-accordion @dpc-sdp/ripple-alert @dpc-sdp/ripple-anchor-links @dpc-sdp/ripple-markup @dpc-sdp/ripple-meta-tag @dpc-sdp/ripple-news @dpc-sdp/ripple-news-listing @dpc-sdp/ripple-nuxt-tide @dpc-sdp/ripple-nuxt-ui @dpc-sdp/ripple-pagination @dpc-sdp/ripple-publication @dpc-sdp/vla-video-tiles @dpc-sdp/yourvic-bundle @dpc-sdp/yourvic-global @dpc-sdp/yourvic-map-core @dpc-sdp/yourvic-maps @dpc-sdp/yourvic-treemap @dpc-sdp/ripple-link @dpc-sdp/ripple-link-tiles @dpc-sdp/ripple-list @dpc-sdp/ripple-list-group @dpc-sdp/ripple-map @dpc-sdp/ripple-print-this @dpc-sdp/ripple-profile @dpc-sdp/ripple-statistics-grid @dpc-sdp/ripple-tabs @dpc-sdp/ripple-button @dpc-sdp/ripple-call-to-action @dpc-sdp/ripple-card @dpc-sdp/ripple-contact @dpc-sdp/ripple-data-table @dpc-sdp/ripple-description-list @dpc-sdp/ripple-document-link @dpc-sdp/ripple-embedded-video @dpc-sdp/ripple-event @dpc-sdp/ripple-figure @dpc-sdp/ripple-form @dpc-sdp/ripple-grants @dpc-sdp/ripple-icon @dpc-sdp/ripple-image-gallery @dpc-sdp/ripple-breadcrumbs @dpc-sdp/ripple-campaign-primary @dpc-sdp/ripple-campaign-secondary @dpc-sdp/ripple-hero-banner @infinitebrahmanuniverse/nolb-_dp

9 months ago

7 months ago

10 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago