Thanks for checking out my solution to the Browser Extensions Manager challenge from Frontend Mentor. This was a fun and insightful project where I explored advanced frontend architecture, accessibility, and layout composition.
This project is a responsive, accessible browser extensions manager interface. I focused on Clean Architecture, CUBE CSS, and Every Layout principles to organize styles and logic cleanly.
Key goals:
- Semantic, accessible HTML
- Scalable CSS architecture (CUBE + BEM)
- Maintainable JS code following separation of concerns
- HTML5
- CSS (CUBE architecture + BEM naming)
- Vanilla JavaScript
- Vite
- Every Layout
- Granim.js
- Clean Frontend Architecture
- Variable Fonts
Users can:
- ✅ Toggle extensions between active and inactive
- ✅ Filter by status (active/inactive)
- ✅ Remove extensions from the list
- ✅ Switch between light/dark themes
- ✅ Experience responsive layout for all device sizes
- ✅ See focus/hover states for all interactive elements
-
Using Every Layout to compose or create all the layouts
-
CUBE CSS: Component-first styling with predictable utilities
-
Clean Architecture:
- Domain logic separated from UI
- No HTML-in-JS; dynamic content managed via
data.json
-
Theming: Switched themes using
[data-theme]+ CSS custom properties -
Gradients: CSS can't animate them directly; used
Granim.js -
While some of the ideas for the clean architecture were nice, it wound up giving more problems instead, will most likely take a few points or ideas and add them to my own setup
- Clean Frontend Architecture – Alex Bespoyasov
- Accessible Toggle Buttons – Josh Collinsworth
- Every Layout
- Granim.js