While working on a complete UI redesign for SupportBee, we moved away from Bootstrap and decided to use Semantic UI. We loved Semantic UI because, besides being awesome, it offered UI components which helped us really speed up front-end development at SupportBee.
What is Semantic UI? It is a modern front-end development framework, just like Bootstrap and Foundation. According to their website, the goal of the framework is to empower designers and developers “by creating a language for sharing UI”.
Earlier, we were using Formtastic with Bootstrap, this setup was great a few years ago. The first natural step we took was to try and integrate Formtastic with Semantic, that did not workout very well because Formtastic adds a lot of extra markup to style its forms, and Semantic is very strict with markups.
So to keep our forms “simple”, we decided to move to Simple Form. The fact that Semantic is still young, these gems yet don’t offer native integrations with it. But, Simple Form has an easy to use Wrappers API to configure custom components.
Assuming that you have Semantic UI and Simple Form setup in your project, here is the Simple Form initializer to work with Semantic. Replace the code in “config/initializers/simple_form.rb”, with the code below.
Also published on https://pranavsingh.me/semantic-ui-simple-form-wrapper/
