This package has been deprecated

    Author message:

    The code within this package has now been moved into our new @coopdigital/foundations package.

    @coopdigital/foundations-vars

    3.8.2 • Public • Published

    Co-op Foundations: Variables

    Common global variables that all Co-op CSS Modules rely upon.

    Dependencies (for PostCSS sources only)

    • postcss
    • precss

    How to use

    1. Install via npm or Yarn:
    $ npm install @coopdigital/foundations-vars --save
    $ yarn add @coopdigital/foundations-vars
    1. Add CSS module to your application via a most appropriate method. This will entirely depend on your application and how you are currently loading CSS modules within it.

    Warning
    If you want to use global Media Query breakpoint variables, you have to include src/vars.pcss in your build pipeline, as they will not be present in the postprocessed CSS file that you can find under dist/vars.css.

    Examples

    Here's a bunch of examples, showing how you can integrate this CSS module in your project, based on most popular types of project. You can either use a post-processed and pre-built CSS form the dist directory, ot use PostCSS sources from the src dir.

    The latter have two dependencies, which should be consumed by your frontend toolkit to postprocess the CSS correctly.

    Vue.js

    In Vue, you can just reference it from a global component like so:

    <style>
    /* Import PostCSS source */
    @import "~@coopdigital/foundations-typography/src/vars.pcss";
    /* Import postprocessed CSS distributable */
    @import "~@coopdigital/foundations-typography/dist/vars.css";
    </style>

    React.js

    TBD

    Webpack

    TBD

    License

    Copyright (c) 2021 Co-operative Group Limited. Licensed MIT.

    Keywords

    none

    Install

    npm i @coopdigital/foundations-vars

    DownloadsWeekly Downloads

    183

    Version

    3.8.2

    License

    MIT

    Unpacked Size

    56.1 kB

    Total Files

    12

    Last publish

    Collaborators

    • matt-tyas
    • joemcgirr
    • mchadwickweb
    • hanross
    • dalefrontend
    • coopjames