![]() ![]() Both of them come with unique features and benefits that meet certain requirements. It is well-known that Bootstrap and Semantic UI are widespread among the developers’ community. Let’s see which is better for your next project: Semantic UI vs Bootstrap. Often, there prevails a confusion to choose between frameworks as there are numerous frameworks available. 1 and fig.Developing a website or web app needs the support of a perfect framework for that specific project. These components proved to be very handy and useful when it comes to consistency and readability along with responsiveness to the design. 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. SEMANTIC UI RESPONSIVE LAYOUT CODEThe code for the above UI looks like this. 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 table used here belongs to the “ ui very basic table ” class of semantic UI. To display all the data collection and make it readable, the ‘ table ’ component of the semantic UI has been used. ![]() ![]() Also, after each column there is vertical spacing, added to separate each column, creating vertical rhythm. The table has been put on the grid which helps in managing the flow of the content. 1: Table used in Session in event/event_id/sessions pageĪs 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 page where we can create, modify and see the other details of the sessions look like this.įig. 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. ![]() 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. 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. The Semantic UI’s by default theme uses 16 columns means it divides the entire space into 16 indivisible proportionate columns. 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 grid is used to realign the space in the page. 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 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. Semantic UI offers a variety of table layouts for creating the customised table according to the requirement. The table is collections of data which are grouped together and arranged in the rows. 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. Most of the class names are closer to normal spoken English words which seem to flow naturally and requires less to refer the documentation. It helps in building the responsive layouts which are written in the human-friendly HTML. It is an open source HTML/CSS framework having self-explanatory syntax for building the user interface. Along with reusability if we bring responsiveness in the picture then Semantic UI has no match. It provides a lot of components which can be reused again in different scenarios inside the project. When we talk about reusability in terms of web application framework then Ember has a significant role. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |