Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@dpc-sdp/ripple-global

Package Overview
Dependencies
Maintainers
6
Versions
246
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@dpc-sdp/ripple-global

The core styles and utilities used by all ripple components. Includes sets of colours, fonts, breakpoints.

  • 1.38.3
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
227
increased by35.12%
Maintainers
6
Weekly downloads
 
Created
Source

@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.

FAQs

Package last updated on 10 Oct 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc