This package has been deprecated
This package has been deprecated in favour of @coopdigital/css-foundations. Please use that package instead.
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
npm run lint
For local testing
npm run build
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
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.
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.
Used for base styles such as forms and button EG
Used for layout (grid) classes. This replaces things like,
Utility classes for colour and layout helpers.
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.