Welcome to CUI

CUI is high performance Web Page UI framework, which focus on made a standard UI/UX solution with consistent components. The interface of this UI framework are only html attruibte and class name. CUI is using css to defensive most of UI status , and will only offensive with js when it's nessary . it's seo friendly, even without js, the delivered page could have pefect FCP which exactly same before actived by JS.

the regular color we used

Color Solution

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

0 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.

1 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.

2 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;

3 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.

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

the basic typograph

Typographn

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.

$font-size-base: 1rem;

The increase/decrease rate is 0.618

level 1 title

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

level 2 title

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

level 3 title

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

level 4 title

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

level 5 title

level5: f5 = $font-size-base

level 6 title

level6: f6 = f7 + $g0 / 2

level 7 title

level7: f7 = 1 * 0.618

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

dropdown menu