Building a zero-dependency carbon calculator platform — architecture decisions and why I rejected every framework

Jeremiah Say — Sun, 10 May 2026 09:02:30 +0000

When I started building GreenCalculus — a carbon calculator platform
for sustainability officers and CSRD compliance teams — the first
decision wasn't which framework to use. It was whether to use one at all.

I chose not to. Here's why, and what I built instead.

The problem with frameworks for calculation tools

Carbon calculators have a specific job: take a number in, multiply it
by an emission factor, output a result in tCO₂e. That's it.

The interaction model is:

User selects fuel type
User enters quantity
User clicks Calculate
Result appears instantly

There is no routing. There is no global state. There is no component
tree. There is no reason to ship 40kb of runtime to do three
multiplications.

React, Vue, and Svelte are excellent tools. They're the wrong tool
for this job.

What "zero dependencies" actually means

No npm. No bundler. No node_modules. No build step.

The entire calculator is:

One HTML file
CSS in a <style> block
JavaScript in a <script> block
Served directly from GitHub Pages

A user on a slow 3G connection in a developing market — where carbon
accounting is growing fastest — loads the calculator in under a second.
There is nothing to parse except the page itself.

This also means zero supply chain risk. No dependency vulnerabilities.
No breaking changes from upstream packages. No npm audit with 47
moderate severity warnings.

CSS @layer architecture

The stylesheet uses the CSS @layer cascade system:

@layer base, layout, components, interactive;

This gives explicit control over specificity without fighting the
cascade. @layer base sets design tokens and resets. @layer layout
handles the 2-column dashboard grid. @layer components styles
individual UI elements. @layer interactive handles state changes.

The result: zero !important declarations in the entire codebase.

Fluid typography with clamp()

Every font size is fluid:

font-size: clamp(1.25rem, 3vw, 1.75rem);

No breakpoint-based font size overrides. No separate mobile stylesheet.
The layout responds smoothly across every viewport without a single
media query for typography.

The design brief calls for GreenCalculus to feel like a "premium
scientific instrument." Fluid type that never jumps or breaks is part
of that feel.

JetBrains Mono + tabular-nums for number stability

This one is underrated. Carbon calculator outputs update in real time
as users type. Without tabular-nums, the result value shifts
horizontally as digits change width — it looks broken even when the
math is correct.

.result-value {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}

Every digit is now the same width. The number is rock-steady during
updates. On a platform where numerical precision is the entire value
proposition, this matters.

2-column dashboard layout — inputs left, results right

B2B sustainability tools are used by people who live in dashboards.
The layout mirrors that mental model:

.gc-calc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

Left panel: inputs (fuel type, quantity, reporting period).

Right panel: results (tCO₂e output, calculation breakdown, source).

The user never loses sight of their inputs while reading the result.
No scrolling required. No modal. No separate results page.

On mobile it collapses to single column via one media query.

Logical properties for internationalisation

All spacing uses CSS Logical Properties:

margin-block-end: 1.25rem;
padding-inline: 1.5rem;

Instead of margin-bottom and padding-left/right. This is future-proofing
for RTL language support (Arabic, Hebrew) without a single line of
additional CSS. GreenCalculus will eventually serve markets where RTL
is the default — the architecture supports it from day one.

The calculation engine

The core formula for every GHG Protocol Scope 1 calculator:
Emissions (tCO₂e) = Activity Data × Emission Factor × GWP

In JavaScript:

const kg = quantity * FACTORS[fuelKey].factor;
const annualKg = kg / reportingPeriodFraction;
const annualTonnes = annualKg / 1000;

That's the entire calculation. Three lines. No library needed.

Emission factors come from UK DESNZ 2024. GWP values are IPCC AR6
GWP-100 — not AR5. The difference matters: fossil methane GWP is 29.8
under AR6, versus 25 under AR5. A 19% understatement if you're using
old values.

The full open dataset is published separately:

→ greencalculus/greencalculus-methodology

Precision and rounding rules

Raw outputs are computed to full floating-point precision. Rounding
is applied only at the display step:

const display = annualTonnes >= 1
  ? annualTonnes.toFixed(2)   // results >= 1t: 2 decimal places
  : annualTonnes.toFixed(4);  // results < 1t: 4 decimal places

Never round intermediate values. Always round display values. This
is the GHG Protocol precision standard applied in code.

What I would use a framework for

To be clear: this isn't a framework vs no-framework manifesto.

I would use React or Vue for:

A multi-step emissions inventory wizard with complex state
A comparison tool pulling live data from multiple APIs
A reporting dashboard with filterable tables across 15 Scope 3 categories

For a single-purpose calculation tool with one input → one output,
Vanilla JS is the correct choice. Match the tool to the job.

Live demo

The Scope 1 stationary combustion calculator is live on GitHub Pages:

→ greencalculus.github.io/greencalculus-calculator-demo

Source is open — MIT licensed:

→ greencalculus/greencalculus-calculator-demo

The platform is still being built. This is the first calculator of
many. If you're working in sustainability tech or have questions on
the GHG Protocol methodology, I'm happy to discuss in the comments.

Why most carbon calculators are using the wrong methane GWP value (and how to fix it)

Jeremiah Say — Sun, 10 May 2026 08:58:19 +0000

If your carbon calculator uses a GWP-100 value of 25 for methane, it's out of date by one full IPCC assessment cycle.

The problem

The IPCC Sixth Assessment Report (AR6), published 2021, updated GWP-100 values significantly:

Gas	AR5	AR6	Change
CH4 (fossil)	25	29.8	+19.2%
CH4 (biogenic)	25	27.9	+11.6%
N2O	265	273	+3.0%
SF6	23,500	25,200	+7.2%

For a company with significant natural gas combustion, refrigerant leaks, or agricultural emissions, the difference between AR5 and AR6 is not cosmetic. It's a ~19% understatement of methane-related emissions.

Why it hasn't been fixed widely

The GHG Protocol Corporate Standard permits either AR5 or AR6. Most tools defaulted to AR5 when they launched and haven't updated. Many sustainability teams don't know which GWP basis their tools use — it's rarely displayed prominently.

What fossil vs biogenic methane means

AR6 distinguishes two GWP values for CH4:

Fossil CH4 (29.8) — use for natural gas combustion, coal mining fugitives, oil & gas fugitive emissions
Biogenic CH4 (27.9) — use for landfill gas, agricultural emissions, managed biological processes

Most tools use a single CH4 value and don't distinguish. This is technically incorrect under AR6.

How to check your tools

Look for a "methodology" or "about" page on any carbon calculator you use. It should state:

Which IPCC assessment report the GWP values come from
Whether fossil and biogenic CH4 are treated separately
The source for emission factors (DESNZ, EPA, IPCC 2006, etc.)

If it doesn't disclose this, treat the output with caution.

What we built

I'm building GreenCalculus — a platform for carbon accounting calculators — and published the full AR6 GWP dataset openly on GitHub:

→ greencalculus/greencalculus-methodology

The data/gwp-values.json file has all 16 gases with AR5 and AR6 values side by side so you can audit your own tools. The METHODOLOGY.md explains exactly how we apply the GHG Protocol hierarchy.

Live demo

Scope 1 stationary combustion calculator using correct AR6 values, zero dependencies:

→ greencalculus.github.io/greencalculus-calculator-demo

Built in Vanilla JS — no frameworks, no bundler, ~300 lines. The calculation is:
Emissions (tCO₂e) = Activity Data × Emission Factor × GWP

Where GWP = 1 for factors already expressed in CO₂e (most fuel factors are pre-multiplied), and the AR6 value for raw gas quantities.

Bottom line

Check your GWP basis. If it says 25 for CH4, update it to 29.8 (fossil) or 27.9 (biogenic). Your Scope 1 inventory depends on it — and so does your CSRD disclosure.

The full open dataset is free to use and cite:
→ github.com/greencalculus/greencalculus-methodology

Forem: Jeremiah Say

Building a zero-dependency carbon calculator platform — architecture decisions and why I rejected every framework

The problem with frameworks for calculation tools

What "zero dependencies" actually means

CSS @layer architecture

Fluid typography with clamp()

JetBrains Mono + tabular-nums for number stability

2-column dashboard layout — inputs left, results right

Logical properties for internationalisation

The calculation engine

Precision and rounding rules

What I would use a framework for

Live demo

Why most carbon calculators are using the wrong methane GWP value (and how to fix it)

The problem

Why it hasn't been fixed widely

What fossil vs biogenic methane means

How to check your tools

What we built

Live demo

Bottom line