Skip to main content

What are the aims of this project?

Questions Ravenbright try to answer​

  • How can we help users get started quickly when building static website?
  • How can we make designers & developers handoff process better?
  • How can we reduce users cognitive load when writing CSS?
  • How can we provide flexibility when using CSS without tied to tools or frameworks?
  • How can we allow users have better control over their CSS files?
  • How can we help users achieve maintainable CSS files?
  • How can we make the starter UI components customizable & accessible?

Zero setup & low level CSS library​

One of Ravenbright CSS goal is to provide fast & beginner friendly onboarding. You can start using Ravenbright CSS without complex JS build setup configuration. Download the source code, run npm install, run the server, customize the design & it's done 🎉.

For super quick start, use Ravenbright CSS low specificity CSS files via CDN.

Flexible & hybrid CSS library​

Ravenbright CSS is a flexible CSS library which made using CSS custom properties, utility classes and minimal components.

info

Ravenbright believe that, CSS library shouldn't excessively dictate the component style since every project might have different use cases.

Nonetheless, by using Ravenbright you can:

  • built unique & custom websites
  • use vanilla CSS with SASS-like functionalities which exist in PostCSS (nesting, @import and @mixins)
  • customize components with CSS variables, creating new class or using utility classes with your brand style. The choice is up to you
  • quickly integrate brand styles into static sites
  • Handpick the utilities or components without tied to other unnecessary CSS files
tip

Quickly copy and paste the stunning pre-built high-fidelity components into your HTML sites 👇.

Explore UI collections

Platform agnostic​

You can integrate Ravenbright CSS tokens without depends on specific tools or platforms. Currently, Ravenbright CSS provides 5 integration guides such as Next.js, Gatsby, Astro, TailwindCSS and Figma Tokens.

Read integrations

Faster & seamless handoff experience​

Ravenbright aims to improve designers & developers handoff process by providing design tokens which can be imported or exported into another tools or platforms.

Built in Vanilla CSS with SASS capabilities​

Ravenbright build on top of vanilla CSS combined with PostCSS to enable import, nesting and mixin features. Read about PostCSS in PostCSS page

Centralized tokens & styles​

Ravenbright use CSS custom properties which located in 1 location, so you can customize & manage multiple styles.

If CSS variables of spacing-6 changed to 4rem, subsequently, all other connected utilities such as padding, margin, and others which used spacing values are also changed

/*Snippet of CSS variables*/
html {
  --rbrh-spacing-0: 0rem;
  --rbrh-spacing-1: 0.125rem;
  --rbrh-spacing-2: 0.25rem;
  --rbrh-spacing-3: 0.5rem;
  --rbrh-spacing-4: 0.75rem;
  --rbrh-spacing-5: 1rem;
  --rbrh-spacing-6: 1.25rem;
  --rbrh-spacing-7: 1.5rem;
  --rbrh-spacing-8: 1.75rem;
  --rbrh-spacing-9: 2rem;
  --rbrh-spacing-10: 2.5rem;
  --rbrh-spacing-12: 3rem;
  --rbrh-spacing-14: 3.5rem;
}