Mode:
Duration:
1
Coding works best on desktop or with an external keyboard.
Counter Example - Tachyons Typing CST Test
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.
Quick Explain
- ▸Tachyons uses atomic CSS classes for styling instead of prebuilt components.
- ▸It provides utilities for spacing, typography, color, layout, and responsiveness.
- ▸The framework encourages a functional, composable approach to UI development.
Core Features
- ▸Small, reusable CSS classes
- ▸Functional approach to styling
- ▸Typography, spacing, color, and layout utilities
- ▸Responsive class modifiers for different breakpoints
- ▸Minimal footprint for fast loading
Learning Path
- ▸Understand atomic CSS principles
- ▸Learn core utility classes for spacing, typography, colors
- ▸Master responsive modifiers
- ▸Practice composing multiple classes
- ▸Integrate Tachyons with JS frameworks if needed
Practical Examples
- ▸Responsive header and navigation
- ▸Card layout using flex utilities
- ▸Forms with spacing and typography utilities
- ▸Image gallery with width and spacing classes
- ▸Buttons composed of multiple atomic classes
Comparisons
- ▸Utility-first CSS vs component-heavy frameworks (Bootstrap, UIkit)
- ▸No JS vs UIkit’s or Materialize’s JS plugins
- ▸Smaller footprint and faster load
- ▸Steeper learning curve initially
- ▸Encourages maintainable, composable HTML structure
Strengths
- ▸Extremely lightweight and performant
- ▸Highly composable and maintainable
- ▸Easy to understand and read once familiar
- ▸Encourages separation of concerns in styling
- ▸Mobile-first responsive design built-in
Limitations
- ▸No prebuilt components; purely utility classes
- ▸Steeper learning curve for beginners
- ▸Requires discipline in composing classes
- ▸Not ideal for quick prototyping with standard components
- ▸Can result in long class names in HTML
When NOT to Use
- ▸If prebuilt components are required
- ▸For projects needing heavy JS interactivity
- ▸For teams unfamiliar with functional CSS
- ▸When quick prototyping with standard components is desired
- ▸When long class lists in HTML are a concern
Cheat Sheet
- ▸`pa3` - padding all sides
- ▸`ma2` - margin all sides
- ▸`f3` - font size
- ▸`bg-light-gray` - background color
- ▸`w-50-m` - width 50% on medium screens
FAQ
- ▸Is Tachyons free?
- ▸Yes - open-source under MIT license.
- ▸Does Tachyons include JS?
- ▸No - purely CSS framework.
- ▸Is Tachyons responsive?
- ▸Yes - mobile-first responsive utilities.
- ▸Can I customize Tachyons?
- ▸Yes - via Sass or custom CSS overrides.
- ▸Which browsers does Tachyons support?
- ▸All modern browsers with Flexbox support.
30-Day Skill Plan
- ▸Week 1: Basic layout and spacing utilities
- ▸Week 2: Typography and color classes
- ▸Week 3: Responsive design using modifiers
- ▸Week 4: Compose complex UI without custom CSS
- ▸Week 5: Optimize and scale large projects with modular utilities
Final Summary
- ▸Tachyons is a utility-first CSS framework.
- ▸Highly lightweight and performance-oriented.
- ▸Mobile-first, responsive, and composable.
- ▸No JS components included; purely CSS.
- ▸Ideal for maintainable, scalable, and fast-loading UIs.
Project Structure
- ▸index.html - main layout
- ▸assets/css/ - optional custom overrides
- ▸node_modules/tachyons - installed framework
- ▸partials/ - reusable sections
- ▸No JS folder needed
Monetization
- ▸Develop templates using Tachyons for sale
- ▸Performance-optimized landing pages
- ▸Custom SPAs and dashboards
- ▸Rapid prototyping services
- ▸Consulting on atomic CSS design
Productivity Tips
- ▸Compose classes rather than creating custom CSS
- ▸Use responsive modifiers early
- ▸Keep class lists organized
- ▸Leverage utility-first philosophy for fast development
- ▸Integrate with frameworks for dynamic projects
Basic Concepts
- ▸Atomic classes for spacing (`pa3`, `ma2`), typography (`f1`, `lh-copy`), and colors (`bg-blue`, `white`)
- ▸Grid and layout utilities (`flex`, `flex-wrap`, `w-50`) for responsive design
- ▸Responsive suffixes like `-ns`, `-m`, `-l` for different screen sizes
- ▸Utility-first approach encourages composable and maintainable HTML
- ▸Minimal reliance on custom CSS