🖌️Global Styles

The global.css file includes a set of predefined utility classes designed to simplify styling and layout adjustments. These classes are inspired by utility-first CSS frameworks like Tailwind, providing a fast and efficient way to apply common styles directly in your HTML.

Below is a list of the available utility classes, their descriptions, and the corresponding CSS rules:

Class	Description	CSS Rule
.marked	Highlights text with the primary color.	color: var(--highlight-color);
.flex	Applies a flex container.	display: flex;
.flex-column	Arranges flex items in a column.	flex-direction: column;
.justify-center	Centers items horizontally.	justify-content: center;
.align-center	Centers items vertically.	align-items: center;
.justify-between	Spreads items evenly with space between.	justify-content: space-between;
.wrap	Enables wrapping for flex items.	flex-wrap: wrap;
.w-100	Sets width to 100%.	width: 100%;
.h-100	Sets height to 100%.	height: 100%;
.w-full	Sets width to the full viewport width.	width: 100vw;
.h-full	Sets height to the full viewport height.	height: 100vh;
.m-auto	Centers an element with margin.	margin: auto;
.gap-10	Sets a gap of 10px between flex/grid items.	gap: 10px;
.gap-20	Sets a gap of 20px between flex/grid items.	gap: 20px;
.gap-30	Sets a gap of 30px between flex/grid items.	gap: 30px;
.gap-40	Sets a gap of 40px between flex/grid items.	gap: 40px;
.gap-50	Sets a gap of 50px between flex/grid items.	gap: 50px;
.pointer	Changes the cursor to a pointer.	cursor: pointer;
.relative	Positions the element relative to its parent.	position: relative;
.absolute	Positions the element absolutely within its parent.	position: absolute;

Usage Examples

To use these utility classes, simply add them to the HTML elements where you need the styles. For example:

<div class="flex justify-center align-center gap-20">
    <button class="pointer">Button 1</button>
    <button class="pointer">Button 2</button>
</div>

<div class="relative w-full h-100">
    <p class="absolute marked">This is a highlighted text.</p>
</div>

Notes

• These utility classes are located in the global.css file within the css folder of your project.

• You can combine multiple classes to achieve the desired styling quickly without writing additional custom CSS.