A new RIMdev on Semantic-ui

So you may have noticed a new look for the RIMdev blog ;) Our blog will always be a work in progress and a chance to try new things. Version 2 showcases semantic-ui 2.2 while being powered by jekyll 3.3 on Github pages.

Getting started

You can get started with semantic-ui a few ways. A straight download, as a Node npm package with gulp, or the CDN release.

Each has its own benefits. Both download and npm package allow you to pick and choose the components your going to use. Not knowing how the switch to semantic-ui would go, or which components were to be included, we opted for the CDN release (look in recipes).

And we were up and running.

Semantic-ui is really well documented, and well suited for rapid app development. This new release has a great feature set and transitions that really leave Bootstrap behind. Take a look at the kitchen sink for the entire overview.

What we liked

Here are some of the features we incorporated in the new RIMdev blog.

Built-in fonts

A complete port of Dave Gandy’sFont Awesome (v4.5.6 in semantic-ui’s 2.2 release). Fast implementation using icon font awesome instead of fa fa-font-awesome. A win for ease of implementation and not having a second CDN call.

All of the FA states are supported; stacked, rotate, etc. Semantic-ui has added their own twists with circular, bordered, fitted, corner icons and groups!

Sidebar

In our 1.0, it held a static position on the left, blurred when you were reading a post. We’ve pushed it away entirely, and now blur the post when you’re browsing the sidebar. Blurring was simple to add the the main pusher class="pusher dimmable blurring" and triggered on the .sidebar() event.

Update 2017.01.18: While blurring was a nice effect, performance suffered greatly when combined with the other semantic-ui effects. Blurring has been removed.

Simpler, when you need it grid

Semantic-ui sets itself apart from other, more verbose, frameworks with it’s grid, container, and segment system. Our post layout is simple and we were able to establish a responsive layout with this simple structure using vertical segment, text-container, and stackable. Some of the more popular frameworks would have tripled this easily.