Instructions

Minux is plain HTML, CSS and JavaScript. There is no build step and nothing to install: open index.html in a browser, or upload the folder to any static host (Netlify, Vercel, GitHub Pages, or your own server).

Where things live:

• Every page is an .html file at the top of the folder.
• assets/css/styles.css holds all of the styling and assets/js/main.js all of the behaviour.
• Images and fonts are in assets/images and assets/fonts.

The design is driven by CSS custom properties declared once in :root near the top of the design section of styles.css. Change a value there and every element that uses it follows.

Key global styles include:

• Heading sizes: --h1--font-size to --h6--font-size, with matching line heights and weights
• Body text: --text-regular--font-size and --text-small--font-size
• Spacing and gaps: the --_common-spacing---spacing--spacing-6x family
• Reusable parts: .main-button, .container, .container-full and .section-title

Minux is a monochrome design built from one grey scale. Replace a value in :root and every section that uses it updates.

The key colors:

• --_color---normal-color--black — the page background
• --_color---accent-color--accent-2 — headings and body copy (#F2F2F2)
• --_color---accent-color--accent-7 — borders, quiet text and the ruler ticks (#404040)
• --_color---accent-color--accent-13 — the navigation pill and dark cards (#282828)

Some icons and decorative graphics are SVG files. To recolor one, open it in a text editor and replace its HEX value.

Minux uses four families, all self-hosted in assets/fonts and declared in assets/fonts/fonts.css: Poppins for headings and display copy, B612 Mono for labels, tags and buttons, Inter for a few small captions, and the Mea Culpa script for the accent words.

To change a font:

• Add your WOFF2 font files to assets/fonts and declare them in fonts.css
• Point --_base---font-family--your-heading-font, --_base---font-family--your-body-font, --_base---font-family--third-family or --_base---font-family--forth-family at the new family
• Every heading, paragraph and button follows the variable

Every page shares the same header and footer and the same .container spacing, so a new page is a copy of an existing one with its sections swapped.

To create a new page:

• Duplicate the page closest to what you need, for example about.html
• Rename it, update its <title> and meta description
• Replace the sections, copy, images and links
• Link it from the header .main-header-nav or the footer

Blog posts, services and works:

• Each item is its own page: blog-*.html, service-*.html and work-*.html
• To add one, duplicate an existing item page, edit it, and add a card that links to it on blogs.html, services.html or work.html

All motion is hand-written in assets/js/main.js and section 4 of styles.css. No library is loaded; each effect is switched on by a class or attribute already in the markup.

What drives what:

• data-fade-up — the scroll reveal; add it to any element to reveal it the same way
• .utility-pages-title — page titles that rise in letter by letter
• .main-button — the label roll on hover
• .home-hero-banner-marquee-wrap — the running ruler strips; add reverse to run one the other way
• .counter — numbers that count up when they come into view
• .faq-items — the FAQ accordion; the first item opens with the page
• data-slider — the team slider

Visitors who ask their system for reduced motion get every section shown at once, with no reveals, loops or smooth scrolling.

To add a question, duplicate a whole .faq-items block inside .faq-wrap and change its text. Give the new .faq-qus-flex button and .faq-ans-box answer a matching pair of ids in aria-controls and id, so screen readers can connect them.

The contact and password forms are front-end demos: they validate, then show their success (or, for the password box, error) message. Every field keeps its name.

To connect a real service:

• Give the <form> an action and method from your provider
• Remove its data-demo-form attribute so main.js stops answering it

Recommended checks:

• Update each page's title, meta description and social image
• Add meaningful alt text to every image that carries content
• Compress new photos; the template ships AVIF, PNG and JPG
• Review every page on desktop, tablet and mobile
• Remove the pages and sections you do not use

If anything here is unclear, or you would like a hand adapting the template, get in touch at contact@kaziehsan.com. We are happy to help.