Semantic UI for your next Ruby on Rails application
For web development projects, you must have experienced using different open sourced plugins and frontend frameworks. While Ruby on Rails is always my primary choice of web framework, you also need a frontend framework to cater your responsive HTML layout and standard components.
Frontend Framework
Bootstrap 4
It is a popular choice and I love this framework a lot. It has evolved a lot of since the date after Twitter released it in Github for public use. The grid system, the standard components and the javascript integrations are typical for all web applications. It saves you a lot of time when bootstrapping your new project. Having said that, from time to time I like to test out new framework to keep myself up-to-date and keep my option open for the next client’s project.
Semantic UI
Semantic UI is my latest testing subject. There are always different reasons for a new framework to come out. And for Semantic, it’s more about the syntax and the choice of words for the classes that are closer to human languages. I do find this concept closer to what we are doing with Ruby. This is the official “definition”:
Semantic UI treats words and classes as exchangeable concepts.
Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively.
(sourced from https://semantic-ui.com)
As of this writing, the latest version is 2.4. To show you an example of creating a input box that allows people to type in the URL with a default label (http://) in front. In Bootstrap term, it’s called input group and in Semantic term, it’s called labeled input.
# Bootstrap
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">http://</span>
</div>
<input type="text" class="form-control" placeholder="medium.com">
</div>These 2 code snippets from the 2 different frameworks produced basically the same output. However, you can see that the syntax of Semantic UI is neat and more natural compared to Bootstrap.
There are other great components that do not exist in Bootstrap natively.
Divider
Dividing the content between the grid
Horizontal Divider
Form Components
Dropdown
Semantic UI includes FontAwesome Standard 5.0 icons. You can prepend each selection item with a icon or an image. Your dropdown can either be a single (Country) or multiple (Send Receipt To) select.
Checkbox
Checkbox also comes in various from as illustrated in my code snippet.
/* Regular Checkbox */
<div class="ui checkbox">
<input type="checkbox" name="promotion" class="hidden" checked>
<label>Please send me promotion material.</label>
</div>/* Slider Checkbox */
<div class="ui slider checkbox">
<input type="checkbox" name="data_privacy" class="hidden">
<label>I accept your termsand conditions</label>
</div>/* Toggle Checkbox */
<div class="ui toggle checkbox">
<input type="checkbox" name="gift" class="hidden">
<label>Do not include a receipt in the package</label>
</div>
Placeholder
A placeholder is used to reserve space for content that will soon appear in a layout. This is useful when you want to delay the loading of certain contents but want to reserve the layout.
Reveal
A reveal displays additional content in place of previous content when activated.
Step
A step shows the completion status of an activity in a series of activities
Progress
A progress bar shows the progression of a task.
Rating
A rating indicates user interest in content.
Here are only a few examples of features that comes natively in Semantic UI. You should check out the official website for more.
Integration with Rails
There is a Semantic UI for Sass gem ready for use. Do a gem 'semantic-ui-sass' in your Gemfile and run bundle install.
Remember to rename your application.css to application.css.scss. For detail check out the documentation.
Semantic UI offers similar sets of components and layout options with additional features and clean syntax that are not available in Bootstrap. I do admit that Bootstrap is more mature and has greater supports in terms of external plugins (like date time picker). I do recommend you should try this out in your next prototype or project. At least we are.
Enjoy!
