Frontend Foundations is a practical frontend reference for teams who want repeatable quality - not more opinions dressed up as best practice. The headline on the site is direct: quality by default. Read it on frontend-foundations.crayonsandco.de.
Teams rarely struggle because they lack a framework. They struggle when nobody agrees what good frontend looks like. That shows up as inconsistent code, accessibility gaps, performance regressions, and systems people avoid maintaining.
Frontend Foundations turns years of delivery experience into standards people can use in review, onboarding, and release - principles first, then reference material you can link in a pull request.
How the site is organised
Everything lives on frontend-foundations.crayonsandco.de. The navigation groups material into seven areas, which is a useful mental map before you dive in:
- Principles - platform-first delivery, native HTML and behaviour, accessibility built in, performance as quality, clarity over cleverness.
- Standards - HTML, CSS, JavaScript, accessibility, and performance baselines teams can cite consistently.
- Accessibility - topic guides on live regions, keyboard navigation, focus traps, screen reader announcements, and related mechanics.
- Performance - Core Web Vitals, fonts, hydration, images, JavaScript cost, third-party risk, and delivery strategy.
- Architecture - cascade layers, container queries, design tokens, module structure, and CMS modelling.
- Patterns - implementation examples for buttons vs links, accessible forms, modals, navigation, tables, tabs, and everyday UI problems.
- Checklists - code review, QA, security, SEO, release readiness, browser support, and technical debt.
A sensible “start here” path
The homepage suggests starting with principles, then standards. If you are rolling this out in a team, the new adoption guide is a practical companion:
- Principles - agree what “good” means before you argue about tools.
- Standards - shared rules for HTML, CSS, JavaScript, accessibility, and performance.
- Architecture - layers, tokens, module structure, and how to improve legacy systems without rewrite theatre.
From there, use patterns for repeated UI problems and checklists at the PR and release gate so quality stays repeatable.
Related reading on this site
For CSS architecture that stays calm under pressure, see LSCSS: Layered Semantic CSS and lscss.crayonsandco.de.
For broader habits around naming, structure, and maintainability, see CSS and JavaScript: keeping code maintainable.
The reference site is maintained as the canonical detail; use frontend-foundations.crayonsandco.de for standards, patterns, topic guides, and checklists.