Tabs Example - Tachyons Typing CST Test
Loading…
Tabs Example — Tachyons Code
Demonstrates tabbed interface using Tachyons classes.
<!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 Tabs</title>
<style>.tab-content { display:none; } .tab-content.active { display:block; }</style>
</head>
<body class="pa4">
<div class="flex mb3">
<button class="f6 link dim br2 ph3 pv2 dib bg-blue white mr2" onclick="showTab(1)">Tab 1</button>
<button class="f6 link dim br2 ph3 pv2 dib bg-gray white mr2" onclick="showTab(2)">Tab 2</button>
<button class="f6 link dim br2 ph3 pv2 dib bg-dark-gray white" onclick="showTab(3)">Tab 3</button>
</div>
<div id="tab1" class="tab-content active">Content for Tab 1</div>
<div id="tab2" class="tab-content">Content for Tab 2</div>
<div id="tab3" class="tab-content">Content for Tab 3</div>
<script>
function showTab(n){ document.querySelectorAll('.tab-content').forEach(c=>c.classList.remove('active')); document.getElementById('tab'+n).classList.add('active'); }
</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.