Quick Start Guide

DPX Integration
in 5 minutes.

The DPX standard consists of two parts: a PostCSS plugin (handles heavy compilation during the build phase) and a lightweight JS controller (manages scale in real-time).

1

Two Installation Paths

Ensure you have Node.js installed. Commands are completely identical for Linux, Windows, and macOS.

Path A: Via NPM (Recommended)

If you are an experienced developer, simply install the package from the global npm registry.

npm install postcss-dpx postcss --save-dev

Path B: Download ZIP Archive

Download the archive from our site. Extract it to the root of your project and install dependencies.

# Navigate to the project folder and run:
npm install postcss --save-dev

Note: The build script (build.js) and the plugin are already included inside the archive!

2

Create Project Structure

For the plugin to work correctly, separate your source code (what you write) from the final code (what goes to the server). Create src and dist folders.

📁 your-project/
  📁 src/                 <-- Work happens here
    📄 style.css           (Your source CSS with dpx)
  📁 dist/                <-- Compiled code goes here
    📄 style.css           (Compiled CSS for the browser)
  
  📄 index.html            (Your website)
  📄 dpx-postcss.js        (Client-side script controller)
  📄 build.js              (Build script)

3

Writing Code (HTML & CSS)

src/style.css (Source)

:root {
  /* This variable is managed by dpx-postcss.js */
  --dpx-scale: 1;
}

.card {
  width: 300dpx;
  padding: 20dpx;
  border-radius: 15dpx;
}

index.html

<!-- Connect the COMPILED CSS from the dist folder -->
<link rel="stylesheet" href="dist/style.css">

<div class="card">Content</div>

<!-- Include the lightweight JS controller before body closes -->
<script src="dpx-postcss.js"></script>

4

Building the Plugin (build.js)

If you downloaded the ZIP archive, the build.js file is already in the root. If you installed via NPM, create this file with the following code:

const fs = require('fs');
const postcss = require('postcss');
const plugin = require('./index.js'); // Your postcss-dpx plugin

if (!fs.existsSync('./dist')) fs.mkdirSync('./dist');

const cssInput = fs.readFileSync('./src/style.css', 'utf8');

postcss([plugin()])
    .process(cssInput, { from: './src/style.css', to: './dist/style.css' })
    .then(result => {
        fs.writeFileSync('./dist/style.css', result.css);
        console.log('✅ SUCCESS! CSS compiled.');
    });

5

Launch & Golden Rule of DPX

Open the terminal in your project folder and run the build command:

node build.js

⚡ Runtime Magic (Zero Compilation)

You only need to run node build.js ONLY when adding new dpx styles to the src/style.css file.

If you are just tweaking HTML in index.html, adding new cards, zooming in the browser, or rotating your phone — no recompilation is needed! The client script dpx-postcss.js intercepts screen changes and instantly updates the UI with zero delays.

6

Deployment Rules

When your site is ready, you do not need to upload everything to the hosting. The src folder, build.js file, and node_modules stay safely on your computer!

Upload only the final production files to your server:

The index.html file (along with images/fonts)
The dist folder (containing the compiled style.css)
The dpx-postcss.js script

Your UI is now fully independent of the OS hardware scaling and ready for high-load production!

DPX Integration in 5 minutes.