Overview

Introduction

Welcome to DevDocs — a minimal, dark-mode documentation template built on Bootstrap 5.3. It features Scrollspy tied to a vertical, multilevel collapsible sidebar, so readers always know exactly where they are.

Scroll down or click any sidebar link to navigate. Active states update automatically using Bootstrap's Scrollspy plugin as you scroll through the content.

Sidebar Nav

Collapsible multi-level menu with L1, L2, and L3 nesting.

Scrollspy

Active link updates automatically as you scroll through sections.

Dark Theme

Cohesive dark palette with sharp accent colors and refined typography.

Installation

Requirements

Before installing, ensure your environment meets the following requirements:

Node.js ≥ 18 npm ≥ 9 Bootstrap 5.3 Modern Browser

The template has no build step required when using CDN. For a custom build with tree-shaking, a bundler like Vite or Webpack is recommended.

NPM

Install Bootstrap via npm to use it in your build pipeline or import only what you need.

# Install Bootstrap and Icons npm install bootstrap@5.3 bootstrap-icons # Import in your entry file import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap';

CDN

The quickest way to get started is via the jsDelivr CDN. Drop these tags into your <head> and before </body>.

<!-- CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- JS (before </body>) --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

SRI / Integrity

For production, add Subresource Integrity (SRI) hashes to prevent CDN tampering. Bootstrap's official download page provides pre-computed hashes for every release.

Custom Builds

Import only the Bootstrap modules you need. This can dramatically reduce bundle size in larger applications.

Core Concepts

Architecture

The application is structured around a simple three-layer model: presentation, logic, and data. Each layer is independently testable and replaceable.

Routing is handled client-side with the History API, keeping the server stateless and the UI fast. State management follows a unidirectional data flow pattern.

Layout

The layout system is based on Bootstrap's 12-column flexbox grid, extended with CSS custom properties for spacing tokens. Responsive breakpoints remain unchanged from Bootstrap defaults.

Forms

All form components are fully accessible (WCAG 2.1 AA). They support native browser validation and a custom validation layer via JavaScript.

Inputs

Text, number, email, password and textarea inputs share a unified style. Focus rings are customizable via CSS variables.

Select

Native <select> elements are styled to match the rest of the form suite. Multi-select support is available via the optional Select2 integration.

Validation

Client-side validation uses the Constraint Validation API. Error messages are displayed inline beneath each field and are announced to screen readers via aria-live.

Modals

Modals are built on Bootstrap's Modal component with extra focus management and scroll-lock improvements. They support nested modals via a z-index stacking utility.

Tables

Data tables include sortable column headers, row selection, pagination, and an optional inline-edit mode. Large datasets use virtual scrolling for performance.

Advanced

REST Endpoints

All API endpoints follow REST conventions and return JSON. Base URL: https://api.example.com/v1

GET /users → List all users POST /users → Create user GET /users/:id → Get user by ID PATCH /users/:id → Update user DELETE /users/:id → Delete user

Authentication

All endpoints require a Bearer token in the Authorization header. Tokens are issued via the POST /auth/token endpoint and expire after 24 hours.

Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5...

Error Codes

The API uses standard HTTP status codes. Errors include a machine-readable code and a human-readable message.

400 Bad Request 401 Unauthorized 404 Not Found 500 Server Error
History

Changelog

v2.1.0 — Added multilevel sidebar, Scrollspy integration, dark theme tokens.

v2.0.0 — Migrated to Bootstrap 5.3. Dropped jQuery dependency.

v1.4.2 — Accessibility fixes. SRI hashes updated.