Foundations
Grid System
கட்டகம் (Grid)
TamilDS relies on a robust 12-column fluid grid system engineered on a 4px base unit. Our grid prioritizes responsive flexibility while maintaining rigid structural integrity for complex government forms and dense bilingual data displays.
4px அடிப்படை அலகுடன் கூடிய 12-நெடுவரிசை திரவ கட்டகம். அரசு படிவங்கள் மற்றும் இருமொழி தரவுகளை துல்லியமாக கையாள வடிவமைக்கப்பட்டுள்ளது.
The 12-Column Grid
At desktop resolutions (`lg` and above), we use a 12-column grid. This scales down to 8 columns on tablets (`md`) and 4 columns on mobile (`sm`). Gutters scale dynamically from 16px to 32px based on the viewport.
Responsive Breakpoints
TamilDS follows a mobile-first approach. Classes un-prefixed (e.g., `grid-cols-1`) target mobile, while prefixed classes (e.g., `md:grid-cols-3`) target wider screens.
sm640px416pxMobile landscape, small tabletsmd768px824pxTablets, small laptopslg1024px1232pxDesktop — sidebar appearsxl1280px1232pxWide desktop2xl1536px12autoUltra-wide, max-width containersLayout Strategies
1. Max-Width Containers
We use specific max-widths to prevent content from stretching endlessly on ultra-wide monitors, which ruins readability.
max-w-screen-xl(1280px): Standard dashboard boundaries.max-w-screen-2xl(1536px): Full-bleed shell layouts requiring a sidebar.max-w-2xl(672px): Form layouts, single-column reading environments, and authentication pages.
2. Asymmetric Form Grids
Do not blindly divide forms into equal columns. Form inputs should be sized according to their expected content.
Tamil Typographic Constraints
max-w-2xl or max-w-3xl at standard body text sizes.Use max-w-2xl or max-w-3xl for long form Tamil reading to prevent severe eye fatigue and line-tracking errors.
Reading a full-width paragraph of dense Tamil script on a 1920px monitor breaks visual tracking and cognitive focus.