Morse CSS

What is Morse CSS?

Morse CSS is a classless CSS framework that allows you to style your HTML without writing any CSS classes. Instead of adding classes to your HTML elements, styling is determined by the document structure and special Morse code patterns embedded in your markup.

Key Features

• Truly Classless: No need to add classes to your HTML elements
• Structure-Based Styling: Styling is computed based on document structure
• Utility-Like Control: Achieve the precision of utility frameworks like Tailwind CSS, but without classes
• Morse Code Magic: Use Morse code patterns to apply specific styles to elements

How It Works

Morse CSS uses a clever approach to styling by recognizing Morse code patterns at the beginning of your HTML elements:

• Dots in Morse code are represented as <i></i> (empty italic elements)
• Dashes are represented as <span></span> (empty spans)

Example

To make an element bold, you would include the Morse code for "BOLD" at the beginning of the element:

<p>
  <!-- Morse code for BOLD: -... --- .-.. -.. -->
  <span></span><i></i><i></i><i></i>
  <span></span><span></span><span></span>
  <i></i><span></span><i></i><i></i>
  <span></span><i></i><i></i>
  
  This entire paragraph will be bold because the Morse code pattern at the beginning applies the
  style to the whole element.
</p>

The Morse code -... --- .-.. -.. (BOLD) is represented by the pattern of empty spans and italics at the beginning of the element, which Morse CSS recognizes and applies the corresponding style (in this case, font-weight: bold) to the entire element.

Installation

Direct Download

Download the CSS file directly from the download link or from the GitHub releases page.

Including in Your HTML

<link rel="stylesheet" href="path/to/morse.css">

Usage

Include the Morse CSS stylesheet in your HTML:

<link rel="stylesheet" href="path/to/morse.css">

Available Patterns

Here are some common patterns included in the default Morse CSS:

Browser Support

Morse CSS relies on modern CSS selectors like :has(). Check browser compatibility before using in production:

• Chrome 105+
• Safari 15.4+
• Firefox 121+
• Edge 105+

Documentation

For more detailed documentation, please visit the GitHub repository.

If you'd like to contribute to Morse CSS, please see the contributing guidelines.

Examples

Check out our examples to see Morse CSS in action:

• Basic Examples
• Utility CSS Examples - Demonstrates the utility-CSS-like features