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:
- opening the card component file in component folder
- 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:
- Open
utilities folder
. You can explore the complete folder structure here. - Create a file called "shadow.css"
- 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);
}
Import the a utility class into main.css & compile it with PostCSS
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.
- Open
component folder
. You can explore the complete folder structure here. - Create a a file called "tabs.css"
- Write the relevant CSS selectors and properties
.tabs {
box-shadow: var(--rbrh-box-shadow-lg);
}
- Open
main.css
- Import that a tabs component using
@import
plugin from PostCSS
@import "./components/tabs.css";
- Open CLI, run
postcss
script to compile the a tabs component - 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>