Skip to main content

Welcome to Ravenbright CSS👋

What is Ravenbright CSS?​

Ravenbright CSS is a zero configuration, minimal, flexible & customizable CSS library which suitable for simple static sites.

Ravenbright CSS is also an open-source CSS library with Apache License 2.0. Consequently, you can use it in your project for free even for commercial usage.

Quick startRavenbright CSS banner

Ravenbright CSS will help you

Build static sites without complex configuration

Customize sites with style agnostic library

Quickly implement dark mode for your sites

Reduce duplicate styles in CSS

Get designers & devs on the same page

Built static sites with accessibility in mind

Who is Ravenbright CSS for?​

If you,

  • are on the verge of getting started without rebuilding same UI components but still aim to customize the sites
  • tired to deal with complex front-end configurations when creating static sites such as portfolio, coming soon, or landing page
  • have had enough customizing opinionated frameworks which contain bloated CSS
  • attempt to improve designer & developer hand off process
  • need to develop static sites that works without Javascript

Ravenbright CSS might be for you.

info

At the first stage, Ravenbright CSS provides minimal components & CSS variables

The minimal components act as a baseline which you can use as a starter template and still give options to customize the design in static websites.

Then, you can modify the components by using either design tokens, CSS utility classes or creating classes. Ravenbright doesn't dictate how you should design the website. It's all your choice.

info

Moreover, in an advanced stage, you can selectively import the components by using PostCSS. You can also integrate Ravenbright into your preferred tools

How to use​

Ravenbright is built based on design tokens, its own utility classes & compiled using PostCSS. You have 4 options to use Ravenbright:

  • Use Ravenbright as it is with the CDN
  • Download it via GitHub release or install it via npm
  • Selectively import utilities with PostCSS @import plugin
  • Customize components with CSS variables & utility classes
  • Integrate Ravenbright Design Tokens in your existing project.

Integrations​

Getting started​

Try Ravenbright in your browser

Play around with Ravenbright CSS features on Codepen

Try the demo

Start your Ravenbright project

Use CDN, install via `npm` or import components with PostCSS

Quick start