Start

Download RealCSS and put the directory in the right folder.


-> static
    -> css
    -> js
    -> RealCSS
    -> index.html

After that, just add the css and js core to your page. We also add Montserrat, Material icons and Jquery.


<!DOCTYPE html>
<html lang="en" translate="no">

<head>
    <title>RealCSS Example</title>
    <meta charset="UTF-8">
    <meta name="google" content="notranslate">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        
    <link rel="stylesheet" href="path_to_RealCSS/fonts/material-design-icons/material-design-icons-round.css">
    <link rel="stylesheet" href="path_to_RealCSS/fonts/montserrat/montserrat.css">

    <link rel="stylesheet" href="path_to_RealCSS/all.min.css">
</head>

<body>

    <!-- your code here -->

    <script src="path_to_RealCSS/jquery.min.js "></script>
    <script src="path_to_RealCSS/all.min.js "></script>
    
</body>

</html>

App

This is the how you must use the library to create each section. Each section can be contained in a div with a specific id.

Section title

Small Title

Hello World!

Navbar & Menu


<!DOCTYPE html>
<html lang="en" translate="no">

<head>
    <title>RealCSS Example</title>
    <meta charset="UTF-8">
    <meta name="google" content="notranslate">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <link rel="stylesheet" href="../fonts/material-design-icons/material-design-icons-round.css">

    <link rel="stylesheet" href="../fonts/montserrat/montserrat.css">

    <link rel="stylesheet" href="../all.min.css">

    <script src="../jquery.min.js "></script>

    <style>
        @media (max-width: 860px) {
            .search-bar {
                display: none;
            }
        }

        @media (max-width: 600px) {
            .navbar .btn {
                display: none;
            }
        }

        .menu {
            flex-basis: 254px;
            width: 254px;
        }
    </style>

</head>

<body>

    <div class="navbar">

        <div class="nav-title">
            <i class="material-icons open-menu">menu</i>
            <h3>App title</h3>
        </div>

        <div id="search-bar" class="search-bar">
            <div class="search-field">
                <i class="material-icons">search</i>
                <input type="text" placeholder="Search something...">
                <i class="material-icons">expand_more</i>
            </div>
            <div id="search-list" class="search-list">
                <hr class="divider">
            </div>
        </div>

        <script>
            $(document).ready(function() {
                $("#search-bar input").keyup(function() {
                    let val = $("#search-bar input").val();
                    if (val == "") {
                        $("#search-list").hide();
                        return;
                    }

                    var results = ["result 1", "result 2"];

                    $("#search-list a").remove();

                    if (results.length != 0) {
                        $("#search-list").show();

                        for (var i = 0; i < results.length; i++) {
                            $("#search-list").append(`
                                <div class="search-result">
                                    <a href="#">${results[i]}</a>
                                </div>
                            `);
                        }

                    } else {
                        $("#search-list").hide();
                    }

                });
            });
        </script>

        <button class="btn btn-sp primary ripple-effect">Action</button>

        <i class="material-icons">settings</i>

        <div class="icon-group">
            <i class="material-icons">help</i>
            <p class="profile-button ripple-effect">U</p>
        </div>

    </div>

    <div class="main-container">

        <div class="menu">

            <div class="menu-title">
                <h3>App title</h3>
                <i class="material-icons close-menu">close</i>
            </div>

            <div class="menu-button menu-button-active primary ripple-effect">
                <i class="material-icons">play_arrow</i>
                <p>Start</p>
            </div>

            <div class="menu-button secondary ripple-effect">
                <i class="material-icons">home</i>
                <p>Home</p>
            </div>

            <div class="menu-button success ripple-effect">
                <i class="material-icons">crop_original</i>
                <p>Photos</p>
            </div>

            <div class="menu-button warning ripple-effect">
                <i class="material-icons">chat</i>
                <p>Messages</p>
            </div>

            <div class="menu-button danger ripple-effect">
                <i class="material-icons">language</i>
                <p>Web</p>
            </div>

            <hr class="divider">

            <div class="menu-button">
                <i class="material-icons">info</i>
                <p>Status</p>
                <div class="indicator primary"></div>
            </div>

            <div class="menu-button">
                <i class="material-icons">info</i>
                <p>Status</p>
                <div class="indicator secondary"></div>
            </div>

            <div class="menu-button">
                <i class="material-icons">info</i>
                <p>Status</p>
                <div class="indicator success"></div>
            </div>

            <div class="menu-button">
                <i class="material-icons">info</i>
                <p>Status</p>
                <div class="indicator warning"></div>
            </div>

            <div class="menu-button">
                <i class="material-icons">info</i>
                <p>Status</p>
                <div class="indicator danger"></div>
            </div>

            <hr class="divider">

            <div class="menu-button">
                <i class="material-icons">dark_mode</i>
                <p>Dark mode</p>
                <label class="toggle-switch primary dark-theme-toggle-switch">
                    <input type="checkbox">
                    <span class="slider"></span>
                </label>
            </div>

            <script>
                $(".menu-button").click(function () {
                    if ($(this).hasClass("ripple-effect")) {
                        $(".menu-button").removeClass("menu-button-active");
                        $(this).addClass("menu-button-active");
                    }
                });
            </script>
        </div>

        <div class="app"></div>

    </div>

    <script src="../all.min.js "></script>

</body>

</html>

Don't forget to use media queries hide the elements (search bar, buttons, icons) when there is not enough place to fit them.

Colors

For each container, we can see the color.

If you want to set a color, use these colors as they will adapt to dark mode.

--main-background-color

--main-color

--border-color

--shadow-color

--overflow-color

--overflow-background-color

--ripple-color

--gray-1

--gray-2

--gray-3

--primary

--primary-hover

--primary-bg

--success

--success-hover

--success-bg

--warning

--warning-hover

--warning-bg

--danger

--danger-hover

--danger-bg

And if you have for example a .primary element, you can do this:

--color

--hover-color

--light-bg-color

Buttons

Simple buttons

Add the class .ripple-effect to create this effect.

Small buttons

Light buttons

Outligned buttons

Dropdown

Badge

Loader

To show the loader, use the function loader.

The loader will start to spin after 0.6 second if you don't use loader(false);

So if the loading process is very fast, the loader will not be shown.

You can choose the color of the loader like this:

Progress bar

To create a progress bar use the following code.

Alert

To open an alert box, give the alert title, the alert content (text only) and the alert actions (buttons, inputs)

Add the class .cancel to a button to make it close the alert box.

Context menu

That's a basic context menu.

Right-click on me!

With colored icons...

Right-click on me!

Table

Simple table.

Column 1	Column 2	Column 3	Column 4
Some text	Some text	Some text	Some text
Some text	Some text	Some text	Some text
Some text	Some text	Some text	Some text

Accordion

An accordion to show more or less content.

Some text...

Other

Horizontal menu

This example include a ripple effect but you can remove it removing the class .ripple-effect.

Horizontal menu with animation

This example include a ripple effect but you can remove it removing the class .ripple-effect.

RealCSS

RealCSS

Start

App

Section title

Small Title

Navbar & Menu

Colors

Buttons

Simple buttons

Small buttons

Light buttons

Outligned buttons

Dropdown

Badge

Inputs

Text input

Toggle switch

Toggle switch with ripple effect

Toggle switch to control the dark theme

Toggle switch to enable the automatic dark theme

Checkbox

Loader

Progress bar

Alert

Tooltip

Context menu

Right-click on me!

Right-click on me!

Right-click on me!

Table

Simple table.

Accordion

An accordion to show more or less content.

Other

Horizontal menu

Horizontal menu with animation

Diagram