swlkr / Ridgecss
A maximalist css framework for making web apps fast
Stars: ✭ 116
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Ridgecss
Jekyll Theme Hackcss
Dead simple CSS framework now with Jekyll.
Stars: ✭ 103 (-11.21%)
Mutual labels: css-framework
Setup
My own front end web development set up, covering everything from operating system to analytics.
Stars: ✭ 93 (-19.83%)
Mutual labels: css-framework
Animxyz
The first truly composable CSS animation library. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life.
Stars: ✭ 1,689 (+1356.03%)
Mutual labels: css-framework
Kernel.css
The CSS framework built for any kind of task
Stars: ✭ 80 (-31.03%)
Mutual labels: css-framework
Skeleton Plus
🎡 simple stripped down css framework
Stars: ✭ 100 (-13.79%)
Mutual labels: css-framework
Kanbasu
A lightweight CSS framework written in Sass.
Stars: ✭ 94 (-18.97%)
Mutual labels: css-framework
Materialize
Materialize, a CSS Framework based on Material Design
Stars: ✭ 38,630 (+33201.72%)
Mutual labels: css-framework
Pico
Graceful & Minimal CSS design system in pure semantic HTML
Stars: ✭ 89 (-23.28%)
Mutual labels: css-framework
Ion
A lightweight CSS framework that brings MacOS styled elements to Electron
Stars: ✭ 111 (-4.31%)
Mutual labels: css-framework
Minna Ui
😸 A fast, friendly, and fun web UI kit for everyone.
Stars: ✭ 86 (-25.86%)
Mutual labels: css-framework
Fictoan
Mockups with markup — https://sujan-s.github.io/fictoan/
Stars: ✭ 114 (-1.72%)
Mutual labels: css-framework
Infinity Css Grid
Fluid Flex Solution for making infinite grid columns.
Stars: ✭ 112 (-3.45%)
Mutual labels: css-framework
Tailwindcss
A utility-first CSS framework for rapid UI development.
Stars: ✭ 50,879 (+43761.21%)
Mutual labels: css-framework
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:
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].