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’s Font 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
Clicking on , here or in the menu, pulls our new 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.
{: .ui.teal.message} 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.
<!DOCTYPE html>
<html>
<body>
<div class="ui sidebar very wide vertical"></div>
<div class="pusher dimmable blurring">
<div class="ui vertical masthead segment"></div>
<div class="ui borderless large top fixed menu"></div>
<div class="ui borderless large secondary menu"></div>
<div class="ui vertical stripe segment">
<div class="ui middle aligned stackable text container">
<article></article>
<div class="articles-related">
<div class="ui three stackable cards"></div>
</div>
</div>
</div>
<footer class="ui vertical segment"></footer>
</div>
</body>
</html>
Our blog is open-source, if you’re curious about more (like the horror that is liquid #neccessaryEvil), take a look.
Summary
In short, semantic-ui was a big win for our blog. It’s fast, flexible, and scary to think how nice 3.0 will be!
