🚀 Introduction

shy.css is a minimal CSS library designed for tech-focused websites. It uses the JetBrains Mono font to create a clean, modern look that enhances readability and accessibility.

📦 Features

Monospace-first design with JetBrains Mono
Compatible with all modern browsers
Responsive grid system
Dark and light mode support
Code styling for dev-focused sites
Fast and simple
Compatible with highlight.js

⚙️ Installation

Paste this in your HTML <head>:

<link href="https://cdn.jsdelivr.net/gh/4k1k01/shy.css@main/css/shy.min.css" rel="stylesheet">

📝 Usage

Use semantic elements and utility classes:

<div class="container">...</div>
<p class="text-center">Centered text</p>
<div class="grid">
  <div class="col">Column 1</div>
  <div class="col">Column 2</div>
</div>
<pre><code>&lt;h1&gt;Hello world!&lt;/h1&gt;</code></pre>

📄 Available Classes

.container – Responsive layout container with padding and max-width breakpoints
.text-center – Center-aligns text content
.grid – Flex container with responsive wrapping and gap support
.col – Fluid column element; use with .col-* classes for sizing
.sidebar – Sticky vertical navigation panel with fixed positioning and scroll support
h1, h2, p – Typography styled for readability and scale
code, pre – Inline and block code styled with syntax-friendly visuals
.btn – Minimal badge-like button for links and actions

`.text-center` & Typography

Centers text and uses heading/paragraph styles for readable layouts.

Centered Heading

This is a paragraph centered using .text-center.

<div class="text-center">
  <h1>Centered Heading</h1>
  <p>This is a paragraph centered using<code>.text-center</code>.</p>
</div>

`code` & `pre`

Displays inline code and preformatted blocks with styled appearance.

Use <code> for inline code like console.log().

<pre>
  <code>
    const greet = () =&gt; console.log('Hi!');
  </code>
</pre>

`.container`

Wraps page content and keeps it centered with responsive padding and max-width breakpoints.

<div class="container">...</div>

`.grid`, `.col` and `.gap`

The .grid class creates a flex container with wrapping and optional spacing.
Use .col or .col-* classes to define responsive columns.
You can also apply .gap-1 to .gap-5 to control spacing.

Column 1 Column 2

<div class="grid gap-5">
  <div class="col-4">Column 1</div>
  <div class="col">Column 2</div>
</div>

.col-* classes divide the container into 12 columns:

.col = full width
.col-4 = 33.33%
.col-3 = 25%

.gap-* classes control spacing:

.gap-1 = 4px
.gap-2 = 8px
.gap-3 = 16px
.gap-4 = 24px
.gap-5 = 32px

`.sidebar`

A fixed vertical sidebar that stays visible during scroll.

Sidebar Example

This is a sidebar that remains fixed while you scroll the main content.

Use it for navigation or additional information.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis velit sed fermentum dignissim. Suspendisse at fermentum purus. Suspendisse potenti. Proin orci odio, dignissim id diam nec, bibendum dapibus dui. Suspendisse lacinia dictum nibh eget aliquet. Cras sollicitudin tincidunt luctus. Cras maximus dolor at felis porttitor, eu vehicula magna pellentesque. Ut posuere massa sed orci aliquam, quis congue lorem volutpat. Praesent pellentesque metus fermentum massa cursus pharetra. Phasellus auctor felis hendrerit mauris ultricies rutrum. Donec finibus est in convallis pretium.

<div class="grid">
    <div class="col sidebar">
       <a href="index.html" style="text-decoration: none; color: var(--color-text)">
        <h2>📦SIDEBAR</h2>
       </a>
       <a href="#">🏠 Home</a>
       <a href="#">🖐️ About</a>
       <a href="#">⚙️ Services</a>
       <a href="#">📲 Contact</a>
    </div>
    <div class="col">
      <h2>Sidebar Example</h2>
      <p>This is a sidebar that remains fixed while you scroll the main content.</p>
      <p>Use it for navigation or additional information.</p>
      <p>...</p>
    </div>
</div>

`.btn`

Minimal styled button for links and actions.

Click me

<a href="#" class="btn">Click me</a>

🌙 Dark Mode Support

shy.css supports system dark mode automatically using the following media query:

@media (prefers-color-scheme: dark) {
    :root {
      --color-bg: #1a1a1a;
      --color-text: #f5f5f5;
      --color-code-bg: #2d2d2d;
      --color-border: #444;

      /* Highlight.js Theme Colors (Dark Mode) */
      --hl-comment: #999;
      --hl-punctuation: #ccc;
      --hl-tag: #ff6b6b;
      --hl-keyword: #ffa07a;
      --hl-string: #9fdf9f;
      --hl-number: #d49c6b;
      --hl-meta: #57a;
      --hl-meta-string: #6af;
    }
}

This code tells the browser to apply a dark color theme if the user's device is in dark mode. It changes key variables:

--color-bg – background color
--color-text – text color
--color-code-bg – code block background
--color-border – border color
--hl-* – syntax highlighting colors for code blocks

Because shy.css uses CSS variables, these updates apply automatically throughout the site. No need to add a dark mode toggle—just follow system preferences.

🛠 Customizing Colors

Since shy.css is loaded as an external stylesheet, you can override its color variables in your own CSS file or inside a <style> tag after importing shy.css.

<head>
  ...
  <link href="https://cdn.jsdelivr.net/gh/4k1k01/shy.css@main/css/shy.min.css" rel="stylesheet">
  <style>
    :root {
      --color-bg: #fef6e4;
      --color-text: #001858;
      --color-code-bg: #f3d2c1;
      --color-border: #8bd3dd;

      /* Highlight.js Theme Colors (Light Mode) */
      --hl-comment: #697070;
      --hl-punctuation: #6a737d;
      --hl-tag: #d73a49;
      --hl-keyword: #d73a49;
      --hl-string: #50a14f;
      --hl-number: #b76b3e;
      --hl-meta: #1f7199;
      --hl-meta-string: #0033aa;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --color-bg: #001858;
        --color-text: #fef6e4;
        --color-code-bg: #172c66;
        --color-border: #8bd3dd;

        /* Highlight.js Theme Colors (Dark Mode) */
        --hl-comment: #999;
        --hl-punctuation: #ccc;
        --hl-tag: #ff6b6b;
        --hl-keyword: #ffa07a;
        --hl-string: #9fdf9f;
        --hl-number: #d49c6b;
        --hl-meta: #57a;
        --hl-meta-string: #6af;
      }
    }
  </style>
</head>

These new values will override the default ones declared in the library, including detailed syntax highlighting colors for both light and dark modes.

🖍 Syntax Highlighting (Optional)

shy.min.css includes built-in support for syntax highlighting using a custom theme designed for highlight.js. It replaces the default highlight.js style and integrates seamlessly with the shy.css design system, including support for light/dark mode out of the box.

✅ How to Use

1. Include shy.min.css (if you haven't already done so)

This single stylesheet handles both design and code highlighting styles.

<link href="https://cdn.jsdelivr.net/gh/4k1k01/shy.css@main/css/shy.min.css" rel="stylesheet">

2. Add highlight.js via CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
<!-- Optionally, load a specific language -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/javascript.min.js"></script>

<script>hljs.highlightAll();</script>

2. Wrap your code blocks like this (but you don't have to):

<pre><code class="language-javascript">
// Your JavaScript code here
</code></pre>

If you omit the language- class, highlight.js will attempt to detect the language automatically.

🧩 Tip

You can load additional languages as needed:

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/go.min.js"></script>

📜 License

This project is licensed under the MIT License.

🌐 Browser Support

shy.css supports all modern browsers including Chrome, Firefox, Safari, and Edge.

♿ Accessibility

Designed with accessibility in mind: high contrast, semantic tags, and keyboard navigation-friendly layout.

🆕 Version

Current version: v1.0.0. Follow on GitHub for updates.

📞 Support

Found a bug, need help or want to request a feature? Reach out via GitHub Issues.