For web development projects, you must have experience using different open source plugins and frontend frameworks. Although Ruby on Rails has always been my main choice for web frameworks, you also need an interface framework to serve your responsive HTML layout and standard components.
Frame interface
Bootstrap 4
It is a popular option and has grown tremendously since the day after Twitter released it in Github for public use. Grid systems, standard components, and javascript integration are typical for all web applications. It saves you a lot of time when bootstrapping your new project.
Semantic UI
With Semantic, it talks more about syntax and word choice for classes that are close to human language. I find this concept close to what we are doing with Ruby. This is the official definition:
Semantic UI considers words and classes as interchangeable concepts. Classes use syntax from natural languages such as noun / modifier relationships, word order, and plural to connect concepts intuitively.
According to this document, the latest version is 2.4. To show you an example of creating an input box that allows people to enter the URL with the default label (http: //) in front. In Bootstrap terminology, it is called input group and in Semantic term, it is called labeled input.
|
1 2 3 4 5 6 7 8 |
# 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 two pieces of code from two different frames are basically created with the same output. However, you can see that the Semantic UI's syntax is cleaner and more natural than Bootstrap. There are other great components that do not exist in the original Bootstrap.
Divider (Divider)
Divide content between grids:
Horizontal Divider (Horizontal Divider)
* Semantic UI – Divider *
Form Components
Dropdown
Semantic UI includes FontAwgie Standard 5.0 icons. You can pre-add each selected item with an icon or image. Your dropdown list can be either (Country) or multiple selections (Send Receipt To).
Checkbox
Checkboxes also have different types as illustrated in the code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* 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 used to make room for content will soon appear in the layout. This is useful when you want to delay loading certain content but want to preserve the layout.
Reveal
A disclosure displays additional content in place of the previous content when activated.
Step
A step shows the complete status of an activity in a series of activities
Progress
A progress shows the progress of a task.
Rating
A rating shows the user's interest in the content.
These are just a few examples of features inherent in Semantic UI. You should check the official website for more info.
Integrate with Rails
There is a Semantic user interface for Sass ready to use. Execute the gem 'semantic-ui-sass' gem in your Gemfile and run the command bundle install
Remember to rename your application.css to application.css.scss. For details check the documentation.
Semantic UI provides similar component sets and layout options with additional features and explicit syntax not available in Bootstrap. I admit that Bootstrap is more mature and has a greater support for external plugins (like date time pickers). I recommend you try this out in your next prototype or project.