Beginner guide

New to web development? Start here.

This guide starts at the beginning. Learn what the files are, where they go and how to build a real FG UI page without technical jargon.

Built entirely with FG UI.

Every layout, component, interaction, icon and interface pattern on this website is powered by FG UI itself. No Bootstrap, Tailwind or external UI framework is used.

You do not need to learn everything first.

For a basic FG UI website, you mainly need one HTML file plus the FG UI assets folder. You can learn the deeper web-development concepts as you go.

The five-minute explanation

What are HTML, CSS and JavaScript?

HTML

The content and structure

HTML says what is on the page: headings, paragraphs, buttons, forms, menus and sections.

<button>Save</button>

CSS

How it looks

CSS controls the design. FG UI gives you the CSS, so you do not have to style every control yourself.

fgui-btn--primary

JavaScript

What it can do

JavaScript adds behaviour such as opening a modal, changing a carousel slide or showing a toast message.

assets/js/fgui.js

Step by step

Your first FG UI page.

Follow these steps in order. You can start with a completely blank folder.

Create a folder for your website

Example: my-website

Inside it, create a file called index.html.

Copy FG UI's assets folder into your website

CSS, JavaScript, icons and local fonts

Keep the folder structure intact so the files can find one another.

Link the FG UI stylesheet

This gives the page its design system.

Add class="fgui" to the body

This tells FG UI where its interface rules apply.

Optional: change the main colour to your own brand

You do not need to edit fgui.css.

Add your own CSS after FG UI and override the primary token.

.fgui { --fgui-primary: #790fcc; }

Load FG UI JavaScript before the body closes

This enables interactive components.

Make it look like your website

Changing the main colour is just one line.

A lot of people want their buttons and highlights to match their own logo or brand. FG UI makes that simple.

Before

FG UI's normal blue

The same working controls are shown in both cards. Try the button and toggle the option, then compare how the brand colour changes.

After

Your purple brand

Same FG UI components. No new component CSS. The colour tokens are simply different.

Copy this after FG UI loads

For your first site, this is all you need to understand. You can learn about the extra hover and soft colour tokens later.

Your colourBeginner friendly

<style>
  .fgui {
    --fgui-primary: #790fcc;
  }
</style>

Important:

Put this after the line that loads fgui.css. Do not open FG UI's main CSS file and change it directly.

See the full colour customisation guide →

Live example

Here is half a website made from FG UI components.

This is not a screenshot. It is a real interface running inside this page.

My new website

Turn a blank page into something polished.

This hero is already responsive and uses FG UI's typography, spacing, borders, buttons and design tokens.

Fast to start

Use ready-made components instead of designing every box from scratch.

Responsive

Components are designed to adapt down to narrow screens.

One system

Buttons, forms, cards and larger patterns share the same visual language.

That is already the start of a real site.

Add your own words, images and links, then keep composing FG UI components.

Copy this

A complete tiny starter page.

Save this as index.html beside the FG UI assets folder.

index.htmlBeginner starter

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Website</title>
  <link rel="stylesheet" href="assets/css/fgui.css?v=1.2.0">
  <style>
    .fgui {
      --fgui-primary: #790fcc;
    }
  </style>
</head>
<body class="fgui">
  <main class="fgui-container fgui-stack fgui-stack--lg">
    <section class="fgui-marketing-hero">
      <div>
        <div class="fgui-eyebrow">Welcome</div>
        <h1>My first FG UI website</h1>
        <p class="fgui-lead">Change this text to your own.</p>
        <button class="fgui-btn fgui-btn--primary">Get started</button>
      </div>
      <div class="fgui-marketing-hero__visual">
        <div class="fgui-marketing-hero__visual-mark">FG</div>
      </div>
    </section>
  </main>
  <script src="assets/js/fgui.js?v=1.2.0"></script>
</body>
</html>

When you are ready

Move from the beginner guide into the full system.

Browse the component showcase, then use the full documentation when you want to go deeper.

Browse components Open documentation