A simple, sharp layout for vyood
Black background, white text, a clean top nav, and a right-to-left mobile drawer. Teasers scale by available width and collapse to a single column on mobile.
Design principles
Large click targets, subtle borders, tight spacing, and one consistent type system. Everything is class-based so you can drop it into templates without fighting global element rules.
Readable contrast
Text sits at high contrast on black with muted secondary lines for hierarchy.
Responsive grids
Auto-fit grids for quick layouts plus fixed max-column variants for testing.
Mobile drawer
A single JS file toggles a right-side menu and swaps the hamburger and X icons.
Quick links
Use the teaser variants to test maximum columns by screen width. Each grid has multiple rows and collapses to one column on mobile.