Pure.css Tabs Example - Pure-css Typing CST Test
Loading…
Pure.css Tabs Example — Pure-css Code
Demonstrates tabbed interface using Pure.css menu and JS.
<!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 Tabs</title>
<style>.tab-content{display:none;}.tab-content.active{display:block;}</style>
</head>
<body class="pa4">
<ul class="pure-menu pure-menu-horizontal">
<li class="pure-menu-item"><a href="#" class="pure-menu-link" onclick="showTab(1)">Tab 1</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link" onclick="showTab(2)">Tab 2</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link" onclick="showTab(3)">Tab 3</a></li>
</ul>
<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>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.