The PreviousNext Design System.
This project contains:
- Baseline styles for consistent colour and typography.
- A selection of simple element and form styling.
- A best-practice grid system and layout helper classes.
- Some more complex design components to demonstrate how elements can be combined.
- Full page mockups showing how layouts and components can be combined.
And utilises modern browser features:
- ES Modules
- Dynamic imports
- React
- Design Tokens
- Custom Properties
- Cascade Layers
- Container Queries
- CSS Grids
- Logical Properties
As such, support browsers that do not support these features is outside of Mixtape's remit.
Using Mixtape
Installation
Mixtape is a collection of NPM packages, scoped by
the @pnx-mixtape
namespace. To install a package, simply run;
npm install @pnx-mixtape/PACKAGENAME --save
All dependencies of a given package will also be installed.
Usage
Once the necessary packages are installed, you can import
the css and javascript into
your project's codebase.
Importing and overriding styles
Dependencies:
Add the tokens and override the values or just copy/paste from Mixtape and update;
eg. project-tokens.js
const tokens = require("@pnx-mixtape/constants/src/tokens")
// Override existing ones;
tokens.colour.brand.primary = "rgb(0, 92, 250)"
tokens.colour.brand.secondary = "rgb(247, 143, 29)"
//Add new ones;
tokens.newThing = "somethingNew"
module.exports = tokens
The custom properties can also be included via @import or just copy/paste if you only need a limited set.
This file should be included in the browser.
eg. project-constants.css
@import "@pnx-mixtape/constants";
:root {
--my-colour-primary: rgb(0, 92, 250);
--my-colour-secondary: rgb(247, 143, 29);
}
The custom media should also be included, and is required in EVERY css file that uses them. PostCSS replaces this, so there is no need to worry about duplication.
eg. project-breakpoints.css
@import "@pnx-mixtape/base/src/custom-media.css";
@custom-media --my-breakpoint (width >= "200px");
Once these 3 files are setup, you can proceed with adding the components.
eg. buttons.css
@import "../project-breakpoints.css";
@import "@pnx-mixtape/buttons";
Or partially imported;
eg. buttons.css
@import "../project-breakpoints.css";
@import "@pnx-mixtape/buttons/src/_buttons.css";
@import "@pnx-mixtape/buttons/src/_buttons-primary.css";
@import "@pnx-mixtape/buttons/src/_buttons-secondary.css";
.button--primary {
--border-radius: 0;
@media (--medium-up) {
border-width: 6px;
}
}
The packages are as modular as practical, so you can be specific about what to include based on your projects requirements.
Cascade layers
@layers are used in Mixtape to ensure ease in overriding CSS on a project
level. If you are importing @pnx-mixtape/base
CSS then the layers are included.
If you are only partially importing the base CSS files, then you'll need to manually include the layers at the start of your CSS;
@layer defaults, layout, elements, components, utilities;
Any CSS not wrapped in a layer will have higher specificity to Mixtape's CSS. Alternatively you can append your own layers to the end of these, to achieve a similar result.
Importing and extending javascript
Dependencies:
- https://www.drupal.org/project/once
Some packages also provide javascript to manage user interactions. You can include and
initialise these by importing them into your projects .entry.js
files (or whatever is
setup to run through a bundler like Rollup or Webpack).
eg. project-init.entry.js
import { loadOnReady } from "@pnx-mixtape/utilities";
import Accordion from "@pnx-mixtape/accordion"
loadOnReady(() => {
Accordion.create() // attaches to all [data-accordion] elements.
}, 'accordion)
To customise this javascript we recommend importing and then extending the Class;
import { loadOnReady } from "@pnx-mixtape/utilities";
import Accordion from "@pnx-mixtape/accordion"
class FancyAccordion extends Accordion {
constructor(element) {
super(element)
this.isFancy = true
}
open() {
super.open()
this.isFancyAndOpen = true
}
}
loadOnReady(() => {
FancyAccordion.create()
}, 'accordion)