# Layout Examples & Best Practices ## Standard App Layout ```html

``` ## Layout with Metasidebar ```html

``` ## Splitview Layout ```html

``` ## Chat Layout ```html

Chat

``` --- ## Best Practices ### Layout Structure - Use semantic HTML5 elements - Apply layout classes: `header`, `sidebar`, `main-content`, `actionbar` - Choose the correct portal variant (`tester`, `customer`, `manager`) ### Components - Use semantic button types (`btn-primary`, `btn-success`, `btn-danger`) - Apply consistent spacing with the spacing scale (`mt-xs`, `mb-sm`, `p-md`, etc.) - Use `.form-grid` for form layouts with `.form-group` wrappers ### Icons - Add `mr-icon-spacing` for icons that precede text - Match icon color with surrounding text (inherited) - Choose appropriate icon size for context ### Accessibility - Include ARIA labels where needed - Use `` with `for` attributes on all form fields - Maintain proper heading hierarchy - Add `alt` text to images ### Responsive - Use Bootstrap grid: `col-12 col-md-6 col-lg-4` - Mobile-first approach --- ## Portal-Specific Guidelines | Portal | Theme | Focus | |--------|-------|-------| | **Tester** (`header tester`, `sidebar tester`) | Purple accents, dark nav | Profile, earnings, statistics | | **Customer** (`header customer`) | Teal/dark | Product, test management | | **Manager** (`header manager`) | Light theme | Admin, team, project management |