Semantic UI: A Lightweight Alternative to Bootstrap
Taking a Look at Semantic UI: A Lightweight Alternative to Bootstrap
If you like minimalism and the GitHub aesthetic, give it a looksemantic-ui.com’s intro bannerBootstrap has been the go-to CSS framework for quite some time. It works well, has a robust set of components, and lets you build sites quickly.Its grid system has been responsible for easing developers into responsive design practices for years, and that experience keeps bringing them back for future projects.Bootstrap can also be a bit boring — both to write, and to look at. A lot of times, you can tell whether a site was written using BS at a glance and this has led to a somewhat uniform look to a lot of pages on the internet.I’ve been working on some hobby projects recently and resolved to not use Bootstrap for any of them.Instead, I decided to use an alternate CSS framework for each project — either generic or specific to the JS framework I was working with — which led me to Semantic UI, and specifically, its React implementation.Semantic UI is clean and minimalist. I enjoy its GitHub-esque aesthetic. Most importantly, it’s something different, but not too different from Bootstrap — it shares a lot of the same concepts (a grid system, similar core UI elements, etc.).If you’re tired of making “just another Bootstrap site,” take a look at what Semantic UI has to offer.At a GlanceFirst, some buttons. Who doesn’t love buttons!All the colors of the rainbowThis is from a showcase of the framework’s core UI components. Crisp, clear, yet still familiar to those used to working with Bootstrap.Now, how about some sample site layouts. First, with a simple navbar:Pretty typical stuffSecond, with more of a “hero” layout:We’ve all seen sites like this beforeThere’s a showcase for these (and additional) layouts as well.These samples cover the basics and should give you a good impression of the look and feel of the framework. Now, if it’s caught your eye, we can dig into its primary features and what the framework is actually like, to use.Core ComponentsFirst off, it has a robust grid system that’s well documented.Semantic’s system uses a 16-column base (although this can be changed) instead of Bootstrap’s 12. Once learning the class syntax, it’s easy and familiar to work with for those coming from a BS background.It also has all the other core components you’d expect:ButtonsInputs (of varying types)CardsModalsAccordionsAnd so on (refer to the list on the left)It also has some nice UI flares here and there, like ribbon labels:So chic!I recommend taking the time to explore exactly what Semantic has to offer. Familiar concepts, learn some new syntax, and you’re able to quickly make something that’s both functional and visually appealing.DownsidesBecause of Semantic’s minimalist principles, it isn’t as robust as Bootstrap. When working with it, I quickly found that some “convenience classes” were missing.For example, it comes with a pretty appealing color palette and I wanted to apply one of its colors to basic text but found that it isn’t possible out of the box.There’s an issue on GitHub showing a lot of demand for such a feature, but unfortunately, the framework’s author has simply ruled it out.After my experience tinkering on projects while using the framework, I decided that I would probably want to create my own set of supporting convenience classes to fill in some of these gaps if I was going to be using it a lot in the future — easy enough to do.IntegrationsIt can be used standalone, but my first experience with this framework was via its React implementation called Semantic UI React. I found that it did things “the React way” re: JSX-style components and use of props. Right now, it’s my go-to to use when doing something quick with React.It also has some other integrations including Meteor and Ember, with Angular bindings “in development, but available for some components”.If you would like an Angular alternative to Bootstrap, I recommend checking out Clarity Design by VMware instead.