Setup

Requirements

Prototyping

Build prototypes quickly, with zero configuration.

While Whiteprint is all about configurability, the ability to build wireframe-like prototypes is a core feature. The steps below will add the required files to your project. If you would like to start customising your components right away, skip to Production.

In your terminal, navigate to your project folder.

cd my-new-project

Then install Whiteprint:

npm install whiteprint

Create the prototype files using the below command. css and js folders will be created.

./node_modules/.bin/whiteprint-setup-prototype

Link those files in your document, then you’re ready to start adding Components and Layouts.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>My prototype</title>

    <!-- Whiteprint prototyping CSS -->
    <link rel="stylesheet" href="css/prototype.css">

  </head>
  <body>
    <h1>Hello world!</h1>

    <!-- Whiteprint prototyping JS -->
    <script src="js/prototype.js" ></script>
  </body>
</html>

Production

Build websites, from prototype to production.

These steps will give you the full Whiteprint setup, providing the configurability and extensibility needed to realise your designs.

If you haven’t already done so, install Whiteprint into your project folder:

npm install whiteprint --save

Run the production setup script:

./node_modules/.bin/whiteprint-setup-production

This will add the the below files to your project.

  • src
    • css
      • components
        • alert.css
        • button.css
        • card.css
        • …
      • layouts
        • cover.css
        • stack.css
        • sidebar.css
        • …
      • styles.css
      • variables.css
  • js
    • components.js
  • gulpfile.js

Build your files with:

npx gulp whiteprint:build

At this point you should have css/styles.css and js/components.js, which can be added to your HTML.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>My project</title>

    <!-- Whiteprint CSS -->
    <link rel="stylesheet" href="css/styles.css">

  </head>
  <body>
    <h1>Hello world!</h1>

    <!-- Whiteprint JS -->
    <script src="js/components.js" ></script>
  </body>
</html>

You are now ready to start customising and configuring.