A Matter of Semantic
06 Oct 2016Semantics: the study of the meanings of words and phrases in language
Semantics is one of those words that I’m fond of, and yet forget its definition from time to time. Revisting this word that makes me feel smart when I use it in a sentence, I find that it is indeed a very fitting part of the title of Semantic UI, a CSS framework that features syntax which does read more like a literal description of what you want to actually happen with your web design and function, rather than the frequently nonsemantic code statements of many structures within plain CSS, and even other popular CSS frameworks.
Easier To Write, But You Still Have To Write
Many great learning resources available at the Semantic UI website.
Like other UI frameworks, Semantic UI is not a magic lamp that you can rub whenever you want something cool to appear on your webpage without knowing more than a lick about HTML and CSS. You do need to have a general idea of how to use CSS classes, common structures, etc. And while using Semantic UI to make aesthetically pleasing web page elements such as clickable links and buttons is fairly straightforward, there is likely hours of new material/syntax to learn and understand before you can be up and running towards making a stylish site from top to bottom.
It’s taking a while, but it’s gonna be a big score, trust me.
This very thorough introduction is a strong resource to seemingly all of the primary constructs of Semantic UI. It can though, be difficult to take in and retain so much information at once, and it will take a fair number of hours to get through all of that material and absorb a good deal of it. If you stay the course and combine this resource with code examples from the Semantic UI website (info and code demos for the element “Button” is linked here as an example), you will be well equipped to use Semantic UI to tackle a web design project, and make it look pretty slick!
One aspect of Semantic UI’s class system that I really like is the ability to add “filler words” to the existing class names to create custom styles for certain elements on your webpage. For example, if you are creating a new Semantic UI menu, you can add any word before the “menu” in class ui menu (say you call it ui my menu instead of ui menu), and on your CSS style page, you can create custom stylings for that .ui.my.menu class while retaining the same functionality of the Semantic UI menu class.
Catchy, and Catching On
So Semantic UI is pretty cool to use, and lets you make cool looking stuff with just a moderate initial time investment, but is anyone actually using it to make popular web sites? It turns out that Snapchat uses Semantic, and while not the prettiest example, there are many others (here, and here are some nice ones) that demonstrate attractive and unique web designs through use of the Semantic UI framework. Thus far, my brief experience with Semantic UI has been eye-opening, and it seems like a good bet to draw upon Semantic for any websites I might make in the near future. At least until that magic lamp framework comes out.