Catch and convice with a cover page

⏲ Time invest: 20 Minutes ––– 👩‍🎓 Level: Expert

What to expect

You work dozens of hours on your design system and of course you want to brag about it.

patternplate's design fits well to documentation, but for a landing page it should be a bit more fancy.

This is where the cover feature comes in.

We will …

• … have a look at the necessary configuration for cover
• … design a "Hello World" page with vanilla HTML, CSS and JavaScript

You'll need

• ✅ You are all set if you followed along Guide: Build a component

• ✍️ Text editor
• 📁 patternplate project (Getting Started Guide)

Before you start

• Understand HTML and CSS on a fundamental level

Configure patternplate

1. Make sure patternplate runs on http://localhost:1337/

2. Create a ./patternplate.config.js and copy the following code into it. We are configuring patternplate with its defaults to prepare for the next step.

   See Reference: Configuration for details about the config keys

// patternplate.config.js, default config
module.exports = {
  docs: ["docs/**/*.md", "README.md"],
  entry: ["lib/**/demo.js"],
  render: "@patternplate/render-default/render",
  mount: "@patternplate/render-default/mount"
};

3. Create a minimal ./cover.js file

// cover.js
module.exports = {
  default: () => {},
  html: () => {
    return `<h1>Hello world</h1>`
  }
};

4. Reference ./cover.js from ./patternplate.config.js

// patternplate.config.js
module.exports = {
  docs: ["docs/**/*.md", "README.md"],
  entry: ["lib/**/demo.js"],
  render: "@patternplate/render-default/render",
  mount: "@patternplate/render-default/mount",
  cover: "./cover" // use cover.js
};

5. Navigate to http://localhost:1337/?reload=true and see the main staple of tutorial writers world wide, the all-popular Hello world message:

   

Notice how there are no styles and elements of the patternplate interface on screen. That's entirely on purpose: This way the cover page is a blank canvas you can do whatever you like with.

That's cool but we aim for fancy, remember? We'll add some design to this in the next step.

Design a cover page

1. We are into tackling the hardest problems first, so let's center our Hello World message both horizontally and vertically 😱

   Add a .css export to your ./cover.js file

   // cover.js
   module.exports = {
     css: () => {
       return `
         h1 {
           position: absolute;
           top: 50%;
           left: 50%;
           max-width: 30ch;
           transform: translate(-50%, -50%);
           font-family: Helvetica, Arial, sans-serif;
         }
       `;
     },
     default: () => {},
     html: () => {
       return `<h1>Hello world</h1>`
     }
   };
   // cover.js
   module.exports = {
     css: () => {
       return `
         h1 {
           position: absolute;
           top: 50%;
           left: 50%;
           max-width: 30ch;
           transform: translate(-50%, -50%);
           font-family: Helvetica, Arial, sans-serif;
         }
       `;
     },
     default: () => {},
     html: () => {
       return `<h1>Hello world</h1>`
     }
   };
    

2. Add a background gradient to spice things up:

   // cover.js
   module.exports = {
     css: () => {
       return `
         html {
           margin: 0;
           background-image: linear-gradient(-45deg, #4504DA, #FF0353);
         }
         h1 {
           position: absolute;
           top: 50%;
           left: 50%;
           max-width: 30ch;
           transform: translate(-50%, -50%);
           font-family: Helvetica, Arial, sans-serif;
           color: #ffffff;
         }
       `;
     },
     default: () => {},
     html: () => {
       return `<h1>Hello world</h1>`
     }
   };
   // cover.js
   module.exports = {
     css: () => {
       return `
         html {
           margin: 0;
           background-image: linear-gradient(-45deg, #4504DA, #FF0353);
         }
         h1 {
           position: absolute;
           top: 50%;
           left: 50%;
           max-width: 30ch;
           transform: translate(-50%, -50%);
           font-family: Helvetica, Arial, sans-serif;
           color: #ffffff;
         }
       `;
     },
     default: () => {},
     html: () => {
       return `<h1>Hello world</h1>`
     }
   };
    

3. Finally, make the message a link to your component library:

// cover.js
module.exports = {
  css: () => {
    return `
      html {
        background-image: linear-gradient(-45deg,#4504DA,#FF0353);
      }
      h1 {
        position: absolute;
        top: 50%;
        left: 50%;
        max-width: 30ch;
        transform: translate(-50%, -50%);
        font-family: Helvetica, Arial, sans-serif;
        color: #ffffff;
      }
      a:link, a:visited {
        color: inherit;
        text-decoration-skip-ink: auto;
        text-decoration-style: dotted;
        text-decoration-color: rgba(255, 255, 255, .5);
        transition: .3s text-decoration-color ease-in-out;
      }
      a:hover {
        text-decoration-color: rgba(255, 255, 255, 1);
      }
    `;
  },
  default: () => {},
  html: () => {
    return `
      <h1>
        <a href="./doc/README">
          Explore my-patternplate now
        </a>
      </h1>
    `
  }
};
// cover.js
module.exports = {
  css: () => {
    return `
      html {
        background-image: linear-gradient(-45deg,#4504DA,#FF0353);
      }
      h1 {
        position: absolute;
        top: 50%;
        left: 50%;
        max-width: 30ch;
        transform: translate(-50%, -50%);
        font-family: Helvetica, Arial, sans-serif;
        color: #ffffff;
      }
      a:link, a:visited {
        color: inherit;
        text-decoration-skip-ink: auto;
        text-decoration-style: dotted;
        text-decoration-color: rgba(255, 255, 255, .5);
        transition: .3s text-decoration-color ease-in-out;
      }
      a:hover {
        text-decoration-color: rgba(255, 255, 255, 1);
      }
    `;
  },
  default: () => {},
  html: () => {
    return `
      <h1>
        <a href="./doc/README">
          Explore my-patternplate now
        </a>
      </h1>
    `
  }
};
 

Take aways

• A cover can be enabled by the cover key in patternplate.config.js

• Covers provide are a blank canvas for you to fill with a landing page or anything you can come up with, really.

• Referenced covers are plain JavaScript with e.g. html, css, default exports.

  ℹ️ Conceptually covers are specialized demo entries.

  See Reference: Demos for more details about supported exports, etc.

Related topics

• Demos