What is Chalk CSS?

Chalk CSS is a lightweight css framework that allows you to make your website look clean and simple. It has a simple grid system and uses soft font types and colors. If you need a simple and clean looking site, then this is the perfect framework for you. Get Chalk CSS now by following the guide below.

How to install Chalk CSS

Clone the project from github:

Explore

• Grid
• Typography
• Buttons
• Cards
• Forms
• Tables
• Lists
• Notifications

Grid

The grid system is simple. To use the grid system, you first need a row. You will be able to make columns in that row. The grid is divided in 12 parts and each column can take up multiple parts.

<div class="row">
            <div class="col col-3">
                <p>.col col-3</p>
            </div>
    
            <div class="col col-6">
                <p>.col col-6</p>
            </div>
    
            <div class="col col-3">
                <p>.col col-3</p>
            </div>
</div>

As you can see, you can use the grid however you like. Do keep in mind that a row can only hold 12 parts. That means that you have to start a new row if you've used up all 12 parts in one row. Below, you will find an example.

Typography

To flourish up your text, make use of the classes below.

For headers:

.size-1

.size-2

.size-3

.size-4

.size-5

.size-6

For paragraphs:

.size-1

.size-2

.size-3

.size-4

.size-5

.size-6

Assing colors to text:

.primary

.info

.danger

.success

.tip

Buttons

Chalk CSS also offers a number of button styles. All button classes can be mixed to get the result you want.

Normal buttons

All you need for this effect is:

Rounded buttons

To make buttons rounded, add btn-rounded:

Lifted buttons

Add btn-lift-# to a button for a floating effect:

Lifted, rounded and colored

Mix classes to get the results you want:

Cards

Cards are simple objects that can be used to display information. A good use-case for a card would be to show an item in a webshop.

<div class="card">
        <div class="card-image">
                <img src="https://images.pexels.com/photos/371633/pexels-photo-371633.jpeg?auto=compress&cs=tinysrgb&h=350" alt="card">
        </div>

        <div class="card-content">
                <h1 class="size-6">Title</h1>
                <br>
                <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium esse voluptate nesciunt eligendi quod consequuntur iste corrupti pariatur.
                </p>

                <button class="btn btn-primary">Add</button>
        </div>
</div>

Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium esse voluptate nesciunt eligendi quod consequuntur iste corrupti pariatur.

Add

Forms

Forms are an essential part of every CSS framework. Chalk CSS keeps it simple and clean. Every group of inputs are wrapped by a form field. Form fields are made by adding form-field as a class to a div. Inline fields are also available. To make a field inline, add the inline class to the form field. Inputs must always have the class input assigned to have the styling applied.

Normal form field

<form class="form">
        <div class="form-field">
                <input type="text" class="input" placeholder="Name">
                <input type="email" class="input" placeholder="Email">
        </div>
</form>

Inline form field

<form class="form">
        <div class="form-field inline">
                <input type="text" class="input" placeholder="Name">
                <input type="email" class="input" placeholder="Email">
        </div>
</form>

Textarea

<form class="form">
        <div class="form-field">
                <textarea class="textarea" cols="50" rows="10"></textarea>
        </div>
</form>

Select

<form class="form">
        <div class="form-field">
                <select class="select">
                    <option disabled>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                </select>
        </div>
</form>

Tables

Tables are the easiest way to display structured data. All you need to do is assign the class table to the main table element.

You can also add the bordered class to the main table element to surround the table with a border.

In addition to adding the bordered class to the main element, you can add bordered to each seperate row.

Lists

All you need to do to make a list is add the list class to a ul or ol element. Each list item takes the class list-item . To make a list-item active, add the active class.

<ul class="list">
                <li class="list-item">list-item</li>
                <li class="list-item active">list-item active</li>
                <li class="list-item">list-item</li>
        </ul>

• list-item
• list-item active
• list-item

Notifications

A notification is a handy little object to notify your visitors of something. Add the notification class to a div for the styling to appear. You can add a color to the notification by adding one of the color classes to the notification.

<div class="notification primary">
        <p>
                Your subscription has expired! Click
                <a href="#notifications" class="primary">here</a>
                to renew your subscription
        </p>
</div>