Jala Tech Talk: Bootstrap for Responsive Design
How we transformed from a non-responsive site to a responsive site to make Jala a more user-friendly application.
Today we are catching up with Amrutha, our Senior Developer here at Jala. Amrutha shares on how Jala uses Bootstrap for responsive design to make it user-friendly across all devices.
How did the development team come to use Bootstrap?
We were looking to transform Jala from a non-responsive site, to a responsive site, in order to make the platform a more user-friendly application. We used both Bootstrap and Angular to do this. While Bootstrap comprises the styles and what the user sees at the front-end, Angular interacts with and sends requests to the back-end. We are using Bootstrap because of its features, and we are very happy with how it has helped with the responsiveness of the platform!
What features of Bootstrap made you decide to use it?
I should start by saying that we are currently using Bootstrap version 4, which is the most stable version of Bootstrap.
Fun fact: it also has SASS which is a default CSS pre-processor. SASS gives developers a little more programming options or functionality for CSS writing. In the past, CSS was just tiles but with SASS, we have more customisation options for CSS.
What convinced us to use Bootstrap were its three main features; Bootstrap’s pre-filled and pre-designed components and classes, its focus on mobile design, and its responsiveness.
Let me explain in more detail..
1. Pre-filled Components and Classes
One of the main reasons we chose Bootstrap was that it came ready with a set of pre-filled components and classes. For Jala, we have a lot of card components and model pop-ups, which Bootstrap actually already provides, with its set of predefined and pre-built components. So as a developer, I did not have to write the code from scratch, all the basic components were already in Bootstrap. All I had to do was customise the components to fit the Jala design. This, combined with some preexisting CSS classes helped me speed up the development process.
Another fun fact: Bootstrap is really easy to learn. Before this, I had no experience using it, but the documentation is very clear, simple and easy to understand. I took some online courses and went through all the documentation in about a week. On top of that, I followed Bootstrap recommendations whilst using it, which were also super clear and helpful.
2. Focus on Mobile Design
Before switching to Bootstrap, we had always made two different designs to base our development sprints on: one for the mobile version and one for the desktop version. I would start out by building for desktop, and in the following sprint I would build for mobile. This was not only time-consuming but also inefficient, so from the beginning of this year we standardised our procedures so that we could be more productive with our time.
Now, our designer provides all the designs at the same time, and we build all the designs concurrently. I use Bootstrap to build and design for mobile first, and subsequently make compatibility adjustments. This way I can build one feature across all devices right away. This makes the process a lot more efficient and smoother!
3. Responsiveness
We also chose to switch to Bootstrap because it makes it easy to build for responsiveness by identifying the intended device and applying the specific styles. Bootstrap already has a set of breakpoints, which is their five grid tier system which covers sizes xs, sm, md, lg and xl. This means that developers don’t have to code for different screen sizes. Instead, Bootstrap helps identify the device, and all I need to do is apply the styles. As long as our device falls within the five tier system, we don’t need to define the device, and I only need to apply the styles in accordance to each grid. Bootstrap also has other classes for responsiveness, so it really saves a lot of time!
What’s also good about Bootstrap is that it has a 12 column grid system meaning that every device’s screen is made up of 12 columns. With that, I can easily design around the components. For example, in the Jala discover page, there are three cards for the desktop version. So among the 12 columns, I can set it such that each card takes up four columns.
Another example would be our newly launched Jala blog page. On bigger screens, we have four cards each taking up three columns, whereas on mobile we have just one card taking up all twelve columns. This is all thanks to Bootstrap responsiveness, I only need to write how many columns each card takes up.
Any last comments?
I think overall Bootstrap not only made responsiveness for mobile much easier, but it helped us streamline our development process in general, so it was a good experience for the entire team! If you’re interested in learning Bootstrap, there are tonnes of resources, courses and tutorials on the web that you can check out!
Thank you for reading our Tech Talk Series!
Disclaimer: Jala has not been sponsored by Bootstrap to write this post. We genuinely want to share useful software, tools and tips we’ve come across!
