Mixtape

The PreviousNext Design System.

This project contains:

And utilises modern browser features:

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)