Responsive design.
To begin with a simple and effect way of building a responsive application for cross-platform is, to understand how to use CSS. With all the prebuilt tools out there it won’t take much of our time checking how the app looks on the different layouts.
I say Bootstrap, a very handy open source toolkit with prebuilt components, plugins and what not. I’ve built a basic application- gallery containing multiple photos. I majorly focused on the elements that need to be responsive on major level — Navigation bar and the content of the web application.
Navigation Bar: having not less than two buttons to navigate across the pages(basic navbar), generally on the large scale layouts it does not cause any issues with navbar layout. But when we view the same layout on smaller screens, the navbar might re-adjust in vertical direction consuming lot of space with interface clumsy. Thus, the idea of using collapsable navigation bar. The whole navbar shrinks into single button in narrow layout that makes application look more decent.
Code snippet:
(index.html)
<nav class="navbar navbar-expand-lg navbar-light bg-light"><a class="navbar-brand" href="#">Navbar</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar" aria-controls="myNavbar" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="myNavbar"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="index.html">Home</a></li><li class="nav-item"><a class="nav-link" href="albums.html">Albums</a></li><li class="nav-item active"><a class="nav-link" href="photos.html">All photos</a></li></ul></div></nav>
Understanding the responsive grid: Bootstrap uses 12 column system which keeps code simple for different large scale layouts. But for the scale scale layouts or components of app, it is recommended to use flexbox layout- it take another whole lot blog to brief.
The predefined classes: the class prefix ‘ .col-md-*’ col, md, * indicates the column, max container width and breakpoint number respectively. There are other prefixes for different container width viz — extra small (xs-0px), small width (sm-480px), medium (md-768px) and higher widths (lg-1024px). As it is of 12 columns we have 12 breakpoints in a row, to have a column of 3 in a container we have to specify 4 as the breakpoint- for instance, ‘.col-md-4’ for a medium container width.
Having the option of nesting the class elements, we can pre decide how the layout has to look on the different views. I decided to have two columns on the small layout and four on the medium and above views, I specifed breakpoints respectively. In the container div, I’ve placed child div with (class=”row”) and specified the layout class for each photo.
Code snippet:
(gallery.html)
<div class="row"><div class="col-sm-6 col-md-3"><a href="photo1.html"><img class="photoList" src="/images/img_1.jpg" alt="grafitti"></a></div><div class="col-sm-6 col-md-3"><a href="photo1.html"><img class="photoList" src="/images/img_2.jpg" alt="grafitti"></a></div><div class="col-sm-6 col-md-3"><a href="photo1.html"><img class="photoList" src="/images/img_3.jpg" alt="grafitti"></a></div><div class="col-sm-6 col-md-3"><a href="photo1.html"><img class="photoList" src="/images/img_4.jpg" alt="grafitti"></a></div><div class="col-sm-6 col-md-3"><a href="photo1.html"><img class="photoList" src="/images/img_5.jpg" alt="grafitti"></a></div><div class="col-sm-6 col-md-3"><a href="photo1.html"><img class="photoList" src="/images/img_6.jpg" alt="grafitti"></a></div></div>
I hope my blog was helpful for the newbies out there or anyone else, thank you for giving it a read. I’ll keep posting more under my publication so stay tuned.
Love
— Vaishnavi
#development#designprinciples
