Using Semantic UI

So first of what is Semantic UI? It is a framework used in designing responsive layouts using HTML that incorporates a lot of themes. By using this framework you forego creating components from scratch. By using CSS variables we can also change the way components differ from the default theme. Semantic Ui has 12 UI Elements, 11 UI Modules, 6 UI Collections, and 4 UI views.

How to use Semantic UI in your project

Making a Menu Bar

Using the class ui stackable inverted menu the background color will be black and makes it mobile friendly.

That code amounts to a nice menu bar that is clean and reusable and looks like…

Making a Form

A form displayed a set of related user input fields in a structured way. The code below shows the syntax for creating a simple form using semantic UI as well as the output displayed on the browser. I will show you a code example

If you only want a first and last name, username, and password you would close the able code with a form tag. If you’d like to add some terms and agreements to accept you can add the following.

Both snippets of the above code give you a form that looks like the following…




Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store