Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Posts: 270
Registered: ‎12-13-2010
My Device: PlayBook 16GB, BB10 Dev Alpha
My Carrier: o2 (de)

Ripple UI Optimizations

Just in case somebody is in the same sitation as me, I decided to share this idea.


One of my problems with Ripple is it's inability to handle the viewport metatags (see my issue on github).

I develop cross-platform and always use this viewport tag

<meta name="viewport" content="width=320, user-scalable=no, target-densityDpi=160">

in combination with scaled images (CSS "background-size") to have the same crisp user experience on all phones (320x480 up to the Dev Alpha with 720p).


What I had to do until I made these changes was to switch between PhoneGap / iPhone (for applying changes and testing them in the browser) and BB 10 Webworks / Dev Alpha (for deployment) in Ripple.

Futhermore Ripple's spacious screen layout is optimized for big screens, not so much for my laptop, so I also cut down the spacing around the device simulator.



Just open the ripple.css file (located in the corresponding Chrome extensions folder) and modify these three CSS (.viewport-wrapper-Colt, .device-wrapper-Colt and .middle) entries as following (changes are indented):


.viewport-wrapper-Colt {
	width: 360px;
	height: 600px;
    border: none;

.device-wrapper-Colt {
    position: relative;
	padding: 119px 0 0 38px;
	width: 400px;
	height: 740px;
    margin: 0 auto;
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background: url('images/Colt.png') no-repeat;
	background-size: contain;

.middle {
    margin: 0 auto;
        top: 10px;
    position: relative;

Restart Chrome and voila: there you go. This is how it looks for me now:

Bildschirmfoto 2012-07-21 um 12.14.32.png

- - -
My approved apps @ App World
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: Ripple UI Optimizations

Great tip!  Thanks for posting.

Follow me on Twitter: @n_adam_stanley
Your app doesn't work? Use BlackBerry remote web inspector to find out why.