When we talk about reusability in terms of web application framework then Ember has a significant role. It provides a lot of components which can be reused again in different scenarios inside the project. Along with reusability if we bring responsiveness in the picture then Semantic UI has no match. It is an open source HTML/CSS framework having self-explanatory syntax for building the user interface. It helps in building the responsive layouts which are written in the human-friendly HTML. Most of the class names are closer to normal spoken English words which seem to flow naturally and requires less to refer the documentation. For example, if we want to create a checkbox in semantic UI then we can simply use the following piece of code to create a checkbox.
The table is collections of data which are grouped together and arranged in the rows. Semantic UI offers a variety of table layouts for creating the customised table according to the requirement. The table follows responsive behaviour where they automatically stack their layouts according to the mobile devices and using the keyword, ‘tablet stackable’ they can stack themselves for the tablet which helps in avoiding the overflow of UI in the small devices.Semantic UI offers 6 types of “Collections” which are breadcrumb, form, grid, menu, message and table. However, in this article, we’ll keep our focus on two main collections which have been widely used in the entire project Table and Grid.
The grid is used to realign the space in the page. It divides the entire horizontal space into units called “columns” where all columns must specify their width as a proportion of the total available row width. The Semantic UI’s by default theme uses 16 columns means it divides the entire space into 16 indivisible proportionate columns.
Let’s illustrate how these grids and tables have been used in the Open Event Frontend project by taking example two scenarios where the tables and grid both have been used along with the code snippets for better understanding.
Scenario 1: Suppose we are creating a new event and we want to add the list of sessions along with their details for the event which will be visible to the user while navigating through the public page of the event. The page where we will be making changes will be visible only to the person who will be creating the event and authorised to add, remove and edit the sessions.
The page where we can create, modify and see the other details of the sessions look like this.
Fig. 1: Table used in Session in event/event_id/sessions page
As we can see in the above image that the entire data containing the session details of all, pending, accepted, confirmed and rejected sessions are wrapped around a row of 16 columns grid in the page. The table has been put on the grid which helps in managing the flow of the content. Also, after each column there is vertical spacing, added to separate each column, creating vertical rhythm.
To display all the data collection and make it readable, the ‘table’ component of the semantic UI has been used. The table used here belongs to the “ui very basic table” class of semantic UI. Since the table can stack their layout on mobile devices so we have added explicitly, ‘tablet stackable’ responsive behaviour to make the layout stackable on tablet devices as well since our application will be used on the tablets as well.
The code for the above UI looks like this.
<div class="row"> <div class="sixteen wide column"> <table class="ui tablet stackable very basic table"> <thead> <tr> <th>{{t 'State'}}</th> <th>{{t 'Title'}}</th> <th>{{t 'Speakers'}}</th> <th>{{t 'Track'}}</th> <th>{{t 'Short Abstract'}}</th> <th>{{t 'Submission Date'}}</th> <th>{{t 'Last Modified'}}</th> <th>{{t 'Email Sent'}}</th> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td> <div> <div class="ui green label">{{t 'Confirmed'}}</div> </div> </td> <td>Test Session</td> <td> <div class="ui ordered list"> <div class="item">Mario Behling</div> <div class="item">Test</div> </div> </td> <td>Blockchain</td> <td>Get an outlook of the awesome program of the weekend from track organizers and the content team.</td> <td>March 18, 2017 <br> 09:30 AM</td> <td>March 25, <br> 09:30 PM</td> <td>No</td> <td> <div class="ui vertical compact basic buttons"> {{#ui-popup content=(t 'View') class='ui icon button'}} <i class="unhide icon"></i> {{/ui-popup}} {{#ui-popup content=(t 'Edit') class='ui icon button'}} <i class="edit icon"></i> {{/ui-popup}} {{#ui-popup content=(t 'Delete') class='ui icon button'}} <i class="trash outline icon"></i> {{/ui-popup}} {{#ui-popup content=(t 'Browse edit history') class='ui icon button'}} <i class="history icon"></i> {{/ui-popup}} </div> </td> <td> <div class="ui vertical compact basic buttons"> {{#ui-dropdown class='ui icon bottom right pointing dropdown button'}} <i class="green checkmark icon"></i> <div class="menu"> <div class="item">{{t 'With email'}}</div> <div class="item">{{t 'Without email'}}</div> </div> {{/ui-dropdown}} {{#ui-dropdown class='ui icon bottom right pointing dropdown button'}} <i class="red remove icon"></i> <div class="menu"> <div class="item">{{t 'With email'}}</div> <div class="item">{{t 'Without email'}}</div> </div> {{/ui-dropdown}} </div> </td> </tr> </tbody> </table> </div>
Scenario 2: Suppose we want to purchase a ticket for an event. From the event page under the ticket section we selected the type and number of tickets required, entered the promotional code and clicked on “Order Now” button which redirects us to the page a new page which shows the event details, order summary and a form to be filled by the buyer for purchasing the ticket and making the payment. The order summary contains the details whaveh has been selected by the user before redirecting to the current page. The order summary table looks like this.
Fig. 2: The semantic UI component “table” used in order summary on purchase new ticket page
The table contains the details about the type of ticket, their individual price, their quantity which is chosen by the user and the total amount which needs to be paid.
The semantic UI class the table belongs to is “ui very basic tablet stackable table” which is same as the one we have used in the earlier scenario. The only difference which we have in this and above scenario is that in this one we have added a table header “Order Summary” as well using the semantic UI segment which is used to create the grouping of the content.
The code for the above table looks like this.
<div class="ui segments"> <div class="ui secondary segment"> <h3 class="weight-400">{{t 'Order Summary'}}</h3> </div> <table class="ui very basic tablet stackable table"> <thead> <tr> <th class="four wide">{{t 'Ticket Type'}}</th> <th class="four wide">{{t 'Price'}}</th> <th class="ui aligned two wide">{{t 'Fee'}}</th> <th class="one wide">{{t 'Quantity'}}</th> <th class="ui aligned two wide">{{t 'Subtotal'}}</th> </tr> </thead> <tbody> <tr> <td> <div class="ui small"> {{t 'Student/In'}} </div> </td> <td>$ {{number-format 4.0}}</td> <td>$ {{number-format 4.0}}</td> <td>1</td> <td> $ {{number-format 4.0}} </td> </tr> </tbody> <tfoot class="full-width"> <tr> <th></th> <th></th> <th></th> <th> <div class="ui aligned small primary icon"> {{t 'Order Total'}}: </div> </th> <th colspan="4"> <div class="ui aligned small primary icon"> $ {{number-format 4.0}} </div> </th> </tr> </tfoot> </table> </div>
To conclude this I can say that these are only two scenarios which have been taken as examples to explain how open event frontend uses semantic UI components to incorporate responsiveness in the design, but there are a lot more such examples or scenarios where these components have been used with little variation in the code. These components proved to be very handy and useful when it comes to consistency and readability along with responsiveness to the design.
Reference: The link to the code for fig. 1 and fig.2