Hi, Welcome to Readyui’s developer guide

Getting started



    <!doctype html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">

            <title>blox</title>

            <!-- Bootstrap CSS -->
            <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

            <!-- Custom CSS -->
            <link rel="stylesheet" href="css/style.css">
        </head>
        <body>
            <!-- Put the blocks HTML here -->

            <!-- Put the blocks HTML here -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
        </body>
    </html>

Resources

SVG icons
Image
Slider

Style Guide


Text Styles

Heading text
Style name Font size Line Height Example
H6 24 36 Production ready assets
H5 40 48 Production ready assets
H4 48 58 Production ready assets
H3 56 68 Production ready assets
H2 64 77 Production ready assets
H1 72 80 Production ready assets
Paragraph text
Style name Font size Line Height Example
Regular-S 16 25 Production ready assets
Medium-S 16 25 Production ready assets
Bold-M 18 28 Production ready assets
Medium-L 20 30 Production ready assets
Button/other text
Style name Font size Line Height Example
Small Text 1 12 19 Production ready assets
Button 1 14 22 Production ready assets
Button 2 14 22 Production ready assets
Menu 1 18 28
Menu 2 18 28
Small Heading 20 30 Production ready assets

Buttons

Fill Button

Initial

Button Button Button Button

Initial

Button Button Button Button
Stroke Button
Next Button (Double)

Inactive

Active left

Active right

Next Button (single)

Inactive

Active

Text Button

Other Elements

Logo

Small

logo

Big

logo
Menubar
Checkboxes

Unchecked

Checked

Toggles

Monthly

Annualy

Switch

Off

On

Toggles
Social icon

Initial

Text Inputs

Input form

Initial

Active

Warning

Input text

Country code



Phone No

Search

Password

Password 2

Reset password?
Reset password?
Reset password?

Password 3

Reset password?
Reset password?
Reset password?

Input text 2

Join us Form

Message box

Text area 1

Text area 2

Other Elements

Icons-line-(32px)
Icons-fill-(32px)
Icons-fill-(32px)

Color Themes

Primary Color
Primary

Used as the primary color.

Colour Shades
Blue 9
Blue 8
Blue 7
Blue 6
Blue 5
Blue 4
Blue 3
Blue 2
Blue 1
Semantic Colors
Error
Warning
Success
Grayscale
Grey 11
Grey 10
Grey 9
Grey 8
Grey 7
Grey 6
Grey 5
Grey 4
Grey 3
Grey 2
Grey 1
Grey 0