/ 02

File Structure

What's inside the fieldcraft-html/ folder — every page file and every top-level subfolder, explained.

You're looking at the folder you actually got

What ships in your ThemeForest download is compiled, ready-to-use HTML/CSS/JS — no build step required. A separate Sass source exists behind the scenes for developers who want to rebuild the stylesheet from scratch; see SCSS Reference if that's you. Everyone else can ignore that entirely and just edit the files below directly — see Customizing.

Folder overview

fieldcraft-html/
  index.html               Home
  about.html                About
  services.html              Trades (services overview)
  service-single.html        Single trade/service detail
  service-areas.html         Service areas
  gallery.html                Job files (before/after gallery)
  reviews.html                 Reviews
  contact.html                Contact
  blog-index.html              Notes from the Truck (blog index)
  blog-single.html              Single blog post
  faq.html                       FAQ
  pricing.html                    Pricing
  coming-soon.html                 Maintenance / coming soon
  privacy.html                      Privacy Policy
  terms.html                         Terms of Use
  404.html                            Not Found
  css/
    tokens.css                       Design tokens (colors, type, spacing)
    tokens.min.css                    Minified copy, used by every page
    main.css                           Component & layout styles
    main.min.css                        Minified copy, used by every page
  js/
    main.js                            Mobile nav, scroll reveals, count-ups, marquee, FAQ accordions
    main.min.js                         Minified copy, used by every page
  img/                                  25 photographs (JPEG)
  licensing/
    ASSETS.md                            Full asset & license manifest

The 16 page files

Every page is a complete, self-contained .html file — there's no shared template or include system. Each links the same two stylesheets and the same script, so editing css/main.css once changes every page at once. See Page Reference for what each individual page is for.

css/

File	What it does
`tokens.css` / `tokens.min.css`	The design tokens — every color, font family, spacing value and radius used anywhere in the template, expressed as CSS custom properties (`--amber`, `--font-heading`, and so on). This is the single source of truth: change a value here and it applies everywhere that property is used, site-wide, in one edit. Every page links the minified `tokens.min.css`. See Customizing.
`main.css` / `main.min.css`	Component and layout styles built on top of the tokens — how sections, cards, buttons and the header/footer are actually put together. Edit this file (not `tokens.css`) if you want to change spacing, structure or how a section is laid out, rather than a color or font. Every page links the minified `main.min.css`.

Editing the minified files directly is fine

Since this download has no build step, editing tokens.min.css/main.min.css by hand (they're still readable, just without extra whitespace) is a perfectly normal way to make a change. Only reach for the Sass source under SCSS Reference if you specifically want to work from the original, fully-commented partials and recompile.

js/

File What it does

main.js / main.min.js A single vanilla JavaScript file, no dependencies, no framework. It powers the mobile navigation menu (with a focus trap so keyboard users can't tab outside it while it's open), scroll-triggered reveal animations, the count-up stats on the home page, the CSS marquee, contact-form success states, and the FAQ accordion. It automatically turns off all motion for visitors with prefers-reduced-motion set in their operating system. Every page links the minified main.min.js.

File	What it does
`main.js` / `main.min.js`	A single vanilla JavaScript file, no dependencies, no framework. It powers the mobile navigation menu (with a focus trap so keyboard users can't tab outside it while it's open), scroll-triggered reveal animations, the count-up stats on the home page, the CSS marquee, contact-form success states, and the FAQ accordion. It automatically turns off all motion for visitors with `prefers-reduced-motion` set in their operating system. Every page links the minified `main.min.js`.

img/

25 photographs (JPEG), all AI-generated originals the template owns outright — no stock licensing risk. See Licensing & Credits for the full per-file manifest.

A note on fonts

This template has no fonts/ folder. The three fonts (Big Shoulders, IBM Plex Sans, IBM Plex Mono) are loaded from Google Fonts via a <link> in each page's <head>, for convenience — there's nothing to self-host unless you want to. See Customizing → Fonts if you'd rather self-host them or swap them for different families entirely.

licensing/

File	What it does
`ASSETS.md`	A plain-text manifest listing every image and font used in the template, matched to its license. Reproduced in full, formatted for reading, on the Licensing & Credits page.

Working from source (developers)

The files above are compiled output. If you'd rather edit the original, fully-commented Sass partials and JavaScript source and rebuild from there — useful if you're extending a component or restructuring the stylesheet — see SCSS Reference, which documents the build scripts and every object, component and utility in the source.