adapt-mock

v1.1.0

Published

2 years ago

Rapid prototype existing HTML/CSS

Downloads

0High
0Medium
0Low

eknowles

Adapt

Rapid prototype existing HTML/CSS with the tools you already know. Adapt is a tool to bridge the gap between design and development.

Installation

npm i adapt-mock

<head>
  ...

  <!--Main Adapt Library-->
  <script src="./node_modules/adapt/umd/adapt-mock.min.js"></script>

  <!--Adapt Stages-->
  <link href="example/styles.css" rel="stylesheet">
  <script src="example/scripts.js"></script>
</head>

Usage

Adapt allows you to step through the various stages when prototyping to help sell and ideas, radical changes or introducing new features. If you can hack CSS in Chrome Developer Tools, you can build a prototype with Adapt. Grab some HTML/CSS and add a class for each design change then use Arrow keys to step through each stage, you can quickly compare each stage in the browser or device in real time.

Moving Stages

You can move between stages with keyboard actions, remember the element that has the Mocker assigned should be in focus.

Key Press|Action --- | --- ArrowRight | Go to next stage Shift + ArrowRight | Go to last stage ArrowLeft | Go to previous stage Shift + ArrowLeft | Go to first stage

Available Modules

Adapt comes in four flavours, can be used directly in the browser via umd or extended for your own projects.

UMD (./umd/adapt.js)
ES5 (./lib/index.js)
ES6 (./lib-esm/index.js)
Flat ES6 (./lib-esm/index.js)

Stages

Adapt requires a list of Stages, imagine these as a list of requirements. Each stage can have a description and functions to run when switching to it.

// Setup stages
const stages = [
  {description: 'Improve visibility between label and values'},
  {description: 'Improve information hierarchy'},
  {description: 'Improve contrast'},
];

Load Adapt, with new Adapt.Mocker(), it takes two arguments, the first is an HTML element and the second are your Stages we created above.

// Wait for the document to load
document.addEventListener('DOMContentLoaded', () => {

  // Create a new instance of the Mocker class, and pass it the stages.
  const mock = new Adapt.Mocker(document.body, stages);

});

Prototyping (styling stages)

Adapt uses standard CSS classes when handling style changes between stages. When you go to the next stage Adapt adds a new class to the element, when you go back, it removes it.

Multiple Mockers

To manage multiple Mockers on a document (because why not?) you can set the mockers base class name by using the className property.

const m = new Adapt.Mocker(myElement, myStages);
m.className = 'myClassName';

Using the example above we expect that for the second stage it will set the element class attribute to myClassName1 myClassName2.

Run Functions (DOM)

When changing Stage you may want to make a radical change that can't be achieved with CSS, to do this we use Run functions. Adapt allows you to write your own functions that modify the DOM which get called when changing Stages.

To add a functions to a Stage insert the name of the function in the run array.

const stages = [
  ...
  {description: 'Update Text Labels', run: ['updateLabels']},
];

Declare the function on the window.

function updateLabels(revert, state) {
  // Use whatever JavaScript you like here (e.g. JQuery)
}

Each function receives two arguments.

Param | Type | Description --- | --- | --- revert | Boolean | True if function should reverse (Stage is moving back) state | Object | An object stored inside the Mocker

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme