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.
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).
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.
Here are some of the features we incorporated in the new RIMdev blog.
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
corner icons and groups!
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
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
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>
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!