When I was first introduced to the SemanticUI framework I was extremely intimidated - nothing made sense! The various elements and seemingly endless customization options were overwhelming and suffocating. To put this into perspective, reading the SemanticUI documentation is the software engineer’s version of walking into a seriously decked out craft store (on steroids). Interesting for some, but nauseating for others! But rest assured if you belong to the latter group, I’m your guy! I’ve spent the last week struggling through the documentation and hours of video lectures trying to figure out what the big idea is. Below I’ve included three things that have helped me to better understand SemanticUI and hopefully will save you time on your SemanticUI journey.
As I stated above the customizable options using SemanticUI are endless and overwhelming. But don’t fret, the documentation for the SemanticUI framework is BY FAR the most aesthetically pleasing, user friendly documentation that I have ever read. Yes, there are a lot of options to explore but the design hopefully should make this exploration enjoyable and encouraging. Take a look for yourself here. Now, I’m not going to point any fingers, but I’ve certainly run into some coding-documentation that looks fresh out of the 90’s and I’m sure you have too. I firmly believe that design compromisations impede one’s motivation to learn and explore features of a language. Poor design adds unnecessary stress - and eye strain! So befittingly, a design framework such as SemanticUI has an extremely aesthetically pleasing web presence.
Have you ever seen the movie ‘Inception’ starring Leonardo Di Caprio? Well, instead of nested dreams SemanticUI allows us to nest ‘div’ statements! It’s Div-ception! At first this surprised me, I thought that ‘div’ was only used to block out regions of the page, turns out that with SemanticUI you can overlap sections of elements to create highly customizable web page elements. You can create a container, wrap it around a grid, then even wrap a menu. This part really confused me and took me a moment to understand. Don’t worry and don’t panic, nested ‘div’ are totally normal.
Say you need to add some graphics to your web page, whether it be a company logo, shopping cart icon, or even chess piece icons SemanticUI has got you covered. Visit this page to see for yourself. The best part: you don’t need to download some obscure third-party software package and you definitely don’t need to be a pro with Adobe photoshop because SemanticUI takes care of it behind the scenes. You literally just need to declare a SemanticUI class followed by the keyword of whatever icon you need. These icons are generally verbatim and self explanatory. For example the keyword for a search icon is…(drumroll): search icon. It’s almost too good to be true. This is probably the closest thing to normal english as coding gets.
All in all, I hope you learned something from this short essay. SemanticUI did take me a while to understand. Most likely, your first experience with SemanticUI will be overwhelming. Take it slow, read the-very aesthetically pleasing-documentation, and remember to use ‘div’s (Div-ception!). With that, you should be on your way to become a skilled web page designer!