A Minecraft clone made with pure HTML & CSS – no JavaScript.

Play the original game: benjaminaster.com/css-minecraft

screenshot of CSS Minecraft

This project renders a small Minecraft-style world directly in the DOM using Pug and SCSS.

There is no JavaScript controlling the game state. The interaction works through HTML radio inputs, labels, CSS selectors, :has(), 3D transforms and paused CSS animations.

Additional documentation is separated by topic:

• World configuration: explains world size, presets and performance limits.
• Architecture: explains how the generated DOM, radio inputs, labels and CSS-only interactions work.

The repository should keep the source files:

index.pug
main.scss
icons.css
assets/
README.md
WORLD_CONFIG.md
ARCHITECTURE.md
package.json
pnpm-lock.yaml

The generated files do not need to be committed:

index.html
main.css
main.css.map

These files can be regenerated locally from the source files.

You need Node.js and pnpm.

Check your installed versions:

node -v
pnpm -v

If pnpm is not installed, install it with Corepack:

corepack enable
corepack prepare pnpm@latest --activate

Or install it globally with npm:

npm install -g pnpm

After cloning the project, install the dependencies:

pnpm install

This installs the local development tools used by the project:

• pug-cli
• sass
• concurrently

You do not need to install pug or sass globally.

Generate the compiled HTML and CSS:

pnpm build

This creates:

index.html
main.css
main.css.map

These generated files are ignored by Git.

Run the Pug and Sass watchers:

pnpm dev

This keeps watching:

index.pug -> index.html
main.scss -> main.css

Important: pnpm dev only compiles and watches files. It does not start a web server by itself.

Use two terminal tabs.

Terminal 1:

pnpm dev

Terminal 2:

python3 -m http.server 8000

Then open:

http://localhost:8000

The browser will serve the generated index.html.

When you edit index.pug or main.scss, pnpm dev regenerates the compiled files. Refresh the browser to see the changes.

You can also build once and then serve the folder:

pnpm build
python3 -m http.server 8000

Then open:

http://localhost:8000

The project includes these scripts:

pnpm build

Compiles Pug and Sass once.

pnpm build:pug

Compiles index.pug into index.html.

pnpm build:sass

Compiles main.scss into main.css.

pnpm dev

Runs both Pug and Sass in watch mode.

pnpm dev:pug

Watches and compiles only index.pug.

pnpm dev:sass

Watches and compiles only main.scss.

This project requires support for the CSS :has() pseudo-class.

Modern Chromium, Safari and Firefox versions support it, but older browsers may not work correctly.