Semantic UI: a CSS framework for you and I

One of the first things I noticed when working with React was the choice of CSS framework used in existing React projects. There was an absence of the black nav bars with weighty Arial font and square turquoise buttons I was used to seeing with Bootstrap and Materialize. Instead, I saw the clean gray tables and menus of Semantic UI.

At first I wasn’t into the idea of using something other than Bootstrap for CSS. Bootstrap seems to be the standard for non-custom CSS, and in my experience, is way more flexible than other options like Materialize. I have always liked how a project can go from looking like Craigslist to looking like low-grade Twitter just by adding the Bootstrap CDN to the HTML file. After using it for a while I quickly discovered that it took a lot of effort to make something not look like a blog. Add to that, working in React takes away the ability to just throw Bootstrap on your main HTML file and expect your app to fall in line.

Though Bootstrap can be used with React, it didn’t take long for me to realize that components and CSS don’t always play nice together. Also, Bootstrap requires jQuery, and isn’t the whole point of React to be jQuery free? There are some third party work arounds out there like react-bootstrap and reactstrap that rectify this by implementing Bootstrap as React components. They basically work, but I find them to be clunky and more trouble than they are worth, especially when using React Router.

Enter Semantic UI. First of all, I think it looks great: it’s lightweight and simple. More importantly, it’s right in the sweet spot of providing a ton of built in features while maintaining enough flexibility so that you aren’t boxed in to one style. It has a lighter feel than Bootstrap, and has more dimension to it than Materialize. Unlike both of those, it is designed integrate seamlessly with React. There is no need to force CSS into your components to get the look you want, because Semantic can actually be written in React component syntax. To my point, here’s an example of a typical Bootstrap form:

<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

Now, a similar form in Semantic:

import React from 'react'
import { Button, Checkbox, Form } from 'semantic-ui-react'
const FormExampleForm = () => (
<Form>
<Form.Field>
<label>First Name</label>
<input placeholder='First Name' />
</Form.Field>
<Form.Field>
<label>Last Name</label>
<input placeholder='Last Name' />
</Form.Field>
<Form.Field>
<Checkbox label='I agree to the Terms and Conditions' />
</Form.Field>
<Button type='submit'>Submit</Button>
</Form>
)
export default FormExampleForm

Notice how almost every element in the Semantic form is a React component! That means you can do React-y things like pass props to a Semantic component. It may not seem like a big deal, but it is when you start using routes. Good luck doing that with Bootstrap. Also, the semantic components just look way cleaner than writing JSX all over the place.

Here’s an example of Semantic with React Router:

import { Link } from 'react-router-dom'
<Menu>
<Menu.Item as={Link} to='/home'>
Home
</Menu.Item>
</Menu>

Very simple. I googled how to do a similar thing in React Router with Bootstrap, and it looks like you’d need an additional react-router-bootstrap library to make it compatible. No thanks.

Semantic also has a glut of built-in bells and whistles. Here are some of my favorites:

  • Card: self contained block of a picture + description. Super useful. As far as I know, Bootstrap and Materialize don’t have anything like this built in. There are options for size, containers for text, etc.
From one of my pet projects
  • Animated Image Lists: fun spin on an unordered list. Marks each list item with a picture, and pops the item out on mouse over.
  • Buttons: there are so many options. You can have animated buttons, buttons with icons, and a litany of colors ready to use. More exciting than the standard btn btn-primary and btn btn-danger of Bootstrap.
The colors, Duke! THE COLORS!

Straightforward, super useful features, and no custom CSS needed. Stuff like this is especially helpful for those of use who value function over form. It allows us to make an aesthetically pleasing user friendly web app without having to spend all our time trying to position a box in CSS. Don’t get me wrong, Bootstrap and Materialize are great in their own right. There are a lot of great looking apps out there that use both of those. However, in my experience with React, it takes way less time to build an aesthetically pleasing page with Semantic than other CSS frameworks. Ease of use and variety of built-in style options makes Semantic UI my choice of framework for anything React.