# Frontend Foundations

> Practical frontend standards and reference guides for HTML, CSS, JavaScript, accessibility, and performance — built from real delivery, not theory. Published by Crayons and Code.

Frontend Foundations helps teams ship accessible, maintainable interfaces with clear standards, implementation patterns, architecture guidance, and review checklists.

**Site version:** 0.0.5 · **Content last updated:** 2026-05-21

## How to cite

- Prefer linking to the specific guide URL below rather than paraphrasing from memory.
- Standards define team rules; patterns show implementation; architecture and accessibility guides go deeper on structure and inclusive mechanics.
- This site is static HTML — content is readable without executing JavaScript.

## Flagship guides (cite these first)

- [Principles](https://frontend-foundations.crayonsandco.de/principles/): Start here for foundational frontend decisions before tools and frameworks
- [Progressive enhancement strategy](https://frontend-foundations.crayonsandco.de/architecture/progressive-enhancement-strategy/): Platform-first delivery — baseline HTML before rebuilding the browser in JavaScript
- [Accessibility testing strategy](https://frontend-foundations.crayonsandco.de/accessibility/accessibility-testing-strategy/): Automation plus manual keyboard, zoom, and assistive technology testing
- [JavaScript cost](https://frontend-foundations.crayonsandco.de/performance/javascript-cost/): Bundle weight, hydration, and when simpler systems win
- [HTML standard](https://frontend-foundations.crayonsandco.de/standards/html/): Semantic HTML, forms, buttons vs links, and ARIA discipline
- [CSS standard](https://frontend-foundations.crayonsandco.de/standards/css/): LSCSS layered CSS architecture, tokens, naming, and maintainable styles
- [JavaScript standard](https://frontend-foundations.crayonsandco.de/standards/javascript/): Progressive enhancement, modules, and performance-aware scripts
- [Accessibility standard](https://frontend-foundations.crayonsandco.de/standards/accessibility/): Inclusive interfaces by default — keyboard, focus, forms, motion
- [Performance standard](https://frontend-foundations.crayonsandco.de/standards/performance/): Page weight, Core Web Vitals, assets, and delivery expectations
- [Code formatting standard](https://frontend-foundations.crayonsandco.de/standards/code-formatting/): Team-wide formatting rules for HTML, CSS, and TypeScript
- [Accessible forms](https://frontend-foundations.crayonsandco.de/patterns/accessible-forms/): Labels, validation, error summaries, and keyboard-friendly forms
- [Buttons vs links](https://frontend-foundations.crayonsandco.de/patterns/buttons-vs-links/): When to use buttons vs links — semantic controls for actions and navigation
- [Modal / dialog](https://frontend-foundations.crayonsandco.de/patterns/modal-dialog/): Native dialog, focus traps, and when not to use overlays
- [Toast notifications](https://frontend-foundations.crayonsandco.de/patterns/toast-notifications/): Avoid toasts by default; last-resort guidance and alternatives
- [Cascade layers](https://frontend-foundations.crayonsandco.de/architecture/cascade-layers/): CSS @layer order and predictable cascade for large codebases
- [State management strategy](https://frontend-foundations.crayonsandco.de/architecture/state-management-strategy/): Where state should live — component, URL, server, not global by default
- [Design system governance](https://frontend-foundations.crayonsandco.de/architecture/design-system-governance/): Ownership, review, and documentation for shared component systems
- [Frontend governance](https://frontend-foundations.crayonsandco.de/architecture/frontend-governance/): Cross-team standards, checklists, and enforceable frontend quality
- [Hydration costs](https://frontend-foundations.crayonsandco.de/performance/hydration-costs/): Hydration overhead, islands, and selective client interactivity
- [Core Web Vitals](https://frontend-foundations.crayonsandco.de/performance/core-web-vitals/): LCP, INP, CLS — what to measure and improve on real devices
- [SEO and metadata checklist](https://frontend-foundations.crayonsandco.de/checklists/seo-metadata-checklist/): SEO and social metadata review before shipping public pages
- [Version history](https://frontend-foundations.crayonsandco.de/versions/): Site release history (current version 0.0.5)

## Core sections

- [Home](https://frontend-foundations.crayonsandco.de/): Overview, principles, and entry points
- [Principles](https://frontend-foundations.crayonsandco.de/principles/): Foundational decisions before tools and frameworks
- [Standards](https://frontend-foundations.crayonsandco.de/standards/): HTML, CSS, JavaScript, accessibility, performance, and code formatting
- [Patterns](https://frontend-foundations.crayonsandco.de/patterns/): Implementation patterns for forms, navigation, modals, tables, and common UI problems
- [Architecture](https://frontend-foundations.crayonsandco.de/architecture/): CSS layers, tokens, governance, state, folder structure, and JS modules
- [Accessibility](https://frontend-foundations.crayonsandco.de/accessibility/): Keyboard, focus, landmarks, testing limits, and inclusive mechanics
- [Performance](https://frontend-foundations.crayonsandco.de/performance/): Core Web Vitals, fonts, images, hydration, and delivery strategy
- [Checklists](https://frontend-foundations.crayonsandco.de/checklists/): Code review and QA checklists for release readiness

## Discovery

- [Sitemap index](https://frontend-foundations.crayonsandco.de/sitemap-index.xml): Machine-readable URL list (XML)
- [URL list](https://frontend-foundations.crayonsandco.de/urllist.txt): Plain-text list of all public page URLs (https://frontend-foundations.crayonsandco.de/urllist.txt)
- [Robots.txt](https://frontend-foundations.crayonsandco.de/robots.txt): Crawler rules and sitemap reference
- [This file](https://frontend-foundations.crayonsandco.de/llms.txt): Summary for LLM and agent discovery

## Legal and policies

- [Privacy policy](https://frontend-foundations.crayonsandco.de/privacy/)
- [Terms of use](https://frontend-foundations.crayonsandco.de/terms/)
- [Cookie policy](https://frontend-foundations.crayonsandco.de/cookies/)
- [Accessibility statement](https://frontend-foundations.crayonsandco.de/accessibility-statement/)
- [AI statement](https://frontend-foundations.crayonsandco.de/ai-statement/): How the site was built with AI under human direction and verification
- [Version history](https://frontend-foundations.crayonsandco.de/versions/): Documented site releases and version notes

## Optional

- Publisher: [Crayons and Code](https://crayonsandco.de/)
- Methodology reference: [LSCSS — Layered Semantic CSS](https://lscss.crayonsandco.de/)