INTRODUCTION OF SEMANTIC UI COMPONENT LIBRARY

All of us may aware that Bootstrap & Foundation are the current leaders among front-end development frameworks. Something better will come along shown by history and in this case that might not be so far away.

In this article, you will understand the framework landscape called Semantic UI. It is a modern front-end development framework, powered by LESS and JQuery and also it has a sleek, subtle, and flat design looks as it provides a lightweight user experience.

The goal of the framework is to empower designers and developers “by creating a language for sharing UI” it is according to Semantic Ui and they do this by leveraging a descriptive language for its classes and naming conventions.

Features:

Semantic UI is unique in two ways. First is the way they structure the framework. It uses five descriptive categories to define re-usable UI components.

· A UI Element is a basic building block. It can appear alone or in uniform groups. A button can be independent or put in a button group; It is an example of an Ui element.

· A UI Collection is a group of different elements that are interdependent. i.e., a web form can have buttons, inputs, checkboxes, icons, and so forth.

· A UI View represents a common piece of website content. For example, a feed or comments section.

· A UI module is a component with interactive JavaScript-based functionality. i.e. include dimmer, an accordion, modal, and so on.

· A UI Behavior is a component that can’t exist independently but is used to inject functionality into other components something like,  the Form Validation behavior provides validation functionality for the Form component is the example of Ui behavior.

Almost every component has types, states, and variations. I.e., some button component types include. Button with icon, standard button, animated button, and a button can be in the disabled, or loading state.

A button can vary in color & size or, and can be formatted as a basic social, fluid, toggle, and more. A great amount of flexibility in a component’s appearance this scheme will give you.

As far as Semantic UI concern it is not only well structured but also meaningful to name its classes but also in naming, defining, and describing its components and also this structure is much more semantic compared to that found in Bootstrap or Foundation.

The other unique thing about Semantic UI is that it provides some exclusive features and components not present in other frameworks. Feed and Comment in the UI Views components or Sidebar and Shape from the UI Modules can be the example of semantic Ui and also when interacting with ‘’Semantic UI’’ components you get real-time debug output.

There is some other strength of Semantic UI like it uses minimal & neutral styling, leaving customization open to you. Important and useful things it includes while leaving out additional features that you’ll probably never use and also the framework’s components are portable and self-contained so you can grab and use only those you need.

For more please visit:

Sponsor Ads

• Ad Space Available - Rent it Now!

Report this Page

Created on Feb 4th 2020 03:34. Viewed 283 times.

Share on APSense

Comments