Newton's Poleless Magnet

    This package has been deprecated

    Author message:

    This package has been deprecated in favour of @coopdigital/css-foundations. Please use that package instead.

    @coopdigital/coop-frontend-foundations

    0.1.2 • Public • Published

    Co-op frontend foundations

    Co-op frontend foundations contains all the core assets needed to build Co-op branded digital content.

    The foundations are the basic Co-op look and feel - they should be included in all Co-op services. A set of optional Co-op components are also available.

    Working on foundations locally

    Installation

    npm install

    Lint

    For linting npm run lint

    Build

    For local testing npm run build

    Watch

    For local continuous building of the project npm run watch

    The build tasks included here are for local development. This will build the CSS into a /build folder that contains a HTML page with all the basics included. To include in your service use our gulp core asset pipeline (coming soon).

    Using the foundations in your service

    npm install @coopdigital/coop-frontend-foundations --save-dev

    Then add into your import file @import 'node_modules/@coopdigital/coop-frontend-foundations/coop-foundations'

    Note: this path will need amending based on your project file structure.

    Uncompressed the foundations are 100kb, minified 36kb and gzipped 6kb. On a live service make sure you gzip the file.

    Name spacing

    We use name spacing in our CSS foundations and components. These namespaces avoid clashes with other styles used to extend the foundation and component styles when building services.

    General

    .coop-[name] Used for base styles such as forms and button EG coop-btn and coop-form.

    Layout

    .coop-l-[name] Used for layout (grid) classes. This replaces things like, .row, and .large-12 with .coop-l-row and .coop-l-large-12.

    Utilities

    .coop-u-[name] Utility classes for colour and layout helpers.

    Components

    .coop-c-[name] Components - found in the components repo.

    Creating your own styles

    When working on a service. Choose a sensible namespace and follow the same convention. For example a Funeral care service would use .fc-c-[name] for its components.

    Keywords

    none

    Install

    npm i @coopdigital/coop-frontend-foundations

    DownloadsWeekly Downloads

    41

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    267 kB

    Total Files

    33

    Last publish

    Collaborators