Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website looks more amazing. It uses a class to add CSS to the elements.
Why Semantic UI?
Semantic UI is becoming extremely popular due to the following reasons:
•It offers a variety of components that can be used easily.
•It is open source so has good community support.
•It is easy to use and learn.
•It provides an elegant look and makes UI more interactive with minimal effort.
•It unpacks a variety of themes and CSS, JavaScript, and font files.
•It provides a lightweight user experience.
Installing Semantic UI in React
Semantic UI can be installed in two ways:
1. Package Manager
Yarn or NPM can be used to install React components. Run the following command in terminal.
yarn add semantic-ui-react semantic-ui-css
//Or NPM
npm install semantic-ui-react semantic-ui-css
Once the app is installed, import the minified CSS file into the entry file:
import ‘semantic-ui-css/semantic.min.css’;
Semantic UI’s CSS package is automatically synchronized with the main repository to provide a lightweight CSS version of Semantic UI.
2. CDN (no bundler)
Despite CDN being the simplest method to get started, I still recommend using package manager.
Follow React’s guide to prepare your environment. After React is initialized add this script tag in the body tag inside index.html.
Index.html
<body>
<link async rel=”stylesheet” href=” https : // cdn . jsdelivr . net / npm /semantic -ui @ 2 /dist /semantic . min . css”/ >
<script src=”https : //cdn . jsdelivr . net / npm /semantic -ui – react / dist /umd /semantic – ui – react . min . js” > </ script>
</body>
What Can You Do with Semantic-UI?
The next question that arises in your mind immediately is what you can do with Semantic UI. Of course, a high-end responsive user interface is possible with this tool. Using this application, you can create the front-end design of a website with some flavors of HTML codes that enhance the behavior of the web elements. You can build sophisticated websites using the built-in functionalities available with this tool. Professionals with HTML and JavaScript coding knowledge will be able to handle this tool optimally. The newbie requires some special skills to work with this program. Every web element is associated with few HTML codes to build a friendly interface for a website.
Using this framework tool, you can develop beautiful websites for your requirements. You can add Semantic UI with React app that helps you to save the edited component to use them directly on your user interface design. The web components in the Semantic UI React contain unique properties and features. You can obtain enhanced functionalities using Semantic UI React. It fastens the design time and places the web components on the user interface.
Features
Semantic UI is unique in two ways. First is the way the framework is structured. 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. For example, a button can be independent or put in a button group.
•A UI Collection is a group of different kinds of elements that are interdependent. For example, 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. Examples include an accordion, dimmer, modal, and so on.
•A UI behavior is a component that can’t exist independently, but instead is used to inject functionality into other components. For example, the Form Validation behavior provide validation functionality for the Form component.
Conclusion
Semantic UI is an open source alternative which offers beautiful interface features and human-readable HTML/CSS.
Looking over some of the demo layouts, Semantic UI reminds me of Bootstrap’s design style but with an easier syntax. It’s definitely one of the best frontend frameworks you’ve likely never heard about – and it deserves a whole lot more attention from the design/dev community.
