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
Try before you buy! Here's how your html could look after applying ridge.css (with the default dark theme)
<!DOCTYPE html><htmllang="en" dir="ltr"><head><metacharset="utf-8"><metaname="viewport" content="width=device-width, initial-scale=1" /><title>ridge.css</title><linkrel="stylesheet" href="ridge-dark.css" /><linkrel="stylesheet" href="ridge.css" /></head><body><vstackspacing="xl"><hstack><ahref="/">Cool logo</a><spacer></spacer><hstackspacing=s><ahref="/pricing">Pricing</a><ahref="/join"><button>Sign up</button></a></hstack></hstack><vstackalign-x="center"><h1>Welcome to ridge.css!</h1></vstack></vstack></body></html>Here's a screenshot of how that looks:
Download a theme, and add it to your html:
<head><linkrel="stylesheet" media="(prefers-color-scheme: light), (prefers-color-scheme: none)" href="ridge-light.css" /><linkrel="stylesheet" media="(prefers-color-scheme: dark)" href="ridge-dark.css" /><linkrel="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.