🏠 Build

    This guide is to demonstrate how to build a website with Preons using ready-made components. We're going to build a landing page for a store.

    Feel free to make changes and tweaks as you design.

    The Base HTML

    You can start in one of two ways.

    1. Play with the live code repl

    2. Copy-paste the code below into your editor and run locally.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Preons docs</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200;300;400;500;600;700&amp;family=Martel:wght@200;300;400;600;700;800;900&amp;family=Roboto+Mono:wght@100;300;400;500;700&amp;display=swap" />
    <link href="https://unpkg.com/preons/dist/reset.css" rel="stylesheet" type="text/css" />
    <link href="https://unpkg.com/preons/dist/preons.css" rel="stylesheet" type="text/css" />
  </head>
  <body class="">
    <!-- Content goes here -->
  </body>
</html>

    The Navigation

    👉 Grab the HTML from the navigation example. It is already responsive, but you can tweak it to suit your needs.

    The Hero section

    👉 Again, grab the HTML from the hero example. Feel free to change the image and the text. But for demonstration purposes, you can leave as is.

    The Portfolio

    👉 For the portfolio, you can use a simple grid. The images are from UnSplash but of course, you can change them.

    The Get In Touch Form

    👉 For the form, grab the HTML.

    👉 There are two parts. The footer links and the legal end. Grab both.

    What does your version look like

    Here's mine. Ok. I didn't update the text in every case. But I hope this little exercise highlights how much faster it is to build interfaces once you have a design system of reusable components.

    And here's the code.

    Next steps

    • Functional CSS will seem cryptic, at least at first. Use the reference to discover more colors and more classes.
    • Create your own functional CSS library by following the cli build guide.