Custom styling

Learn how to use custom styling in ctrl-alt-doc.

ctrl alt doc exposes its styling through CSS variables and component classes. Add your overrides to custom.css to change the appearance of your documentation without modifying the framework.

Use ctrl alt doc's layout tokens for broad changes across the site.

css

:root {
	--content-width: 760px;
	--sidebar-width: 260px;
	--toc-width: 220px;
	--header-height: 64px;

	--code-background: #1a1a1a;

	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 12px;

	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.18);
	--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.4);
}

ctrl alt doc also uses shared typography and theme variables such as --font-sans, --font-mono, --accent, --text, and --text-muted.

For example:

css

:root {
	--font-sans: 'Inter', system-ui, sans-serif;
	--font-mono: 'JetBrains Mono', monospace;
}

Use these selectors to customise the main document content.

css

.document {
}
.document-header {
}
.document .eyebrow {
}
.document h1 {
}
.document .lead {
}

.content {
}
.content h2 {
}
.content h3 {
}
.content p {
}
.content a {
}
.content ul {
}
.content ol {
}
.content blockquote {
}
.content table {
}
.content img {
}
.content details {
}
.content kbd {
}

For example:

css

.content h2 {
	font-size: 1.8rem;
}

.content a {
	text-decoration-thickness: 2px;
}

ctrl alt doc's documentation components can be styled directly from custom.css.

css

.code-block {
}
.copy-code {
}

.tabs {
}
.tabs-list {
}
.tabs-list [data-tab-trigger] {
}

.callout {
}
.callout-title {
}
.callout-content {
}

.steps {
}

.cards {
}
.card {
}

.downloads {
}
.download {
}

.file-tree {
}

.sidebar-badge {
}
.badge-new {
}
.badge-updated {
}
.badge-beta {
}

For example:

css

.callout {
	border-radius: 10px;
}

.tabs-list {
	border-radius: 12px;
}

.card {
	box-shadow: none;
}

Use these selectors to customise the header, sidebar, table of contents, breadcrumbs, pagination, and footer.

css

.site-header {
}
.brand {
}
.social-links {
}

.sidebar-category {
}
.sidebar-toggle {
}
.sidebar-badge {
}

.toc {
}
.toc-nav {
}
.toc-nav a {
}

.breadcrumbs {
}

.pagination {
}
.pagination-link {
}

.site-footer {
}

For example:

css

.site-header {
	backdrop-filter: none;
}

.toc-nav a.active {
	font-weight: 600;
}

Interactive interface elements can also be customised.

css

.search-trigger {
}
.overlay {
}
.dialog {
}
.input-wrapper {
}
.results {
}
.result {
}
.result-title {
}
.result-description {
}

.theme-toggle {
}
.sidebar-menu {
}

For example:

css

.search-trigger {
	width: 320px;
}

.dialog {
	border-radius: 16px;
}

Writing overrides #

Prefer CSS variables for broad visual changes and component selectors for targeted changes.

Your custom.css is loaded after CAD's framework styles, so you normally only need to override the properties you want to change.

css

.card {
	border-radius: 16px;
}

.callout {
	background: var(--gray-3);
}

.document {
	width: min(100%, 820px);
}

You do not need to copy the complete original ctrl alt doc rule into custom.css.

More specific customisation #

ctrl alt doc exposes additional classes for internal component elements, states, and responsive behaviour. If you need to customise something more specific, inspect the element in your browser to find its class and override only the properties you need.

Where possible, prefer ctrl alt doc's CSS variables and top-level component classes. These are less coupled to the framework's internal markup and make your customisations easier to maintain.