Zui Introduction to the framework of the previous paragraph

I. Description based on bootstrap customization

Zui inherits most of the underlying content from Bootstrap 3, but some components are customized and modified for different purposes than bootstrap. These changes include:

• Remove the limitations of some plug-ins, add some applicable features, such as PopOver popup content can specify the existing label content, modal dialog can automatically use the IFRAME pop up the entire page content, etc.;
• Added useful view components, including cards, comments, lists, articles, dashboards, Kanban, etc.
• Added a few JavaScript components, including drag and drop, sorting, Lightbox preview, local storage, image clipping, etc.
• Integrated with some useful third-party components, including cookies, hotkey, chosen, Kindeditor, Chartjs, DateTimePicker and so on, and these component styles have been rewritten, more unified style;
• Added a color table and a new theme template, at least one configuration item to change the colors theme;
• Modified the default font configuration, including the font set and font size used;
• Replaced the default font icon, the Fontawesome icon set based on the removal of some icons at the same time added some new icons, the wording is more simple than the fontawesome;
• The default style for most components does not require additional classes that contain ' default ', such as class= ' btn Btn-default ', and ' panel-default ' is not required in Zui;
• Added some auxiliary classes, such as text background and highlighting;
• Added some optional styles, such as scroll bars, etc.
• ......

Choose Zui or Bootstrap?

Bootstrap is a very good front-end framework, but it is often not enough to build large-scale applications. If Bootstrap is able to fully meet your project, it is recommended to use bootstrap, if you need more, it is recommended to use Zui. Notable reasons for using Zui are as follows:

• Most of the writing methods inherit bootstrap, from bootstrap convenient to Zui, the learning cost is low, and the wording is more concise;
• Zui offers more feature options, even for third-party components that provide unified styling and theme support;
• Zui adopts the core + independent components on-demand loading mechanism, even if the content is richer, will also control the core content after packaging size, the general CSS does not exceed 150k (currently 140k, Lite 100k), JS does not exceed 100k (currently 84k, Lite version 40k), Lite contains most of the features , but smaller in size. Non-core independent component content is loaded on demand, and custom compilation is recommended;
• Zui from the actual project (including Zen, Cicada and so on), practice proved its effectiveness, all in order to quickly build your application;
• Some exciting new content is under development ...

Second, global style sheet

Zui uses normalize to reset the style so as to ensure a consistent experience across all browsers.

Why use Normalize.css

If an HTML document without any style settings is opened by the browser, the browser uses the default style to render the document, making it easier to read the text and differentiate between the different content in the document.

But when we need to apply our own style, the default style of the browser will cause interference, and more importantly, the default style of different browsers is not the same, which makes the style we want the final rendering effect becomes uncontrolled. Normalize.cssIt's about solving this problem and doing it better.

Related Resources

• NORMALIZE.CSS Project Address
• NORMALIZE.CSS Github Project Address

Iii. Agreement

UI element types and definitions

Zui contains a wide variety of interface elements (or controls), such as buttons, lists, tables, and even a set of elements that are used in specific scenarios, such as a list of comments, as well as in Zui. In order to better showcase our design concepts, these elements are grouped into the following four categories:

• Basic controls: Basic interface units for building Web applications, such as buttons, text labels, input boxes, and so on.
• Component: A more complex interface unit that is composed of more than one basic control. such as forms, menus, tables, and so on.
• JavaScript components: These components are used in JavaScript for normal use. Some JavaScript components require manual calls to enable.
• Views: A view is a combination of basic controls and components used to present common content on a site, such as a comment view and an article Preview List view.

Most of the interface elements in Zui have different subtypes, states, and parameters. The definitions for types, states, and parameters are as follows:

• Type: Different types of interface units, such as buttons with main buttons, secondary buttons and dangerous buttons, navigation menu types are common navigation and top fixed navigation. You should specify only one type for the same interface element at any time, and the default type does not have to be specified.
• Status: The same interface unit allows you to switch between different states, such as buttons with normal and unavailable states, drop-down menus to expand and collapse, menu items to be checked and unchecked, and so on. Allows multiple states to be superimposed in the same interface element.
• Parameters: Parameters as the interface unit how to provide the basis, such as whether the table is interlaced, whether to enable mouse hover and so on. You can specify multiple parameters at the same time.

General Status and parameters

Many states and parameters have consistent usage and the same meaning in different controls or components. In Zui, these generic states and parameters have a fixed name (CSS class name).

Common common states are as follows:

name	Description	common use Objects
.active	Indicates that the control or its child item has been activated.	Navigation entries, drop-down menu entries, menu lists, buttons that can be activated in a button group, and so on.
.hover	Indicates that the control is in a mouse-over state, relative to the selector in the CSS :hover .	A small portion of the control that requires JavaScript processing.
.focus	Indicates that the control is in a mouse-over state, relative to the selector in the CSS :focus .	A small portion of the control that requires JavaScript processing.
.disabled	Indicates that the control is in an unusable state and is typically used with DOM properties disabled="disabled" .	Buttons, you can click menu items, hyperlinks, table elements, and so on.
.in	The animation process used to control the display or disappearance of a control. Indicates that the control is ready to complete the CSS animation and is fully displayed when the control is displayed, indicating that the control is ready to perform the control vanishing animation when the control disappears, or when used with the state, which .collapse represents the fully expanded state.	tabs, drop-down menus, etc.
.open	Indicates that the hidden content has been fully displayed.	drop-down menus, etc.
.collapse	Indicates that the current component can be collapsed or expanded. .inwhen present with a state, indicates that the component has been expanded without this state.	Responsive navigation, folding menus, and more.
.collapsing	Indicates that the current component is in an animated process that is collapsing or expanding.	Responsive navigation, folding menus, and more.

Common general parameters are as follows:

name	Description	common use Objects
.bordered	Enables the component to have a border style.	Forms and so on.
.borderless	Removes the border style from the control.	Forms and so on.
.inverse	Indicates that the component uses a style relative to the default color style.	Navigation and so on.
.fixed	Indicates that the current component location is fixed and is not affected by the page interaction.
.with-icon	Indicates that the current component can display an extra icon when the content is displayed.	Message boxes, and so on.
.with-padding	Indicates that the current component content display area contains more margins.

Naming and naming principles for interface elements

• The naming of all controls, components, views, modules, and behaviors should use the most common names and accurately reflect the functionality of the interface elements. For example, menus should be named menu instead of navigation.
• The names of types, states, and parameters are prefixed with the element name plus the type (or state and parameter name), separated by spacers, such as a fixed-position menu .menu-fixed . You can omit a prefix for a common state or parameter, such as if a menu item is active, just name it and .active not name it .menu-active .
• The naming of all controls, components, views, modules, and behaviors is not prefixed with the functionality of the current element and additional naming, such as a navigation menu named .nav , without adding additional names to .ui.nav or .zui.nav .

Zui Introduction to the framework of the previous paragraph