Semantic UI

05 Oct 2016

CSS and UI Frameworks

CSS or cascading style sheets, are used in tandem with html to create visually appealing webpages. CSS is extremely powerful, and lets you customize every aspect of your webpage. Large websites often need thousands of lines of CSS to get everything to look like they want. This is where UI Frameworks come into play. UI frameworks are written in CSS and add various classes for styling. For example if you’re using Bootstrap, and you want to make one of your links look like a button. All you have to do is give it the “btn” class and it will look like a button. Or if you wanted to be button to be smaller you could say “btn btn-sm”. Popular UI frameworks today are responsible for the uniform and clean look of most modern websites.

Semantic UI

Semantic UI aims to be more “Human Readable”, than other frameworks. “The only dogma from this framework: everything arbitrary is mutable.” This is a quote from the Semantic UI website. What it means is that most adjectives, like a color or size, can apply to anything that makes sense. This is great for the user because they don’t have to memorize a lot of different classes. Instead of typing “btn btn-large btn-danger”, you can say “large red button”. Even if you know nothing about html or CSS, you know what “large red button” means. Now if you want a blue Facebook icon for you site, just add “blue Facebook icon” to your link element. These adjectives can even apply to collections of elements. If you want all of the social media links in your menu to be grey. You can declare you menu with “ui grey menu” and all the elements inside will be grey. If you want something with a different color in your menu, you can simply override the color change by adding a color directly to the element. Semantic UI is relatively easy to learn, and is highly customizable. The only other framework I have used is Bootstrap, and I can say that I definitely prefer Semantic UI.