Ridgecss

A maximalist css framework for making web apps fast

Generate Convert Improve

Install / Use

/learn @swlkr/Ridgecss

About this skill

Quality Score

0/100

README

ridge.css

The clearest way into the Universe is through a forest wilderness. - John Muir

ridge.css is a set of classless css themes, layout helpers via pylon.css and optional alpine.js code to help you write fast web apps fast

Usage

Try before you buy! Here's how your html could look after applying ridge.css (with the default dark theme)

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>ridge.css</title>
    <link rel="stylesheet" href="ridge-dark.css" />
    <link rel="stylesheet" href="ridge.css" />
  </head>
  <body>
    <vstack spacing="xl">
      <hstack>
        <a href="/">Cool logo</a>
        <spacer></spacer>
        <hstack spacing=s>
          <a href="/pricing">Pricing</a>
          <a href="/join">
            <button>Sign up</button>
          </a>
        </hstack>
      </hstack>

      <vstack align-x="center">
        <h1>Welcome to ridge.css!</h1>
      </vstack>
    </vstack>
  </body>
</html>

Here's a screenshot of how that looks:

screenshot of default dark theme

Install

Download a theme, and add it to your html:

<head>
  <link rel="stylesheet" media="(prefers-color-scheme: light), (prefers-color-scheme: none)" href="ridge-light.css" />
  <link rel="stylesheet" media="(prefers-color-scheme: dark)" href="ridge-dark.css" />
  <link rel="stylesheet" href="ridge.css" />
</head>

The example above adds both light and dark default themes and switches depending on the OS's dark mode setting.

Related Skills

node-connect

347.2k

Diagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps

frontend-design

108.0k

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

openai-whisper-api

347.2k

Transcribe audio via OpenAI Audio Transcriptions API (Whisper).

qqbot-media

347.2k

QQBot 富媒体收发能力。使用 <qqmedia> 标签，系统根据文件扩展名自动识别类型（图片/语音/视频/文件）。