source.css

A dark-themed CSS component library with buttons, text styles, code blocks, and syntax highlighting. Built with SCSS and the SF Mono typeface.

Preview

Install

npm install source.css

Usage

CSS (recommended)

Import the compiled CSS in your HTML:

<link rel="stylesheet" href="node_modules/source.css/dist/source.css">

Or the minified version:

<link rel="stylesheet" href="node_modules/source.css/dist/source.min.css">

SCSS

Import the SCSS source directly for full variable access:

@import 'source.css/scss/source';

Bundler (Webpack, Vite, etc.)

import 'source.css/dist/source.css';

Components

Buttons

Base button plus six variants:

<button>Default</button>
<button class="button-primary">Primary</button>
<button class="button-secondary">Secondary</button>
<button class="button-tertiary">Tertiary</button>
<button class="button-danger">Danger</button>
<button class="button-warning">Warning</button>
<button class="button-success">Success</button>

Wrap buttons in a responsive grid:

<div class="button-container">
    <button class="button-primary">Save</button>
    <button class="button-danger">Delete</button>
</div>

Text

Anchors

<a href="#">Default</a>
<a href="#" class="anchor-primary">Primary</a>
<a href="#" class="anchor-secondary">Secondary</a>
<a href="#" class="anchor-tertiary">Tertiary</a>

Blockquotes

<blockquote>
    "A nicely styled blockquote."
    <footer>
        Someone famous in <cite title="Source">Source Title</cite>
    </footer>
</blockquote>

Font sizes

<p class="font-size-1">13px — compact</p>
<p class="font-size-2">16px — default</p>
<p class="font-size-3">18px — large</p>

Code Blocks

Code blocks with an optional macOS-style top bar, collapsible toggle, filename display, and copy button. Pairs with highlight.js for syntax coloring.

<!-- Minimal code block -->
<div class="code-block">
    <pre class="code-block-body">
        <code class="language-js">console.log('hello');</code>
    </pre>
</div>

<!-- Full code block with top bar, filename, and copy button -->
<div class="code-block collapsable" id="my-block">
    <div class="top-bar">
        <div class="top-bar-element clickable" onclick="toggleCodeBlock('my-block')">
            <!-- traffic-light SVG dots -->
        </div>
        <div class="top-bar-element">
            <div>app.js</div>
        </div>
        <div class="top-bar-element">
            <button class="copy-button" onclick="copyToClipboard('my-code')">Copy</button>
        </div>
    </div>
    <pre class="code-block-body">
        <code class="language-js" id="my-code">console.log('hello');</code>
    </pre>
</div>

JavaScript helpers

source.css ships a small index.js with two utility functions for the code block UI:

// Copy a code block's text to clipboard
copyToClipboard('element-id');

// Toggle collapsed/expanded state
toggleCodeBlock('block-id');

Fonts

source.css bundles SF Mono in all six weights (Light, Regular, Medium, Semibold, Bold, Heavy) with italic variants. The font is loaded automatically when you include the CSS.

Customization

Import the SCSS source and override variables before the import:

$bg-body: #1e1e1e;
$color-primary: #61afef;
@import 'source.css/scss/source';

See scss/_variables.scss for the full list of customizable variables.

Development

# Install dependencies
npm install

# Build CSS
npm run build

# Watch for changes
npm run watch

License

MIT — xige