in css semantic-ui theNewHotness ~ read.
Working with Semantic-ui

Working with Semantic-ui

So I recently heard about semantic ui on the changelog podcast. It had a ton of options but was still such a young project that I originally hesitated using it in production code. It's still in Aplha (yes, I'm giving into my cargo-culting tendencies here...), but I finally have a small project that I can try it out on.

Sorry Bootstrap… Can we still be friends?

Getting to know the Documentation

One of the things I like most about semantic UI (I am hesitating calling it SUI for obvious reasons) is that the basic divisions of the documentation. It approaches it's framework from the point of view of a linguist. Essentially, the author is simply trying to describe elements on the page using adjectives and nouns to describe the thing, its state (e.g. "selected") and/or a particular variation of the item (e.g. a blue ui button). The project also prefers using multiple classes (like "blue ui button" instead of "btn-rounded-blue" which is a habit I often get into.

Get to the grid

Initially the grid was a bit difficult to get used to after having developed muscle memory for bootstrap style grids. However, after a bit of work, I rather like writing .ui.three.column.grid at the top and just leaving everything else in a <div class="column" />

A Word on Widgets

Most of the widgets were pretty straightforward. It took a minute to get used to adding additional settings. But after some work, this became second nature as well.

Better to be different

At the end of the day, I like the way that the classes are structured. The look is different and makes a good addition to a site that doesn't need to be all bootstrapped out. I'll keep watching the project to see how things shape up in the future. Mayne I'll even work in a tutorial.