Learn PURE-CSS with Real Code Examples
Updated Nov 23, 2025
Code Sample Descriptions
1
Pure.css Counter Example
<!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>
Demonstrates a simple counter layout using Pure.css classes and minimal JavaScript for interactivity.
2
Pure.css Navbar Example
<!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 Navbar</title>
</head>
<body class="pure-g pure-u-1 pa3 bg-light">
<div class="pure-menu pure-menu-horizontal">
<a href="#" class="pure-menu-heading pure-menu-link">Logo</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
</ul>
</div>
</body>
</html>
Demonstrates a responsive navbar using Pure.css classes.
3
Pure.css Card Example
<!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 Card</title>
</head>
<body class="pa4">
<div class="pure-u-1 pure-u-md-1-3 center tc ba pa3">
<h3>Card Title</h3>
<p>This is a simple Pure.css card.</p>
<button class="pure-button pure-button-primary">Action</button>
</div>
</body>
</html>
Shows a simple card layout using Pure.css grid and button classes.
4
Pure.css Modal Example
<!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 Modal</title>
<style>.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);justify-content:center;align-items:center;}.modal-content{background:#fff;padding:2rem;}</style>
</head>
<body class="pa4 tc">
<button id="open" class="pure-button pure-button-primary">Open Modal</button>
<div id="modal" class="modal flex">
<div class="modal-content">
<h3>Modal Title</h3>
<p>This is a Pure.css modal.</p>
<button id="close" class="pure-button pure-button-error">Close</button>
</div>
</div>
<script>
document.getElementById('open').onclick=()=>document.getElementById('modal').style.display='flex';
document.getElementById('close').onclick=()=>document.getElementById('modal').style.display='none';
</script>
</body>
</html>
Demonstrates a modal popup using Pure.css classes and JS.
5
Pure.css Tabs Example
<!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>
Demonstrates tabbed interface using Pure.css menu and JS.