Counter Example - Tachyons Typing CST Test
Loading…
Counter Example — Tachyons Code
Demonstrates a simple counter layout using Tachyons utility 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://cdnjs.cloudflare.com/ajax/libs/tachyons/4.12.0/tachyons.min.css">
<title>Tachyons Counter</title>
</head>
<body class="pa4 tc bg-light-gray">
<h2 class="f3 mb4">Counter: <span id="count">0</span></h2>
<div class="mb3">
<button id="increment" class="f6 link dim br2 ph3 pv2 mb2 dib white bg-blue">+</button>
<button id="decrement" class="f6 link dim br2 ph3 pv2 mb2 dib white bg-red">-</button>
<button id="reset" class="f6 link dim br2 ph3 pv2 mb2 dib white bg-gray">Reset</button>
</div>
<button id="theme-btn" class="f6 link dim br2 ph3 pv2 mb2 dib black bg-yellow">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-gray', isDark);
body.classList.toggle('white', isDark);
body.classList.toggle('bg-light-gray', !isDark);
body.classList.toggle('black', !isDark);
};
</script>
</body>
</html>Tachyons Language Guide
Tachyons is a functional CSS framework that emphasizes small, reusable utility classes to build fast, responsive, and highly maintainable user interfaces.
Primary Use Cases
- ▸Highly optimized and lightweight web pages
- ▸Performance-focused websites
- ▸Rapid prototyping using utility classes
- ▸Responsive design projects without heavy JS
- ▸Custom UI design without prebuilt components
Notable Features
- ▸Atomic/utility-first CSS approach
- ▸Responsive helpers for mobile-first design
- ▸Lightweight and fast-loading
- ▸Composable classes for flexible layouts
- ▸No JS components included
Origin & Creator
Created by Adam Morse in 2013 as a minimalist and performance-focused CSS framework.
Industrial Note
Tachyons is popular in projects prioritizing speed, maintainability, and functional CSS over component-heavy frameworks.