Skip to main content

CSS classes & components

info

Remember to compile the main.css using PostCSS after customizing or selecting CSS variables and utilities. Read the PostCSS tutorial page to understand on that matter

Customizing CSS classes

You can customize the existing classes using CSS properties from Ravenbright CSS variables. For instance, we could update padding of card from 1rem to 2rem by:

  1. opening the card component file in component folder
  2. using the higher spacing CSS variables inside your CSS selector. This will only update the .card class
.card {
/*This is the old padding*/
padding: var(--rbrh-spacing-4);

/*Apply the a spacing inside the padding*/
padding: var(--rbrh-spacing-6);
}

Adding CSS classes

We will utilize utilities folder in this tutorial. For example, when adding a border-shadow utility class, you can follow these steps:

  1. Open utilities folder. You can explore the complete folder structure here.
  2. Create a file called "shadow.css"
  3. Write the relevant CSS selectors and properties
.shadow-lg {
box-shadow: var(--rbrh-box-shadow-lg);
}
.shadow-md {
box-shadow: var(--rbrh-box-shadow-md);
}
  1. Import the a utility class into main.css & compile it with PostCSS

  2. Finally, you can implement the a utility class inside your HTML file

<article class="card shadow-lg">
<h4>This is card heading</h4>
<p>This is card text</p>
</article>

Adding components

These are the steps to create a component in Ravenbright CSS. In this tutorial we aim to create tabs component.

  1. Open component folder. You can explore the complete folder structure here.
  2. Create a a file called "tabs.css"
  3. Write the relevant CSS selectors and properties
.tabs {
box-shadow: var(--rbrh-box-shadow-lg);
}
  1. Open main.css
  2. Import that a tabs component using @import plugin from PostCSS
@import "./components/tabs.css";
  1. Open CLI, run postcssscript to compile the a tabs component
  2. Then, you can use the a tabs component class inside your HTML file
<div class="tabs">
<a class="tab-link" href="#first" role="tab"> Installation </a>
<a class="tab-link active" href="#second" role="tab"> Alert </a>
<a class="tab-link " href="#third" role="tab"> Accordion </a>
</div>