Installation

1️⃣ Manual download

Quickly download Ravenbright CSS source code.

Existing project

After downloading the files, copy Ravenbright CSS into your project directory
Run this command below to install dependencies

npm install

Import the link tag into your HTML or react file

<!--Light mode-->
<link rel="stylesheet" type="text/css" href="/dist/ravenbright-min.css">
<!--Dark mode-->
<link rel="stylesheet" type="text/css" href="/dist/ravenbright-dark-min.css">

/*Light mode*/
import "../styles/dist/ravenbright-dark.min.css";
/*Dark mode*/
import "../styles/dist/ravenbright.min.css";

Then, build the CSS & it's done!

npm run buildcss

👉 open http:localhost:4173 or http:localhost:5173 in your browser to see the HTML starter template

New project

## create directory
mkdir project
cd project

## initiliaze project
npm init

## install ravenbrightcss
npm install ravenbrightcss

## change directory
cd node_modules/ravenbrightcss

## install dependencies
npm install

Lastly, run this command to start the local development server

npm run dev

👉 open http:localhost:4173 or http:localhost:5173 in your browser to see the HTML starter template

HTML starter

Utilize this HTML template to be your starter point.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="description" content="Build stunning &amp; modern sites
                                without complex setup. Ravenbright CSS is a zero-config &amp; style agnostic CSS library with utility classes, reusable design tokens, minimal components &amp; built-in dark mode.">
        <meta name="keywords" content="Minimal modern CSS library, CSS custom properties, free CSS library, open source CSS library, CSS utility classes, low level CSS, style agnostic CSS library, platform agnostic CSS library, fully-customized CSS library, utility classes, CSS variables, CSS custom properties, design system, CSS with Figma tokens, Figma tokens, reusable design tokens, minimal components, minimal UI components">
        <meta name="author" content="Ravenbright CSS library">
        <meta name="language" content="English">
        <title>Ravenbright CSS - Modern, zero-config &amp; style agnostic CSS library with utility classes, reusable design tokens, minimal
            components
        </title>

        <!-- Favicon -->
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon/16x16.png">
        <link rel="apple-touch-icon" sizes="180x180" href="/favicon/180x180.png">
        <link rel="icon" type="image/png" href="/favicon/32x32.png" sizes="32x32">

        <!-- Main CSS -->
        <link rel="stylesheet" href="dist/ravenbright.min.css">

    </head>
    <body class="bg-yellow-50">
        <header>
            <div class="container container-xl">
                <nav aria-label="main menu" class="flex justify-between items-center p-y-5 xs-flex-wrap md-flex-no-wrap">
                    <a href="https://Ravenbrightcss.com" aria-label="Ravenbright CSS">
                        <h1 class="h5 font-bold">Ravenbright CSS</h1>
                    </a>
                    <ul class="xs-d-none md-flex items-center">
                        <li><a class="md-m-r-8" href="#">Home</a></li>
                        <li><a class="md-m-r-8" href="#">About</a></li>
                        <li><a class="md-m-r-8" href="#">Blog</a></li>
                        <li><a class="md-m-r-8" href="#">Contact</a></li>
                    </ul>
                    <a href="https://Ravenbrightcss.com" class="btn shadow-md" aria-label="Get started" role="button">
                        <span class="white xs-d-none md-flex m-r-3">Get started</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ai ai-ArrowUpRight">
                            <path d="M18 6L6 18"></path>
                            <path d="M8 6h10v10"></path>
                        </svg>
                    </a>
                </nav>
            </div>
        </header>
        <main>
            <section class="p-y-12">
                <h2 class="visually-hidden">Ravenbright CSS starter template</h2>
                <div class="container container-lg m-b-8">
                    <article class="md-flex m-b-10">
                        <div class="flex flex-column md-m-r-12 xs-m-b-10 md-m-b-0 md-w-50">
                            <span class="badge bg-sky-100 border-sky-300 sky-800 dark-border-none dark-bg-sky-800 dark-white badge-sm p-x-3 p-y-2 m-b-4">
                                🗣 Customer testimonials - template 2
                            </span>
                            <h2 class="m-b-6">
                                Trusted &amp; used by <span class="blue-600 dark-yellow-500 font-bold">world-class</span> tech companies
                                across
                                the world
                            </h2>
                            <p class="m-b-6">Ut placerat orci nulla pellentesque dignissim enim. Ut lectus arcu bibendum at. Dolor
                                purus non enim praesent elementum.
                            </p>

                            <!--Features-->
                            <div class="flex xs-flex-wrap items-center">
                                <div class="flex items-center m-b-2">
                                    <span class="badge w-12 h-12 radius-md p-x-5 bg-green-100 border-green-400 dark-border-none dark-bg-gray-700 items-center m-r-4 caption">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="#06bf1a" width="32" height="32" class="ionicon" viewBox="0 0 512 512">
                                            <title>Shield Checkmark</title>
                                            <path d="M479.07 111.36a16 16 0 00-13.15-14.74c-86.5-15.52-122.61-26.74-203.33-63.2a16 16 0 00-13.18 0C168.69 69.88 132.58 81.1 46.08 96.62a16 16 0 00-13.15 14.74c-3.85 61.11 4.36 118.05 24.43 169.24A349.47 349.47 0 00129 393.11c53.47 56.73 110.24 81.37 121.07 85.73a16 16 0 0012 0c10.83-4.36 67.6-29 121.07-85.73a349.47 349.47 0 0071.5-112.51c20.07-51.19 28.28-108.13 24.43-169.24zm-131 75.11l-110.8 128a16 16 0 01-11.41 5.53h-.66a16 16 0 01-11.2-4.57l-49.2-48.2a16 16 0 1122.4-22.86l37 36.29 99.7-115.13a16 16 0 0124.2 20.94z">
                                            </path>
                                        </svg>
                                    </span>
                                    <div class="flex flex-column w-100">
                                        <!--stars-->
                                        <div class="flex items-center m-b-2">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star m-r-3 green-600 dark-yellow-500" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="currentColor" stroke-linecap="round" stroke-linejoin="round">
                                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z">
                                                </path>
                                            </svg>
                                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star m-r-3 green-600 dark-yellow-500" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="currentColor" stroke-linecap="round" stroke-linejoin="round">
                                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z">
                                                </path>
                                            </svg>
                                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star m-r-3 green-600 dark-yellow-500" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="currentColor" stroke-linecap="round" stroke-linejoin="round">
                                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z">
                                                </path>
                                            </svg>
                                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star m-r-3 green-600 dark-yellow-500" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="currentColor" stroke-linecap="round" stroke-linejoin="round">
                                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z">
                                                </path>
                                            </svg>
                                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star m-r-3 green-600 dark-yellow-500" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="currentColor" stroke-linecap="round" stroke-linejoin="round">
                                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z">
                                                </path>
                                            </svg>
                                        </div>
                                        <p class="small gray-600 dark-gray-400">Trusted ratings (200 reviews)</p>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <!-- Image -->
                        <img loading="lazy" alt="Image by @wocintechchat - https://unsplash.com/photos/Q80LYxv_Tbs" style="height: 420px; background-size: cover; object-fit: cover; padding:0" src="https://images.unsplash.com/photo-1573167507387-6b4b98cb7c13?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=480&amp;q=80" class="md-w-50 radius-md"/>
                    </article>
                </div>
                <div class="container container-lg">
                    <div class="grid xs-grid-cols-1 md-grid-cols-2 lg-grid-cols-3 gap-6 m-b-8">
                        <article class="card bg-gray-50 border-gray-200 dark-border-none dark-bg-gray-800">
                            <h3 class="visually-hidden">Testimonial - 1</h3>
                            <p class="m-b-6">"Tellus in metus vulputate eu. Hendrerit dolor magna eget est. Dictum at tempor
                                commodo ullamcorper a lacus vestibulum"</p>
                            <div class="flex items-start gap-3">
                                <img class="avatar avatar-48 m-r-2" alt="Image by @julianwan - https://unsplash.com/photos/2EdIX-O2lkI" src="https://images.unsplash.com/photo-1586297135537-94bc9ba060aa?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=96&amp;q=80" width="40" height="40">
                                <div class="flex flex-column">
                                    <p class="font-semibold">
                                        Gwyneth Shawn
                                    </p>
                                    <p class="caption">
                                        Head of Product
                                    </p>
                                </div>
                            </div>
                        </article>
                        <article class="card bg-gray-50 border-gray-200 dark-border-none dark-bg-gray-800">
                            <h4 class="visually-hidden">Testimonial - 2</h4>
                            <p class="m-b-6">"Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Malesuada
                                proin libero nunc consequat."</p>
                            <div class="flex items-start gap-3">
                                <img class="avatar avatar-48 m-r-2" alt="Image by @itfeelslikefilm - https://unsplash.com/photos/1nizzZ-SFw4" src="https://images.unsplash.com/photo-1479795746179-419986b1cbb5?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=96&amp;q=80" width="40" height="40">
                                <div class="flex flex-column">
                                    <p class="font-semibold">
                                        Saige Lavonne
                                    </p>
                                    <p class="caption">
                                        Head of Business
                                    </p>
                                </div>
                            </div>
                        </article>
                        <article class="card bg-gray-50 border-gray-200 dark-border-none dark-bg-gray-800">
                            <h4 class="visually-hidden">Testimonial - 3</h4>
                            <p class="m-b-6">"Aliquam faucibus purus in massa tempor. Interdum posuere lorem ipsum dolor sit amet
                                consectetur adipiscingt"</p>
                            <div class="flex items-start gap-3">
                                <img class="avatar avatar-48 m-r-2" alt="Image by @art_hauntington - https://unsplash.com/photos/B5PLtlpR7YA" src="https://images.unsplash.com/photo-1597004897768-c503466472cc?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTh8fGZhY2V8ZW58MHwyfDB8fA%3D%3D&amp;auto=format&amp;fit=crop&amp;w=96&amp;q=60">
                                <div class="flex flex-column">
                                    <p class="font-semibold">
                                        Alyse Dorinda
                                    </p>
                                    <p class="caption">
                                        Head of Marketing
                                    </p>
                                </div>
                            </div>
                        </article>
                    </div>
                </div>
            </section>
        </main>
        <footer class="p-y-12 bg-white">
            <div class="container container-xl">
                <div class="flex xs-flex-wrap md-flex-no-wrap justify-between items-center">
                    <a href="https://Ravenbrightcss.com" aria-label="Ravenbright CSS">
                        <h2 class="h5 font-bold">Ravenbright CSS</h2>
                    </a>
                    <div class="xs-d-none md-flex md-justify-center">
                        <a href="https://github.com/Ravenbrightdesign/Ravenbrightcss" role="button" aria-label="GitHub link" class="m-r-12">
                            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke-width="2" class="ai ai-GithubFill">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z">
                                </path>
                            </svg>
                        </a>
                        <a href="https://www.figma.com/@ariqnarasaputra" role="button" aria-label="Figma link" class="m-r-12">
                            <svg role="img" aria-label="figma" width="24" height="24" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M6 6C6 5.20435 6.31607 4.44129 6.87868 3.87868C7.44129 3.31607 8.20435 3 9 3H12V9H9C8.20435 9 7.44129 8.68393 6.87868 8.12132C6.31607 7.55871 6 6.79565 6 6Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M12 3H15C15.394 3 15.7841 3.0776 16.1481 3.22836C16.512 3.37913 16.8427 3.6001 17.1213 3.87868C17.3999 4.15726 17.6209 4.48797 17.7716 4.85195C17.9224 5.21593 18 5.60603 18 6C18 6.39397 17.9224 6.78407 17.7716 7.14805C17.6209 7.51203 17.3999 7.84274 17.1213 8.12132C16.8427 8.3999 16.512 8.62087 16.1481 8.77164C15.7841 8.9224 15.394 9 15 9H12V3Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M12 12C12 11.606 12.0776 11.2159 12.2284 10.8519C12.3791 10.488 12.6001 10.1573 12.8787 9.87868C13.1573 9.6001 13.488 9.37913 13.8519 9.22836C14.2159 9.0776 14.606 9 15 9C15.394 9 15.7841 9.0776 16.1481 9.22836C16.512 9.37913 16.8427 9.6001 17.1213 9.87868C17.3999 10.1573 17.6209 10.488 17.7716 10.8519C17.9224 11.2159 18 11.606 18 12C18 12.394 17.9224 12.7841 17.7716 13.1481C17.6209 13.512 17.3999 13.8427 17.1213 14.1213C16.8427 14.3999 16.512 14.6209 16.1481 14.7716C15.7841 14.9224 15.394 15 15 15C14.606 15 14.2159 14.9224 13.8519 14.7716C13.488 14.6209 13.1573 14.3999 12.8787 14.1213C12.6001 13.8427 12.3791 13.512 12.2284 13.1481C12.0776 12.7841 12 12.394 12 12V12Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M6 18C6 17.2044 6.31607 16.4413 6.87868 15.8787C7.44129 15.3161 8.20435 15 9 15H12V18C12 18.7956 11.6839 19.5587 11.1213 20.1213C10.5587 20.6839 9.79565 21 9 21C8.20435 21 7.44129 20.6839 6.87868 20.1213C6.31607 19.5587 6 18.7956 6 18Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M6 12C6 11.2044 6.31607 10.4413 6.87868 9.87868C7.44129 9.31607 8.20435 9 9 9H12V15H9C8.20435 15 7.44129 14.6839 6.87868 14.1213C6.31607 13.5587 6 12.7956 6 12Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </a>
                        <a href="https://codepen.io/ariqnarasaputra" role="button" aria-label="Codepen link">
                            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke-width="2" class="ai ai-CodepenFill">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M11.372.19c.38-.253.875-.253 1.256 0L23.492 7.4c.317.21.508.565.508.946v7.308c0 .38-.19.736-.508.947l-10.864 7.21c-.38.252-.875.252-1.256 0L.508 16.6A1.136 1.136 0 0 1 0 15.654V8.346c0-.38.19-.736.508-.947L11.372.19zm-9.1 10.273v3.058l2.288-1.54-2.288-1.518zm4.337 2.878L3.18 15.648l7.684 5.1v-4.583L6.61 13.341zm6.527 2.824v4.582l7.684-5.1-3.43-2.306-4.254 2.824zm6.303-4.183l2.29 1.54v-3.06l-2.29 1.52zm1.371-3.636l-3.41 2.263-4.264-2.868V3.253l7.674 5.093zm-9.946-5.093V7.74l-4.263 2.868L3.19 8.346l7.674-5.093zM12 9.715l-3.35 2.254L12 14.192l3.35-2.223L12 9.715z">
                                </path>
                            </svg>
                        </a>

                    </div>
                    <p class="caption xs-d-none md-flex">© Copyright 2022. All Rights Reserved.</p>
                </div>

            </div>
        </footer>
</body>
</html>

Design tokens

2️⃣ npm

info

Make sure that you already have installed npm CLI. Read about this on npm official docs

Create & change the project directory

mkdir project
cd project

Initialize project

npm init

Install Ravenbright CSS

npm install ravenbrightcss

After that, change the directory

cd node_modules/ravenbrightcss

Then, run these commands in your CLI & it's done!

npm install

npm run dev

👉 open http:localhost:4173 or http:localhost:5173 in your browser to see the HTML starter template

tip

Quickly copy and paste the stunning pre-built UI collections into your HTML sites 👇.

Explore UI collections

3️⃣ CDN (No installation required)

The easiest way to start with Ravenbright is by adding the CDN link inside your existing HTML file below.

🌞 Ravenbright CSS (without dark mode)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ravenbrightcss@1.0.0/dist/ravenbright.min.css">

🌞🌙 Ravenbright CSS (with dark mode)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ravenbrightcss@1.0.0/dist/ravenbright-dark.min.css">

4️⃣ PostCSS

PostCSS is a post-processor tool that provide developers with multiple web development plugins. One of the plugin is @import which can make CSS more maintainable. You can selectively import components & utilities.

Read the detailed process in PostCSS page.

Post CSS tutorial