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
You can either copy the files to your project in your .css files or .js files similar to Bootstrap. A simpler way is to download the Semantic file from semantic-us.com and include that file in your project folder.
Making a Menu Bar
A menu bar is great for navigating your website, you can easily jump to different pages for example a home page or a login page. Creating a menu bar with semantic is quite simple, I will show you a code sample.
That code amounts to a nice menu bar that is clean and reusable and looks like…
Making a Form
Forms are great for obtaining information from a user to send to the database. For example, if you have a new user and they would like to sign up for your website you could ask them for their first and last name, a username, and password.
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…
Conclusion
There are many neat things you can do with semantic UI which I will show in another post. But even with just the two examples I showed you can customize them a lot from color to how they work with loading on your website. If you go to semantic website, you can see a lot of what they have to offer.
