Mixtape

The PreviousNext Design System.

This project contains:


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 projects codebase.

Importing and overriding styles

Add the global constants first and override what's needed;

eg. project-constants.css

@import '@pnx-mixtape/constants';

:root {
  --brand-primary: rgb(0, 92, 250);
  --brand-secondary: rgb(247, 143, 29);
}

Each package can be either be imported in it's entirety with it's default values;

eg. buttons.css

@import '../project-constants.css';
@import '@pnx-mixtape/buttons';

Or partially imported with overridden constants;

eg. buttons.css

/* Project and button constants */
@import '../project-constants.css';
@import '@pnx-mixtape/buttons/src/_vars.css';

:root {
  --button-radius: 3px;
}

/* Mixtape 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: 0;
}

The packages are as modular as practical so you can be specific about what to include based on your projects requirements.

Importing and extending javascript

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 Accordion from '@pnx-mixtape/accordion';

document.querySelectorAll('.js-accordion').forEach((obj) => {
  const accordion = new Accordion(obj, 'accordion');
  accordion.init();
});

To customise this javascript we recommend importing and then extending the Class;

import Accordion from '@pnx-mixtape/accordion';

class FancyAccordion extends Accordion {
  constructor(element) {
    super(element);
    this.isFancy = true;
  }
  
  open() {
    super.open();
    this.isFancyAndOpen = true;
  }
}

document.querySelectorAll('.js-fancy-accordion').forEach((obj) => {
  const fancyAccordion = new FancyAccordion(obj, 'accordion');
  fancyAccordion.init();
});