A Step Up from Web Templates
06 Oct 2016Not all of us are CSS Ninjas. Or perhaps most of us are, with the help of a reference and unlimited time. With so many websites out there, people usually want their websties to stand out from the rest. Web design is difficult. Creating something nice vs something stellar requires a lot of time. A whole lot. Even more so with all out raw HTML/CSS. This is where UI Frameworks come in to help. A step up from when you have some time to make a website, but not lots of time to go the full blown custom route. Semantic UI in particular, makes it easy to create responsive websites quickly that would normally require many lines of raw css to achieve the equivalent functions.
Semantic UI
Learning Semantic UI is not too complex, thanks to its intuitive nature of class implementations. It can take care of all the proper formatting and spacing with a few lines of code. Like the example above. Want to make three buttons? Make a class called ui three buttons. Need a smaller button? Use ui small button, in your class declaration. Doing the equivalent in raw code woudl require changine font sizes, paddings and margins. The flexibility of objects created within Semantic makes most changes quick and easy to implement. It does take time to fully learn Semantic UI’s full capabilities, but I can see the return being well worth it in scenarios of where you don’t have much time to type out lines of HTML/CSS. And even if one does have time, they can still use Semantic UI. Element styles that are pre-implemented by UI Framework’s class definitions can be overriden by the inline style css with tag ‘!important’, just like in regular HTML/CSS, of where this declaration is given the highest priority.
Thoughts on other frameworks
Semantic UI was my first UI framework. Prior to that, I would use regular HTML/CSS to satisfy my applications. I have not fully learned what Semantic can do, due to its large library of capabilities, but the intuitive class definitions make it very easy to use. I assume other frameworks out there are much harder to learn, since Semantic’s power is just useful pre-implemented class defintions that can be applied nearly any html element with relative ease. Nonetheless, I feel that any well known framework out there, given the serious time commitment, can save web developers a huge amount of time. Time saving itself, is always a welcome benefit that everyone likes. From an engineering perspective, it is also less debugging, compared to if you had to write all the HTML/CSS lines yourself to get the same effect. In the case of Semantic UI, code is much more readable in the sense of where it is easily understood of what the elements are with a quick glance at the class definitions. It also makes future design changes much simpler to implement, like if you want your button to be bigger or smaller. Only one word needs to be changed, versus changing multiple numbers in the raw css declaration.