HTML Base Submodule

Navigation: uCss > Source > Modules > Base > HTML

Modules: Config | Base | Layout | Theming | Typography | Patterns | Utilities

The Semantic Skeleton. A classless CSS engine that makes raw HTML look beautiful by default. It handles vertical rhythm ("Smart Flow"), typographic hierarchy, and interactive states without a single class name.

📑 Contents

🌟 Overview

The HTML Submodule is the "Reset + Normalize + Typography" layer.

Top Features

  1. Smart Flow: Automatically adds space between paragraphs, but different space between a Paragraph and a Heading.
  2. Semantic Binding: <h1> is automatically Bold and sized fluidly via --t-fs.
  3. Focus Rings: All interactive elements (<a>, <input>, <button>) get accessible focus rings by default.
  4. List Markers: Bullets and Numbers inherit the brand color (--p).

🚀 Philosophy: Intro

What is it about?

Most frameworks require you to add classes to everything. <h1 class="text-3xl font-bold mb-4">. uCss believes HTML is UI. You should be able to dump a raw Markdown file into a page, and it should look perfect.

The Flow Algorithm

We use a lobotomized owl selector (* + *) strategy, but smarter.

  • P + P: Standard flow (0.75em).
  • P + H2: Heading flow (1em). (More space before a new section).

⚡ How to Get Started

The "Clicked" Moment

  1. Create a <div class="sf"> (Start Flow).
  2. Paste 5000 words of unstyled HTML.
  3. Load the page.
  4. It reads like a Medium article. Perfect rhythm.

Rollout in 5 Seconds

<article class="sf">
  <h1>My Post</h1>
  <p>Intro...</p>
  <ul>
    <li>Point 1</li>
    <li>Point 2</li>
  </ul>
</article>

📦 Installation & Stats

Bundle Stats

File Full (Raw) Clean Min Gzip Brotli
html.css (Aggregator) 19 KB 17 KB 15 KB 3.8 KB 3.3 KB
flow.css - - - - -
reset.css - - - - -

HTML Snippets

See Base Module for installation. This submodule is included in base.css.

📂 Files Reference

File Description Download
reset.css Normalization. Focus rings and box sizing. src
flow.css Rhythm. The Smart Flow engine logic. src
typography.css Type. Default styles for H1-H6, P, Blockquote. src
lists.css Markers. Styling for UL/OL/DL. src

🧠 Deep Dive

1. The Smart Flow Engine

The engine watches the relationships between elements. It doesn't just say margin-bottom: 20px. It says: "If a Paragraph is followed by a List, add Space. If a Heading is followed by a Paragraph, add less Space."

2. Classless Typography

We map standard HTML tags to our variable system.

  • <h1> -> --t-fs--s (Small Title).
  • <h2> -> --t-fs--xs (Extra Small Title).
  • <small> -> 0.875em.
  • <code> -> font-family: monospace.

3. App Mode (.s) vs Content Mode (.sf)

  • Start Flow (.sf): Used for Content (Blog posts, Legal pages). Turning this ON enables vertical margins.
  • Stop Flow (.s): Used for Apps (Dashboards, Navbars). Turning this ON (or default) removes vertical margins so you can control layout with Flexbox/Grid explicitly.

📍 Reference: Content Map

Elements

Tag Default Variable
<h1> 2.625rem (Fluid) --h-fs
<p> 65ch width --flow-max-width
<a> Underlined --link
<blockquote> Border Left --bq-bd-c
<hr> 1px Line --hr-c

Flow Controllers

Class Name Behavior
.sf Start Flow Enables vertical rhythm.
.s Stop Flow Disables vertical rhythm (sets vars to 0).

List Helpers

Class Description
.cl Clear List. Removes bullets and padding.

💡 Best Practices & Customization

CMS Integration

If you are using WordPress or a headless CMS:

  1. Wrap the output the_content() in .sf (Smart Flow).
    <div class="content sf">
  {post.body}
</div>
  2. That's it. You don't need to touch the HTML.

Overriding Global Headings

If you want ALL H1s to be Massive:

:root {
  --h1-fs: var(--t-fs--xxl);
}

🔧 For Developers

Debugging Flow

If spacing looks wrong:

  1. Inspect the element.
  2. Check margin-block-start.
  3. If it's 0, check if you are inside a .s container.
  4. If it's huge, check if you accidentally nested .sf.

Navigation: uCss > Source > Modules > Base > HTML

Modules: Config | Base | Layout | Theming | Typography | Patterns | Utilities

Back to top

License: MPL-2.0 Copyright: © 2025 Shukhrat (Alive 🜁) ⤻ UNQA

🗺️ Visual Map

src/lib/
├── config/                  # 1. CONFIGURATION (The Brain)
│   ├── root/                #    - Semantic Modules
│   │   ├── colors.css       #    - Palettes & Themes
│   │   ├── typography.css   #    - Fonts & Scales
│   │   ├── layout.css       #    - Radius & Spacing
│   │   └── patterns.css     #    - Component Vars
│   ├── adapters/            #    - CMS Adapters
│   │   ├── blocksy.css      #    - Blocksy Theme
│   │   └── gutenberg.css    #    - WordPress Block Editor
│   └── root.css             #    - Entry Point
│
├── base/                    # 2. BASE (The Foundation)
│   ├── html/                #    - HTML Engine <== YOU ARE HERE
│   │   ├── reset.css        #    - Normalization
│   │   ├── typography.css   #    - Text Defaults
│   │   ├── flow.css         #    - Smart Flow Engine
│   │   ├── lists.css        #    - List Styles
│   │   ├── forms.css        #    - Input Styling
│   │   └── helpers.css      #    - HTML Utilities
│   └── html.css             #    - Entry Point
│
├── patterns/                # 3. PATTERNS (The Components)
│   ├── button/              #    - Atomic Component
│   │   ├── base.css
│   │   └── group.css
│   ├── card/                #    - Card Component
│   │   ├── base.css
│   │   ├── content.css      #    - Slots & Padding
│   │   ├── media.css        #    - Full-bleed Media
│   │   └── subgrid.css      #    - Subgrid Support
│   ├── button.css           #    - Aggregator
│   ├── card.css             #    - Aggregator
│   ├── media.css            #    - Media Wrapper
│   ├── link.css             #    - Link Wrapper
│   └── patterns.css         #    - Entry Point
│
├── layout/                  # 4. LAYOUT (The Skeleton)
│   ├── grid/                #    - Grid Engine
│   │   ├── base.css         #    - Core Logic
│   │   ├── columns.css      #    - Presets
│   │   ├── subgrid.css      #    - Smart Grid
│   │   ├── recipes.css      #    - Smart Logic (.masonry .g-row)
│   │   └── item.css         #    - Child Logic
│   ├── flex/                #    - Flex Engine
│   │   ├── base.css         #    - Core Logic
│   │   ├── alignment.css    #    - Alignment Tools
│   │   ├── gaps.css         #    - Smart Gaps
│   │   └── item.css         #    - Child Logic
│   ├── container.css        #    - Container Queries (.c)
│   ├── flex.css             #    - Entry Point
│   ├── grid.css             #    - Entry Point
│   └── section.css          #    - Structural Layout
│
├── theming/                 # 5. THEMING (The Skin)
│   ├── set.css
│   └── overlay.css
│
├── typography/              # 6. TYPOGRAPHY (The Voice)
│   ├── title.css
│   ├── text.css
│   └── text-align.css
│
└── utilities/               # 7. UTILITIES (The Tools)
    ├── display.css
    ├── position.css
    ├── overflow.css
    ├── margin.css
    ├── padding.css
    ├── radius.css
    ├── size.css             #    - Size Utilities
    ├── blur.css
    └── utilities.css