How to cut the size of Semantic-UI

Semantic-UI is comfortable to work with, however, you may hesitate to use it in production because of its relatively huge size.

We understand that, so we create this tutorial.

The simplest way to reduce the size of Semantic-UI is to use only the specific CSS file of the component you need. For example, if you only need those fancy buttons of Semantic-UI, then you can only add the button.min.css to your HTML <head> part.

Building websites with Semantic-UI from scratch

If you come here, we suppose you know what HTML and CSS are and have heard of Semantic-UI, that’s enough and let’s get started!

If you do not want to delve into node, npm, gulp or something like that, you can simply put the prebuilt CSS and JavaScript files into your HTML header to start using Semantic-UI immediately, almost the same way with jQuery.

Introducing Semantic-UI-Forest

The goal of Semantic UI is to narrow the divide between how we create meaning personally, through language, and how we construct meaning for computers.

Semantic-UI is a UI component framework based around useful principles from natural language. As its motto said, “User interface is the language of the web.” It allows developers to build beautiful websites fast, with concise HTML, intuitive JavaScript, and simplified debugging, helping make front-end development a delightful experience.

Key features of Semantic-UI: