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>