UI experiment

In my free time, I’ve been working on a little UI demo. I had this idea for using Bootstrap as a base, in order to imitate the Facebook mobile interface. I think it turned out pretty well. Using responsive styling, the page displays a different menu depending on how large your screen is. This is…

In my free time, I’ve been working on a little UI demo. I had this idea for using Bootstrap as a base, in order to imitate the Facebook mobile interface. I think it turned out pretty well.


Using responsive styling, the page displays a different menu depending on how large your screen is. This is what you’ll see on your desktop or on an iPad in landscape mode.


As you scroll down the page, the menu stays with you.


On smaller screens, such as an iPad in portrait mode or a phone (I tested on my Bionic), the menu will be hidden by default. In its place in the top bar is a menu button. (You can also resize your browser window to see the mobile view.)


When you click the menu button, the menu will slide out from the left, similar to how Facebook’s mobile site works. Clicking (or tapping, on a touch device) anywhere off the menu will cause it to slide back.

So that’s it. There are just a couple things I want to mention.

First off, I don’t recommend trying this out on Internet Explorer. But if you must, then use version 9; anything less can’t handle responsive CSS. Even then, the glyph icons seem to be wigging out. Since this is a demo, I can’t really be bothered to care. Other than that, it should have no problems on any modern browser.

Speaking of testing, I’ve tested this in Chrome, Firefox, iOS Safari (iPad 3), and Chrome for Android. Again, it’s just a demo, so I haven’t been nearly as rigorous with testing as I would be for a production deployment.

That said, you’re welcome to check it out. I had fun building it.

Note: there is another project, built by one of the authors of Bootstrap, in fact, called Coffin that purports to do the same (or similar) thing. But I can’t get the demo page to work.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related