@dpc-sdp/ripple-global
Advanced tools
@dpc-sdp/ripple-global - npm Package Compare versions
Comparing version 1.0.0-alpha.3 to 1.0.0-alpha.4
| { | ||
| "name": "@dpc-sdp/ripple-global", | ||
| "version": "1.0.0-alpha.3", | ||
| "description": "Ripple global style", | ||
| "version": "1.0.0-alpha.4", | ||
| "description": "The core styles and utilities used by all ripple components. Includes sets of colours, fonts, breakpoints.", | ||
| "main": "./index.js", | ||
@@ -6,0 +6,0 @@ "dependencies": { |
| # @dpc-sdp/ripple-global | ||
| The core module all SDP Ripple modules depend on. | ||
| > The core styles and utilities used by all ripple components. Includes sets of | ||
| colours, fonts, breakpoints. | ||
| -------------------------------------------------------------------------------- | ||
| ## Install | ||
| `npm install @dpc-sdp/ripple-global --save` | ||
| ### Nuxt.js | ||
| For **Nuxt** app, register RplGlobal plugin by adding `plugins/ripple.js` file: | ||
| ```shell | ||
| npm install @dpc-sdp/ripple-global --save | ||
| ``` | ||
| import Vue from 'vue' | ||
| import RplGlobal from '@dpc-sdp/ripple-global' | ||
| const rplOptions = { | ||
| nuxt: true | ||
| } | ||
| -------------------------------------------------------------------------------- | ||
| Vue.use(RplGlobal, rplOptions) | ||
| ``` | ||
| ## Dependency graph | ||
| Then add `plugins/ripple.js` to plugins section of **nuxt.config.js**: | ||
| ```shell | ||
| @dpc-sdp/ripple-global | ||
| ├── masonry-layout | ||
| ├── moment | ||
| ├── object-fit-images | ||
| ├── vue-focus | ||
| └── vue-social-sharing | ||
| ``` | ||
| { | ||
| plugins: [ | ||
| '~/plugins/ripple' | ||
| ] | ||
| } | ||
| ``` | ||
| ### Others | ||
| -------------------------------------------------------------------------------- | ||
| If you are not using **Nuxt**, register RplGlobal plugin in your app entry point: | ||
| ## Usage and Tests | ||
| ``` | ||
| import Vue from 'vue' | ||
| import RplGlobal from '@dpc-sdp/ripple-global' | ||
| See [Storybook/Colors](https://ripple-ripple-develop.lagoon.vicsdp.amazee.io/?selectedKind=Atoms/Global&selectedStory=Colors). | ||
| Vue.use(RplGlobal) | ||
| ``` | ||
| See [Storybook/Typography](https://ripple-ripple-develop.lagoon.vicsdp.amazee.io/?selectedKind=Atoms/Global&selectedStory=Typography). | ||
| ## Usage | ||
| In Sass: | ||
| ```scss | ||
| @import "~@dpc-sdp/ripple-global/style" | ||
| ``` | ||
| See [Storybook/Breakpoints](https://ripple-ripple-develop.lagoon.vicsdp.amazee.io/?selectedKind=Atoms/Global&selectedStory=Breakpoints). | ||
| ### Typography | ||
| -------------------------------------------------------------------------------- | ||
| The `$rpl-typography` variable can be overridden to define font rules for | ||
| multiple typesets with multiple breakpoints. | ||
| ## Release History | ||
| Example: | ||
| ```scss | ||
| $rpl-typography: ( | ||
| // Define a typeset with a rule. | ||
| 'heading': ('xl', 1.5em, 'bold', true), | ||
| 'body': ('m', 1.2em, 'regular'), | ||
| See [CHANGELOG.md](./CHANGELOG.md). | ||
| // Define a typeset with breakpoints. | ||
| 'heading_responsive': ( | ||
| 'xs': ('s', 1em, 'bold', true), | ||
| 'm': ('m', 1.1em, 'bold', true), | ||
| 'l': ('l', 1.2em, 'bold', true), | ||
| 'xl': ('xl', 1.2em, 'regular', true), | ||
| ) | ||
| ); | ||
| ``` | ||
| -------------------------------------------------------------------------------- | ||
| A rule consists of: | ||
| ## License | ||
| `('font_size', line_height, 'weight', show_background)` | ||
| * `font_size` - String - a value from the `$rpl-font-sizes` list. | ||
| * `line_height` - CSS rule - a value for line-height. | ||
| * `weight` - String - a value from the `$rpl-fonts` list. | ||
| * `show_background` - Optional Boolean - display a background. Expects inner HTML wrapped in a span. | ||
| A typeset name (e.g. `'heading'`) can be assigned a rule or a list of breakpoints with rules. | ||
| A breakpoint list should include `xs` to ensure font rules are defined for mobile size. | ||
| Typesets can be added to CSS selectors with the `rpl_typography()` mixin. | ||
| ```scss | ||
| .responsive-header { | ||
| @include rpl_typography('heading_responsive'); | ||
| } | ||
| body { | ||
| @include rpl_typography('body'); | ||
| } | ||
| ``` | ||
| Licensed under the GPL-2.0+ License. |
@@ -32,2 +32,6 @@ /* eslint-disable */ | ||
| const isAnchorLink = (url) => { | ||
| return (url.length > 0 && url[0] === '#') | ||
| } | ||
| // https://stackoverflow.com/a/23945027/1212791 | ||
@@ -69,2 +73,2 @@ function _extractHostname (url) { | ||
| export { isRelativeUrl, isExternalUrl } | ||
| export { isRelativeUrl, isExternalUrl, isAnchorLink } |
No alert changes
Improved metrics
- Lines of code
- increased by0.8%
378
Worsened metrics
- Total package byte prevSize
- decreased by-0.03%
1519265
- Number of lines in readme file
- decreased by-48.94%
48
No dependency changes