# @coopdigital/css-foundations > Co-op CSS Foundations Latest version **7.1.4** (published 2021-12-13) · MIT license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install @coopdigital/css-foundations pnpm add @coopdigital/css-foundations yarn add @coopdigital/css-foundations bun add @coopdigital/css-foundations ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 7.1.4 | | Published | 2021-12-13 | | First published | 2018-11-06 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 10 | | Unpacked size | 240.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | @coopdigital | | Maintainers | matt-tyas, joemcgirr, mchadwickweb, desmondporkpie, hanross, dalefrontend, danwlsn, su00ji, mark.sampson, coopjames | ## Links - npm: https://www.npmjs.com/package/@coopdigital/css-foundations - Repository: https://github.com/coopdigital/coop-frontend - Homepage: https://github.com/coopdigital/coop-frontend#readme - Issues: https://github.com/coopdigital/coop-frontend/issues - npm.io page: https://npm.io/package/@coopdigital/css-foundations ## Dependencies (10) - [normalize.css](https://npm.io/package/normalize.css.md) ^8.0.1 - [@coopdigital/foundations-grid](https://npm.io/package/@coopdigital/foundations-grid.md) ^2.1.5 - [@coopdigital/foundations-vars](https://npm.io/package/@coopdigital/foundations-vars.md) ^3.8.2 - [@coopdigital/foundations-forms](https://npm.io/package/@coopdigital/foundations-forms.md) ^5.3.3 - [@coopdigital/foundations-colors](https://npm.io/package/@coopdigital/foundations-colors.md) ^2.6.6 - [@coopdigital/foundations-global](https://npm.io/package/@coopdigital/foundations-global.md) ^3.3.5 - [@coopdigital/foundations-layout](https://npm.io/package/@coopdigital/foundations-layout.md) ^3.3.6 - [@coopdigital/foundations-tables](https://npm.io/package/@coopdigital/foundations-tables.md) ^3.0.2 - [@coopdigital/foundations-buttons](https://npm.io/package/@coopdigital/foundations-buttons.md) ^2.5.8 - [@coopdigital/foundations-typography](https://npm.io/package/@coopdigital/foundations-typography.md) ^4.2.7 ## Recent versions - 7.1.4 (latest) — 2021-12-13 - 7.1.3 — 2021-06-28 - 7.1.2 — 2021-06-10 - 7.1.1 — 2021-03-29 - 7.1.0 — 2021-03-11 - 7.0.2 — 2021-02-25 - 7.0.1 — 2021-02-19 - 7.0.0 — 2021-02-18 - 6.4.10 — 2021-02-17 - 6.4.9 — 2021-02-16 - 6.4.8 — 2021-02-16 - 6.4.7 — 2021-02-15 - 6.4.6 — 2021-02-15 - 6.4.4 — 2021-02-15 - 6.4.3 — 2021-02-15 - … 95 more at https://npm.io/package/@coopdigital/css-foundations/versions ## README # Co-op CSS Foundations Co-op CSS Foundations contains all the core CSS styles needed to build Co-op branded digital content. It brings together all the packages projects will need in one place. Components and custom styles should be included or written separately and decided on a project by project basis. The foundations set the basic Co-op look and feel - they should be included in all Co-op services. ## Installation Install via NPM: ```bash $ npm install @coopdigital/css-foundations --save ``` ## Usage You can include CSS Foundations in your project by referencing it from your existing CSS via `@import` statement, i.e.: ```css @import "node_modules/@coopdigital/css-foundations/dist/foundations.css"; ``` If you use PostCSS in your build pipeline, you can reference the sources directly like so: ```css @import "node_modules/@coopdigital/css-foundations/src/foundations.pcss"; ``` If you use a `postcss-import` plugin, it gets even easier: ```css @import "@coopdigital/css-foundations"; ``` ## Examples Here's a bunch of examples, showing how you can integrate this CSS module in your project, based on most popular stacks 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 certain 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: ```css ``` ## Development CSS Foundations follows a modular architecture and as such is composed out of several CSS Modules. You are free to use either individual modules or load the entire framework into your project. ### Modules - [X] normalize [`necolas/normalize.css`](https://github.com/necolas/normalize.css) - [x] Variables [`@coopdigital/foundations-vars`](https://github.com/coopdigital/foundations-vars) - [x] Global [`@coopdigital/foundations-global`](https://github.com/coopdigital/foundations-global) - [x] Typography [`@coopdigital/foundations-typography`](https://github.com/coopdigital/foundations-typography) - [x] Colours [`@coopdigital/foundations-colors`](https://github.com/coopdigital/foundations-colors) - [x] Buttons [`@coopdigital/foundations-buttons`](https://github.com/coopdigital/foundations-buttons) - [x] Forms [`@coopdigital/foundations-forms`](https://github.com/coopdigital/foundations-forms) - [x] Tables [`@coopdigital/foundations-tables`](https://github.com/coopdigital/foundations-tables) - [x] Grid (Flexbox and legacy) [`@coopdigital/foundations-grid`](https://github.com/coopdigital/foundations-grid) - [x] Layout (spacing and utility helpers) [`@coopdigital/foundations-layout`](https://github.com/coopdigital/foundations-layout) ### How to develop? This package only serves as a master package for all individual CSS modules. Development should be done within individual package repositories, following general guidelines. ## Changelog ### 6.2.1 (Feature release) Feature Foundations-global - We’ve added a padding class so logo meets minimum tap target size. _Previous releases did not have notes_ ## License Copyright (c) 2021 Co-operative Group Limited. Licensed [MIT](https://github.com/coopdigital/coop-frontend/blob/master/LICENSE). --- _Source: https://npm.io/package/@coopdigital/css-foundations · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._