jQuery CUI

Color Solution the regular color we used

The default color matching uses the standard foreground and background color matching, and the theme color uses a two-color color matching mode

major color is the majority color for the whole system.
[Use case] link, regular button and major element baseical color, welcome/header/footer basical background color.

minor color is applied in the context which is inverted color for highlight infomation.
[Use case] date update, info update, changes, minor, and info wanna user pay attention on it.

gray color: the middle color between foreground and background which is about secondary elements.
[Use case] border color; sub, sup title color; the disable color; tips;

safe color is applied in the context which about fulfillment, confident and benefit.
[Use case] success info, high rank and any infomation which is good to know and positive element.

danger color is applied in the context which about seriousness.
[Use case] error info, low rank, dangerous behavior, something unexpected and negtive element.

typograph the basic typograph

The default web font-size is 16px, we consider 16px as a basic measurement And we use 0.618 as the basic increase/decrease rate. font level, title level, padding, margin are all accroding to the default setting above.

level 1 title

level 2 title

level 3 title

level 4 title

level 5 title

level 6 title

level 7 title

$font-size-base: 1rem;

The increase/decrease rate is 0.618

level1: f1 = f3 / 0.618 = f3 + f3 * 0.618

level2: f2 = (f1 - f3) * 0.382 + f3

level3: f3 = f5 / 0.618 = f5 + f5 * 0.618

level4: f4 = f5 + (f3-f5) * 0.382

level5: f5 = $font-size-base

level6: f6 = f7 + $g0 / 2

level7: f7 = 1 * 0.618

Buttons the basic button style

Tips the tip style

Input new Input style

Textbox new textbox style

normal textbox select

normal textbox input

large textbox select

large textbox input

textbox textarea

Skeleton new skeleton style

Loading

carousel new carousel style

0

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

View new view style

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

Dialog the dialog plugin

Dialog Default

Dialog Fullscreen

Dialog Dropdown

Collapse the collapse plugin

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

collapsed

hidden

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

dropdown menu

Tabs new tabs style