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.
You can start in one of two ways.
Play with the live code repl
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>
👉 Grab the HTML from the navigation example. It is already responsive, but you can tweak it to suit your needs.
👉 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.
👉 For the portfolio, you can use a simple grid. The images are from UnSplash but of course, you can change them.
👉 For the form, grab the HTML.
👉 There are two parts. The footer links and the legal end. Grab both.
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.