Readyui - Developers Guide

Hi, Welcome to Readyui’s developer guide

Getting started

At first download the main file from your dashboard.
Then copy font & image file to your required folder.
Download css file from (copy-paste tool) page.
Use this following HTML code as your starter HTML, then add your blocks in the body.


    <!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

Glider.js

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	Production ready assets
Menu 2	18	28	Production ready assets
Small Heading	20	30	Production ready assets

Next Button (Double)

Inactive

Active left

Active right

Next Button (single)

Inactive

Active

Text Button

Inactive

Other Elements

Logo

Small

Big

Menubar

Checkboxes

Unchecked

Checked

Text Inputs

Input form

Initial

Active

Warning

Input text

Headline text

Country code

phone number

Phone No

Password

Password 2

Password

Remember me

Reset password?

Password

Remember me

Reset password?

Password

Remember me

Reset password?

Password 3

Your email address

Remember me

Reset password?

Your email address

Remember me

Reset password?

Your email address

Remember me

Reset password?

Input text 2

Your email address

Join us Form

Message box

Text area 1

Text area 2

Color Themes

Primary Color

Primary

Used as the primary color.

Getting started

At first download the main file from your dashboard.

Then copy font & image file to your required folder.

Download css file from (copy-paste tool) page.

Use this following HTML code as your starter HTML, then add your blocks in the body.

Resources

SVG icons

Image

Slider

Style Guide

Text Styles

Heading text

Paragraph text

Button/other text

Buttons

Fill Button

Stroke Button

Next Button (Double)

Next Button (single)

Text Button

Other Elements

Logo

Menubar

Checkboxes

Toggles

Switch

Toggles

Social icon

Text Inputs

Message box

Other Elements

Icons-line-(32px)

Icons-fill-(32px)

Icons-fill-(32px)

Color Themes

Primary Color

Primary

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