ISO/IEC 27002 Visual Diagram
From Scratch to Live: Building and Deploying a Modern Security Controls Visualization
Project Overview
This project documents the complete journey of building a fully responsive, dark-themed HTML/CSS diagram to visualize the 93 security controls defined in ISO/IEC 27002:2022. The goal was to create a clean, readable, and reusable component for blogs, internal SharePoint Wiki, or Power Page Wiki Platform environments.
Phase 1: Laying the Foundation, HTML Structure
I began with a structured approach, creating a semantic HTML layout that would serve as the backbone for the entire visualization.
- Header section with title and subtitle
- Root node for visual anchoring
- Four main domain containers
- Individual control items
- Organizational Controls (37)
- People Controls (8)
- Physical Controls (14)
- Technological Controls (34)
Live Example: Control Item Structure
<div class="control-item" style="background-color:#0F1735; color:#ffffff; padding:10px; border-radius:5px;">
<div class="control-id">5.1</div>
<div class="control-title">Policies for information security</div>
</div>Phase 2: Styling with CSS, Dark Mode and Responsive Design
The styling phase focused on creating a modern, accessible dark theme with responsive capabilities across all device sizes.
- Dark theme with #0F1735 background
- Domain-specific color coding
- CSS Grid for layout management
- Smooth transitions and hover effects
- Desktop: 2-column grid layout
- Tablet: Adaptive card stacking
- Mobile: Single-column layout
- Scrollable domain containers
@media (max-width: 768px) {
.domains-grid {
grid-template-columns: 1fr;
background-color: #0F1735;
color: #ffffff;
}
}Phase 3: Testing Responsiveness
Comprehensive testing across multiple devices and screen sizes ensured optimal user experience everywhere.
All domains display side by side in a clean two-column layout with optimal spacing.
Layout adapts to stack cards while maintaining visual hierarchy and readability.
Each domain becomes full-width with vertical scrolling for easy navigation.
Phase 4: Hosting It Live with GitHub Pages
Deployment to GitHub Pages provides a stable, public URL for integration across multiple platforms.
1. Rename file to index.html
2. Push to GitHub repository
3. Enable GitHub Pages (Settings → Pages → Source → main branch)
4. Access via: https://your-username.github.io/iso27002_Diagram/Phase 5: Platform Integration
The diagram was designed for seamless integration across multiple enterprise platforms and content management systems.
HTML widget in Elementor or iframe embed for seamless blog integration.
File Viewer web part or Embed Web Part for modern SharePoint sites.
Upload as Web File and reference via Web Page templates.
Website Tab integration for IT Governance and InfoSec channels.
<iframe src="https://your-username.github.io/iso27002_Diagram/"
width="100%"
height="1200"
style="border:none;">
</iframe>Explore the Code
Open source project licensed under MIT. Fork, customize, and extend for your own needs.
"Bringing structure and clarity to ISO 27002 in modern environments"