https://github.com/beno5950/14kb-web/releases

A comprehensive monorepo designed to help you build ultra‑fast websites. Each page stays under 14KB while delivering great visuals, solid accessibility, and zero framework dependencies. The project emphasizes performance, clean UI, and a lightweight footprint that scales from mobile to desktop without wasting space.

Table of contents

• Why 14KB per page
• What this monorepo covers
• How to get started
• Architecture and design principles
• Packages and workspace layout
• Build, test, and release workflow
• Accessibility and UX practices
• Performance budgets and testing
• Development and contribution
• Roadmap and future work
• Community and help
• License and credits

Why 14KB per page This project centers on a core idea: speed. A page that weighs 14KB or less loads faster on slow networks, consumes less energy on mobile devices, and reduces data usage for users on constrained connections. The approach is pragmatic, not dogmatic. You get meaningful features without the burden of heavy frameworks. The 14KB goal guides decisions about assets, tooling, and architecture. It keeps the focus on the essentials: fast parsing, small payloads, crisp visuals, and smooth interactions.

Key benefits

• Faster initial load for users on 3G or flaky networks
• Lower data usage per page view
• Easier to reason about and optimize
• Simple, predictable performance budgets
• Better accessibility and progressive enhancement

What this monorepo covers This repository brings together multiple tightly related packages that together form a minimal, high‑efficiency web stack. It embraces modern CSS, vanilla JavaScript, and careful dependency management to avoid bloat. The work is organized to help you reuse common primitives while keeping page sizes small. The core ideas are:

• Zero framework dependencies
• Progressive enhancement by default
• Mobile‑first design and responsive UI
• Accessibility as a first‑class concern
• Efficient build and bundle steps

The topics around this project include accessibility, css, esbuild, fast-loading, fastify, javascipt, lightweight, minimal, mobile-first, modern-css, monorepo, nodejs, performance, pnpm-workspaces, progressive-enhancement, responsive-design, sqlite, vanilla-javascript, web-performance, zero-dependency. These guide the structure and decisions across packages.

How to get started This section helps you bring the project into a working state on your machine. It assumes a clean environment with Node.js installed. If you run into issues, the project’s releases page is the best source of prebuilt artifacts and known-good configurations.

Prerequisites

• Node.js (LTS recommended)
• PNPM as the workspace manager
• Git for cloning and version control
• A code editor with good JavaScript and CSS support

Initial setup

• Clone the repository
  • git clone https://github.com/beno5950/14kb-web.git
• Navigate to the repository
  • cd 14kb-web
• Install dependencies for all workspaces
  • pnpm install
• Bootstrap the monorepo (if you have a bootstrap script)
  • pnpm -w run bootstrap
• Build a local development version
  • pnpm -w run build
• Start the development server
  • pnpm -w run dev

Project structure and workspace layout This monorepo organizes code into a set of packages that share common tooling while keeping page‑level code lean. The layout is designed to be approachable, even if you are new to monorepos:

• apps/ – projects that can be deployed or run as standalone demos
• packages/ – shared libraries and building blocks
  • ui/ – UI primitives, components, and styles
  • core/ – the minimal runtime, utilities, and helpers
  • data/ – tiny data helpers, sqlite integration, storage shims
  • server/ – lightweight server scaffolding (e.g., a minimal Fastify setup)
  • tooling/ – esbuild configurations, scripts, and workflow helpers
• tests/ – test suites and test utilities
• docs/ – extended docs, guides, and reference material

Core design principles

• Minimalism with purpose: Every line of code earns its keep.
• Predictable performance: Build with a strict performance budget and measure against Core Web Vitals.
• Accessibility first: Semantic HTML, proper ARIA attributes, and keyboard navigability.
• Progressive enhancement: Baseline features work with no JavaScript; enhancements improve UX but do not break core functionality.
• Responsiveness: Design scales gracefully from small screens to large displays.
• Zero framework dependencies: Rely on the browser and small, well‑chosen libraries only when necessary.

Packages and what they do ui

• A small, carefully designed set of UI primitives: buttons, inputs, cards, and layout helpers.
• Focus on accessibility, keyboard navigability, focus management, and contrast.
• CSS is modular and mobile‑first, with a modern token system.

core

• Lightweight runtime, utilities, and abstractions used by UI and apps.
• Small utility functions, type-safe helpers, and safe defaults.

data

• Tiny data helpers and a minimal interface to store small, local data.
• SQLite bindings are included for lightweight local storage when needed.

server

• A micro web server skeleton using Fastify, designed to be fast, simple, and extensible.
• Middleware for common tasks like health checks, CORS, and logging.

tooling

• Esbuild configurations and build scripts.
• Workspace automation to speed up local development.

Getting hands-on with a page Follow these steps to build and render a tiny page that undercuts 14KB:

1. Create a minimal HTML shell that loads CSS and a small JS bundle.
2. Use semantic tags: header, nav, main, section, article, footer.
3. Include accessible color contrast and scalable typography.
4. Add progressive enhancements: an optional JS module that improves interactions but remains non-blocking.
5. Use CSS variables and tokens to support theming with a small footprint.
6. Optimize images with responsive sizes and modern formats (AVIF/WEBP when possible).

Performance budgets and goals

• JavaScript: aim for a small, single‑purpose script; avoid large frameworks and polyfills unless strictly needed.
• CSS: use a small, modular set of styles; rely on CSS to handle most layout concerns.
• Images: keep images optimally sized; use modern formats and lazy loading where appropriate.
• Network: keep total payload per page under 14KB for critical render path; consider lazy loading for non-critical assets.
• CPU and memory: minimize heavy computations on the client; offload heavy tasks to the server when possible.

Accessibility guidelines applied

• Semantic HTML5 elements: header, main, nav, main, footer.
• Clear focus states and visible focus outlines.
• ARIA roles only where necessary, with a preference for native semantics.
• Alt text for images, meaningful label associations for form controls.
• Keyboard support for all interactive controls, including components in the UI package.

Performance measurement and testing

• Lighthouse and Core Web Vitals scoring are used to guide optimizations.
• Bundle analysis with esbuild to minimize dead code.
• Visual regression checks to ensure UI remains consistent as you evolve components.
• Automated accessibility checks during the build and test steps.
• Regular small benchmarks to confirm pages stay within the 14KB target.

Development workflow

• Use the PNPM workspace to isolate changes to specific packages.
• Run unit tests for individual packages and integration tests for core flows.
• Use esbuild for fast bundling during development.
• Run linting and formatting to maintain a clean codebase.

Example commands

• pnpm i
• pnpm -w run lint
• pnpm -w run test
• pnpm -w run build
• pnpm -w run dev

Quality assurance

• Ensure that features degrade gracefully on slower devices.
• Validate features with assistive technologies and keyboard testing.
• Confirm that CSS remains accessible when reduced to a basic layout.
• Verify that page payload remains small on the critical view.

Design tokens and theming

• Variables drive typography, spacing, color, and component tokens.
• A light theme covers most use cases; a dark theme is supported as an optional enhancement.
• Tokens connect design decisions to CSS output, ensuring consistency and a small footprint.

Security and privacy considerations

• Keep dependencies minimal to reduce the attack surface.
• Use secure defaults and avoid leaking sensitive data in client-side code.
• Validate and sanitize inputs on the server, even for simple endpoints.
• Be mindful of third‑party scripts and their impact on performance and privacy.

Monorepo governance

• Keep changes small and well-scoped to reduce risk.
• Write tests that cover core behaviors across packages.
• Document any breaking changes in the changelog and follow semantic versioning.
• Coordinate releases to maintain consistency across apps and packages.

Build, test, and release workflow

• Each package has its own build script and tests, but the monorepo offers a unified flow.
• Local development uses fast incremental builds via esbuild.
• CI pipelines run linting, tests, and minimal builds on commit or pull request.
• Releases bundle core assets and provide a ready-to-run artifact for users.
• The official releases page is the source of truth for build artifacts and installers. For the latest releases, visit https://github.com/beno5950/14kb-web/releases.

Where to get the latest releases

• The project publishes artifacts to a releases hub. You can download the latest release artifact directly from the releases page to bootstrap your environment or try a ready‑made sample.
• Visit the releases hub for binaries, installers, and example builds that demonstrate the 14KB per page constraint in practice. The link is the primary source of release artifacts and notes: https://github.com/beno5950/14kb-web/releases

Note: The releases page is a living resource. It contains the most current artifacts and notes about how to bootstrap or trial the project. If you are looking for specific files or example pages, this is the place to check. Additionally, the repository’s topics reflect the scope and direction of the project and can guide you to build things that fit the 14KB per page target.

Contributing

• We welcome contributors who want to improve performance, accessibility, or the developer experience.
• Start with small changes: fix a bug, improve a test, or add a minor enhancement.
• Align with the project’s minimal footprint and no‑framework stance unless a small, well‑justified dependency adds significant value.
• Follow the code style used across the monorepo and add tests where appropriate.
• Write clear, concise commit messages and keep pull requests focused.
• Engage with the maintainers in issues and discussions to align on goals and priorities.

Code style and conventions

• Prefer simple, readable code over clever tricks.
• Use plain JavaScript or TypeScript where it helps clarity and reliability.
• CSS uses a token-driven approach to minimize repetition and ensure consistent design.
• Avoid heavy abstractions that add size without meaningful benefits.

Changelog and release notes

• Each release includes notes about what changed, what broke, and how to upgrade.
• Use semantic versioning to communicate the impact of changes.
• Keep user-facing changes small and predictable to avoid surprising builders or end users.

Documentation and learning resources

• In-depth guides explain design decisions, performance strategies, and accessibility considerations.
• Quick-start guides help new users bootstrap a page quickly.
• API references describe the primitives and utilities available in the ui and core packages.
• Tutorial examples show how to compose a small site with the 14KB per page constraint in mind.

Design considerations for real-world pages

• Layouts: responsive grids and flexible card systems that adapt to screen size without bloating markup.
• Typography: scalable type scales that stay readable on small devices while looking crisp on desktops.
• Color and contrast: accessible palettes that work with light and dark themes and high-contrast modes.
• Assets: small SVGs and icons that render crisply at any size; consider inline SVGs when practical.
• Interactions: lightweight event handling for common UI patterns; avoid heavy animation that hurts performance.

Accessibility resources and testing

• The approach emphasizes semantic markup and keyboard support.
• ARIA roles are used only where native semantics fall short.
• Focus management ensures that modals, menus, and dynamic sections remain usable with a keyboard.
• Color contrast and readable typography are a priority.
• Regular audits help catch issues early in development and ensure long-term compliance.

Future roadmap and long-term goals

• Further reductions in page weight through smarter code-splitting and runtime optimizations.
• Expanded examples and templates for common site types (blogs, portfolios, dashboards) that stay under the 14KB target.
• Enhanced developer tooling for faster iteration in the monorepo.
• More robust accessibility patterns and automated checks integrated into CI.

Community and support

• The project invites feedback and collaboration from developers who care about speed and simplicity.
• Use issues to discuss bugs, enhancements, and design questions.
• Engage with design and performance enthusiasts who share a passion for minimal, fast web experiences.

License and attribution

• The project is licensed under MIT. This allows broad use in open and commercial projects with minimal restrictions.
• Attribution is straightforward: credit the project when you use it as a starting point or integrate its ideas into your own projects.

Acknowledgments

• Special thanks to contributors who helped refine the monorepo’s structure, performance model, and accessibility practices.
• The community’s ongoing feedback shapes how we balance minimalism with usability.

Releases and artifacts

• The project maintains a releases page that hosts build artifacts and example deployments. For the latest releases, visit the releases hub: https://github.com/beno5950/14kb-web/releases
• If you need to bootstrap or test a specific build, the artifacts provided there are designed to illustrate the 14KB per page constraint in practice.

Footer

• 14KB Web is a collaborative effort to prove that fast, accessible, and modern websites can be built without heavy dependencies.
• The monorepo approach helps teams share primitives, reduce duplication, and keep projects lean.
• By focusing on core principles and practical patterns, you can create fast experiences that work well for a wide range of users and devices.

Note about the release link

• The releases page is the primary place to find the latest artifacts and notes for the project. For quick access, revisit the link: https://github.com/beno5950/14kb-web/releases

End of README content.