Pure.css Modal Example - Pure-css Typing CST Test
Loading…
Pure.css Modal Example — Pure-css Code
Demonstrates a modal popup using Pure.css classes 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 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>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.