This post is an overview of some of the tools / coding used to make Liberty Hawk and Wikit responsive. The discussion of the responsive design elements could have been categorized in a number of ways. The sections below were chosen based on the where and how that design was most prominently relied on. Feel free to inspect the apps in different viewports to to see how the content is adapted on various media screen sizes.
Navigation: top bar & side panel
Liberty Hawk and Wikit use different nav menu styles, top and side respectively. Liberty Hawk uses a Bootstrap collapsing navigation bar. There was no customization on it and it uses the default breakpoint. Wikit, on the other hand, has a side navigation panel and employs several components whose properties are updated based on viewport size.
First, there is a top bootstrap navbar. It doesn't contain menu items, but rather, contains a brand logo, and a logout link is displayed after a user is signed in. Menu items are displayed in a side navigation panel. Both navbar-top and the contents of nav-side-menu are updated for screen width ≤ 768px, the portrait browser size for the iPad mini. The mechanisms to hide each of the bars is as follows. For navbar-top, a CSS media query sets display:none for screens max-width: 768px.
nav-side-menu employs two divs with updating visibility based on screen width. These are menu-list and brand. It also contains an icon element that toggles the display of the menu-list content in screens ≤ 768px width.
The content of menu-list, menu-content, is shown in screens of minimum size small. It is hidden in xs screens. The menu-content list is assigned the Bootstrap collapse class. By default, this content is hidden. A CSS media query, however, sets display:block screens minimum size small. Thus, menu-content is collapsed by default in xs and 768px width screens. Correspondingly, brand and the icon element (used to toggle menu-content visibility) have display:none at most small and larger screens, but this is set to display:block for width ≤ 768px . The toggle element has data-target="#menu-content", and once visible in the xs view, this toggle icon can be used to hide and show the menu=content for navigation. Because the value of the toggle is maintained when the screen is expanded beyond 768px width (e.g. you are in a large screen, and you reduce it to xs/s, then resize to larger), menu-content can remain hidden when you resize to a larger view. To ensure that the content is visible in the larger view in this scenario, min-height is set in a media query for width ≥ 769px.
Footer - Wikit
Because the footers for Wikit and Liberty Hawk contained little content (just a copyright line), the responsive design was based on changing their style or position as opposed to collapsing elements within them. In Wikit, a navbar was used in the place of a footer. By default, in xs views, there is no gutter padding, so the footer goes to the edge of the view. The brand div (with menu toggle), however, is contained in a column and does have gutters around it. To make the footer match the brand navigation bar, 15px left and right padding is added in xs viewports.
Although not a responsive design element, in order to keep the footer near the bottom of the view (with spacing below it being similar to the spacing about the top navbar), I used a wrapper with min-height: 75vh; to push the footer to the correct position.
Footer - Liberty Hawk - Responding to Scroll & Viewport
position: fixed; is the status for small views, and the scrollbar detection method did not detect scrolling for browers on smaller device browsers. Since most of the views in those devices have content past the view height anyway, position: relative; is use and keeps the footer after content that supercedes the view height . For iPad Pro type devices (medium to larger size), the hasScrollbar may or may not work and two of the main views (landing and sign in) do not cover the view height. Thus, a wrapper is used along with position: relative; to keep the footer at the bottom of the page.
Bootstrap Grid - Wikit - Mixed Columns & nesting
Wikit employs mixed and nested columns to manage alignment in medium and small viewports. In a small viewport, I wanted to keep the plan option boxes and sign in/up forms horizontal and collapse the About Wikit box below them. In lieu of a code snippet, you can view the page's code in it's GitHub repository.
Bootstrap Grid - Liberty Hawk - Mixed columns & push/pull
Liberty Hawk uses various grid layout techniques, inlcuding mixed columns and push and pull in a number of views. One example of mixed colums is the user sign in view. In medium and larger viewports, there are equal column widths, containing the two forms and Account Benefits div. The most logical alignment for small screens was to keep the sign up form and Account Benefits div next to each other. This would not work for xs views, but as long as sufficient width existed to keep them horizontal, I wanted to do that. The border line between the Current User and New Account sections was used as a thematic division. A media query sets this border at the breakpoint at which these sections are horizontal (vs the New Account column collapsing).
The Search page in Liberty Hawk uses push and pull to ensure that the search box and search history panel are at the top of the screen in small viewports. In medium ones, they are to the right of the column containing search results (the columns are horizontal). This is the view for signed in users. For not signed in users, the search box is only in the menu bar.
Push and pull are also used on the landing page, to ensure that the Liberty Hawk logo (the center of three columns in medium viewports) is at the top on small views. On the landing page, in small views, <hr class="star-primary" style="display:visible"> is also used to define thematic breaks between the vertically lined content sections.
Transform with scale - Liberty Hawk - responsive widget
Hopefully this post explains the reasoning behind some the layout choices for responsive design in Wikit and Liberty Hawk. Thank you for taking a look!