Clad Framework

Getting Started with Clad

Clad is a modern CSS framework designed to make web development faster and easier. Follow these steps to get started with Clad in your project:

1. Installation

You can install Clad using npm or by including it directly in your HTML file.

Option 1: NPM Installation

npm install clad-framework

Option 2: Direct Link

Add the following link tag to your HTML file:

              <link rel="stylesheet"
                href="https://unpkg.com/clad-framework/dist/clad.min.css">
            

2. Basic HTML Structure

Here's a basic HTML template to get you started with Clad:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Clad Project</title>
    <link rel="stylesheet" href="https://unpkg.com/clad-framework/dist/clad.min.css">
</head>
<body>
    <div class="clad-container">
        <h1>Welcome to My Clad Project</h1>
        <p>This is a basic template using Clad Framework.</p>
    </div>
</body>
</html>

3. Explore Clad's Features

Clad offers a wide range of components and utilities. Explore the documentation to learn more about:

Grid System
Typography
Buttons
Forms
Cards
Utilities for spacing, colors, and more

Grid System

Clad uses a flexible, mobile-first grid system that scales up to 12 columns as the device or viewport size increases.

Basic Grid Structure

Use clad-row to create horizontal groups of columns. Within the row, add columns using clad-col-* classes.

Column 1

Column 2

Column 3

<div class="clad-row">
    <div class="clad-col-sm-4">Column 1</div>
    <div class="clad-col-sm-4">Column 2</div>
    <div class="clad-col-sm-4">Column 3</div>
</div>

Responsive Classes

Clad's grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.

clad-col-* - Extra small devices (portrait phones, less than 576px)
clad-col-sm-* - Small devices (landscape phones, 576px and up)
clad-col-md-* - Medium devices (tablets, 768px and up)
clad-col-lg-* - Large devices (desktops, 992px and up)
clad-col-xl-* - Extra large devices (large desktops, 1200px and up)

Responsive Column

<div class="clad-row">
    <div class="clad-col-12 clad-col-md-8 clad-col-lg-6">
        Responsive Column
    </div>
</div>

Components

Clad provides a variety of components to help you build your website quickly and efficiently.

Buttons

Use Clad's custom button styles for actions in forms, dialogs, and more.

<button class="clad-btn clad-btn-primary">Primary</button>
<button class="clad-btn clad-btn-secondary">Secondary</button>
<button class="clad-btn clad-btn-success">Success</button>
<button class="clad-btn clad-btn-danger">Danger</button>
<button class="clad-btn clad-btn-warning">Warning</button>
<button class="clad-btn clad-btn-info">Info</button>

Button Sizes

<button class="clad-btn clad-btn-primary clad-btn-lg">Large Button</button>
<button class="clad-btn clad-btn-primary">Default Button</button>
<button class="clad-btn clad-btn-primary clad-btn-sm">Small Button</button>

Forms

Clad provides styles for form controls, layout options, and custom components.

<form>
    <div class="clad-form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="clad-form-control" id="exampleInputEmail1" placeholder="Enter email">
    </div>
    <div class="clad-form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="clad-form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="clad-form-group clad-form-check">
        <input type="checkbox" class="clad-form-check-input" id="exampleCheck1">
        <label class="clad-form-check-label" for="exampleCheck1">Check me out</label>
    </div>
    <button type="submit" class="clad-btn clad-btn-primary">Submit</button>
</form>

Inline Form

<form class="clad-form-inline">
    <div class="clad-form-group clad-mr-3">
        <label for="inlineFormInputName2" class="clad-sr-only">Name</label>
        <input type="text" class="clad-form-control clad-mb-2 clad-mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
    </div>
    <div class="clad-form-group clad-mr-3">
        <label for="inlineFormInputGroupUsername2" class="clad-sr-only">Username</label>
        <div class="clad-input-group clad-mb-2 clad-mr-sm-2">
            <div class="clad-input-group-prepend">
                <div class="clad-input-group-text">@</div>
            </div>
            <input type="text" class="clad-form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
        </div>
    </div>
    <button type="submit" class="clad-btn clad-btn-primary clad-mb-2">Submit</button>
</form>

Cards

Clad's cards provide a flexible and extensible content container with multiple variants and options.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

<div class="clad-card" style="width: 18rem;">
    <img src="..." class="clad-card-img-top" alt="Card image cap">
    <div class="clad-card-body">
        <h5 class="clad-card-title">Card title</h5>
        <p class="clad-card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="clad-btn clad-btn-primary">Go somewhere</a>
    </div>
</div>

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

This is a primary alert—check it out!

This is a secondary alert—check it out!

This is a success alert—check it out!

This is a danger alert—check it out!

This is a warning alert—check it out!

This is a info alert—check it out!

<div class="clad-alert clad-alert-primary" role="alert">
    This is a primary alert—check it out!
</div>
<div class="clad-alert clad-alert-secondary" role="alert">
    This is a secondary alert—check it out!
</div>
<div class="clad-alert clad-alert-success" role="alert">
    This is a success alert—check it out!
</div>
<div class="clad-alert clad-alert-danger" role="alert">
    This is a danger alert—check it out!
</div>
<div class="clad-alert clad-alert-warning" role="alert">
    This is a warning alert—check it out!
</div>
<div class="clad-alert clad-alert-info" role="alert">
    This is a info alert—check it out!
</div>

Utilities

Clad provides a wide range of utility classes to help you build your layouts and style your content quickly.

Spacing

Clad includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.

This element has both padding and margin.

<div class="clad-bg-light clad-p-3 clad-m-3">
    This element has both padding and margin.
</div>

The classes are named using the format: {property}{sides}-{size}

m - for classes that set margin
p - for classes that set padding

Where sides is one of:

t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom

Where size is one of:

0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer * .25
2 - (by default) for classes that set the margin or padding to $spacer * .5
3 - (by default) for classes that set the margin or padding to $spacer
4 - (by default) for classes that set the margin or padding to $spacer * 1.5
5 - (by default) for classes that set the margin or padding to $spacer * 3

Colors

Convey meaning through color with a handful of color utility classes.

.clad-text-primary

.clad-text-secondary

.clad-text-success

.clad-text-danger

.clad-text-warning

.clad-text-info

.clad-text-light

.clad-text-dark

<p class="clad-text-primary">.clad-text-primary</p>
<p class="clad-text-secondary">.clad-text-secondary</p>
<p class="clad-text-success">.clad-text-success</p>
<p class="clad-text-danger">.clad-text-danger</p>
<p class="clad-text-warning">.clad-text-warning</p>
<p class="clad-text-info">.clad-text-info</p>
<p class="clad-text-light clad-bg-dark">.clad-text-light</p>
<p class="clad-text-dark">.clad-text-dark</p>

Display

Quickly and responsively toggle the display value of components and more with our display utilities.

d-inline

<div class="clad-d-inline clad-p-2 clad-bg-primary clad-text-white">d-inline</div>
<div class="clad-d-inline clad-p-2 clad-bg-dark clad-text-white">d-inline</div>

Flexbox

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.

Flex item 1

Flex item 2

Flex item 3

<div class="clad-d-flex clad-p-2 clad-bg-light">
    <div class="clad-p-2 clad-bg-primary clad-text-white">Flex item 1</div>
    <div class="clad-p-2 clad-bg-secondary clad-text-white">Flex item 2</div>
    <div class="clad-p-2 clad-bg-success clad-text-white">Flex item 3</div>
</div>

Responsive Utilities

Clad provides responsive utility classes for display, flexbox, and more.

Visible on medium and larger screens

<div class="clad-d-none clad-d-md-block clad-bg-info clad-p-2 clad-text-white">
    Visible on medium and larger screens
</div>

Customization

Clad Framework is designed to be easily customizable. Here are some ways you can customize the framework to fit your project's needs:

1. Custom CSS

You can override Clad's default styles by adding your own CSS file after the Clad stylesheet:

<link rel="stylesheet" href="https://unpkg.com/clad-framework/dist/clad.min.css">
<link rel="stylesheet" href="path/to/your/custom-styles.css">

2. Sass Variables

If you're using Sass, you can customize Clad by modifying its variables before importing the framework:

// Custom variables
$primary: #007bff;
$secondary: #6c757d;
$success: #28a745;
$info: #17a2b8;
$warning: #ffc107;
$danger: #dc3545;
$light: #f8f9fa;
$dark: #343a40;

// Import Clad
@import "path/to/clad/scss/clad";

3. Custom Components

You can create custom components by combining existing Clad classes or by creating new classes that follow Clad's naming conventions:

Custom Card

This is a custom card component using Clad classes.

<div class="clad-card clad-bg-light clad-p-3 custom-card">
    <h4 class="clad-card-title">Custom Card</h4>
    <p class="clad-card-text">This is a custom card component using Clad classes.</p>
</div>

/* Custom CSS */
.custom-card {
    border-left: 4px solid #007bff;
    transition: transform 0.3s ease-in-out;
}
.custom-card:hover {
    transform: translateY(-5px);
}