Question

I’ve been doing a little experimenting building a mobile application to use with phone gap.
When defining the layout although I have some questions:

I want to build a single page layout with side scrolling, using the same effect as a carousel image gallery, but instead of switching images I want to switch between pages.

I want to achieve a carousel like effect switching “pages” and was thinking about using something like Bootstrap or Ink and use the provided layout so that I can have each column to behave as a different screen. Something like what is explained here where the red square represent the currently visualized screen (or column) and the blue squares are the screens “invisible” (or columns). So, as you can see each column should “scale” to fill the screen/viewport.

Reading the documentation from both the frameworks I’m not seeing how I can achieve this since the column definition is

The default Bootstrap grid system utilizes 12 columns, making for a
940px wide container without responsive features enabled. With the
responsive CSS file added, the grid adapts to be 724px and 1170px wide
depending on your viewport. Below 767px viewports, the columns become
fluid and stack vertically.

for bootstrap and

With Ink, you are given three layouts you can use to your hearts
content.

S which stands for small M which stands for medium L which stands for
large By default these correspond to the following screen size
intervals (we’ll show how you can customize these in just a second):

Small: below 650 PIXELS WIDE Medium: between 651 and 960 pixels wide
Large: above 961 pixels wide

for Ink.

So, from what I could understand I can’t quite achieve the intended effect.

My question is: How can I get the effect wanted and how can I make bootstrap or Ink change its column definition so that each column will represent a screen (or a set of columns since the sum of them all must be 12 columns)? Is this even possible? Are there any other alternatives I should consider?

Best Regards,
Celso Santos

Answer 1

In addition to the above answer and as answer to the question “how to allow for some margin while working with table-cell structures like above code?”

Since table-cells don’t allow you to use margins, you ARE able to use containers. In my way of working their is a difference in wrappers and containers. A wrapper acts like a real wrapper as for candybars (fits around its content) a container takes up space and acts like a seacontainer on a ship. The container is put on the ship, but is able to hang outside the ships border (important for naming conventions) Now lets get on with the trick:

Below is the same example with some additions

<div id="wrapper">
  <header>Website header</header>
  <div class="cell">
    <section>
      <div class="container">
        <header>Home header</header>
        <div class="main">
          <p>Testpage hahaha</p>
        </div>
      </div>
    </section>
  </div>
  <div class="cell">
    <section>
      <div class="container">
        <header>Page 2 header</header>
        <div class="main">
          <p>Testpage hahaha</p>
        </div>
      </div>
    </section>
  </div>
  <div class="cell">
    <section>
      <div class="container">
        <header>Page 3 header</header>
        <div class="main">
          <p>Testpage hahaha</p>
        </div>
      </div>
    </section>
  </div>
  <div class="cell">
    <section>
      <div class="container">
        <header>Page 4 header</header>
        <div class="main">
          <p>Testpage hahaha</p>
        </div>
      </div>
    </section>
  </div>
</div>

  html, body, #wrapper { height: 100%; }
  #wrapper { display: table; width: 400%; margin-top: 100px; }
  #wrapper > header { position: fixed; top: 0px; height: 100px; width: 100%; } 
  #wrapper > .cell { display: table-cell; height: 100%; width: 25%; }
  /* set position relative in the section since position relative on cells don't work */
  #wrapper > .cell > section { position: relative; height: 100%; } 

The next rule is a what’s called a CSS hack. In some strange way this will stretch the element to 100% height and width
Keep in mind that all 5 rules have to be set (position absolute, top,left,right and bottom)
In this case I gave left and right 15px which will put the .container 15px over ‘the ships borders’. also the overflow-y can be used on the containers. In some strange way, the scrollbar DOES work on this fluid design method (don’t ask why, but its awesome)

#wrapper > .cell > section > .container { 
  position: absolute; 
  top: 0px; right: 15px; bottom: 0px; left: 15px; 
  overflow-y: auto; border: 1px solid #000000; 
} 

As you can see its not real magic, but it does the trick and because you use strict names in combination with the ‘>’ selector, it will not affect any other elements, which allowes you to use it in almost every fluid website design.