Pure.css Counter Example - Pure-css Typing CST Test
Loading…
Pure.css Counter Example — Pure-css Code
Demonstrates a simple counter layout using Pure.css classes and minimal JavaScript for interactivity.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/purecss@2.1.0/build/pure-min.css">
<title>Pure.css Counter</title>
</head>
<body class="pure-g pure-u-1 tc pa4">
<h2 class="f3 mb3">Counter: <span id="count">0</span></h2>
<div class="pure-button-group mb3">
<button id="increment" class="pure-button pure-button-primary">+</button>
<button id="decrement" class="pure-button pure-button-error">-</button>
<button id="reset" class="pure-button">Reset</button>
</div>
<button id="theme-btn" class="pure-button pure-button-warning">Switch Theme</button>
<script>
let count = 0;
let isDark = false;
const countEl = document.getElementById('count');
const body = document.body;
document.getElementById('increment').onclick = () => { count++; countEl.textContent = count; };
document.getElementById('decrement').onclick = () => { count--; countEl.textContent = count; };
document.getElementById('reset').onclick = () => { count = 0; countEl.textContent = count; };
document.getElementById('theme-btn').onclick = () => {
isDark = !isDark;
body.classList.toggle('bg-dark', isDark);
body.classList.toggle('white', isDark);
body.classList.toggle('bg-light', !isDark);
body.classList.toggle('black', !isDark);
};
</script>
<style>
.bg-dark { background-color: #222; }
.bg-light { background-color: #fff; }
.white { color: #fff; }
.black { color: #000; }
</style>
</body>
</html>Pure-css Language Guide
Pure CSS is a minimal, responsive CSS framework by Yahoo that provides a lightweight grid system and basic UI components without JavaScript. It's designed for speed, simplicity, and performance.
Primary Use Cases
- ▸Landing pages and marketing websites
- ▸Lightweight responsive websites
- ▸Rapid prototyping without JS
- ▸Email templates or static sites
- ▸Web apps using separate JS frameworks
Notable Features
- ▸Minimal, lightweight CSS framework
- ▸Responsive mobile-first grid system
- ▸Prebuilt modules: buttons, forms, tables, menus
- ▸Cross-browser compatible
- ▸No JavaScript dependencies
Origin & Creator
Created by Yahoo in 2008, Pure CSS was designed to provide a simple, fast, and responsive CSS toolkit for building websites without the overhead of large frameworks.
Industrial Note
Perfect for small to medium projects where minimal CSS, fast load times, and responsive layouts are required, especially when no JavaScript components are needed.