Design System and Components

Idea

Building components and parts to reuse makes the process faster, cleaner, and more organized. Additionally, it’ll bestow a sense of consistency across your website.

DesignSystems a collection of reusable UI components, global styles, and utility classes and functions. Create predefined and reusable parts and build the website.

Find his repo here for examples YouTube Video

Steps

Design first

Design your website first, before even building or writing anything. Define what you need to convey, display, and have the user interact with on every page, structure your pages accordingly. Design First then Build

Build the blocks

After you’ve defined the design and purpose, decide on which components you need to do that.

Set up CSS variables

Make your global Stylesheet.

First reset and remove default paddings and margins so you work on a clear canvas.

* {
margin: 0;
padding: 0;
box-sizing: border-box
}

Then make your global color variables, fonts, and style the atomic HTML elements you’ll use frequently like h1 and p elements and whatnot.

Additionally, making different named-spacings (pixel sizes) is recommended, because it’ll trickle down and make things consistent.

All this makes your styles Modular.

Global elements

Now style global elements like links, headings, and buttons and their behaviour such as hover. Never use fixed values like color and pixels -> use what you defined.

Create Utility classes

These are classes you’ll reuse such as containers, text-alignment, flex-box layouts, padding, and margin-helpers.

CSS Approaches

There’s two main approaches:

1. Main Stylesheet:
2. Component approach: this is when you build partials that are styled using the atomic style rules you’ve defined and reuse them throughout.

Creating Custom HTML Elements

To define a customHTMLElement using JavaScript

class AHeader extends HTMLElement {
	//THis runs auto when AHeader connects to the DOM
	connectedCallback(){
		// Add your element structure here
	}
}
customElements.define("a-header", AHeader);

Now you can use the tag as you would any other HTML element. We can even use variables in these definitions and pass them in, similar to how many frameworks do. // Reminiscent of React Props

Static websites

React is overkill for a StaticSite, Check out Astro or Svelte. // Svelte however, is also great for dynamic sites, so might learn it instead.