Valo is *huge*. Scale down to Reindeer size?

General
1

The new

Valo
 theme
, default in Vaadin 7.3 apps, has ginormous widgets about 2-3 times bigger than the widgets in the previous default
Reindeer
 theme. Yes, this kind of look is now “hip” with all the kids using Android and iOS 7/8. But for business-oriented desktop-style apps, the
Valo size is too large
.

Valo’s claim to fame is that it is built to be adjustable and easy to morph just a few lines of Java and/or CSS code. Has any one experimented with
altering Valo to be sized similar to the Reindeer theme
? Any source code or instructions to share?

I do
not
 want to learn how to make groovy/cool/artsy changes to the theme. I’m looking simply for the easiest and safest way to get the Valo widgets’ size under control.

In the short term, I will continue to override the default to use Reindeer, as described on this
StackOverflow.com Question
. But longer term, the Vaadin team is betting big on Valo. Eventually Reindeer will fall out of favor, so I would like to learn how to transition.

I did open
Ticket # 14,909
 to suggest providing a switch to force Valo to re-size to
Reindeer scale
.

I
cross-posted with StackOverflow.com
 as that is a good place for final answers, and this forum is good for discussion.

2

Hi Basil,

I think scaling down the values of the
$v-unit-size
 and
$v-font-size
 variables should get you pretty far :slight_smile:

3

At 40:45 in the “
Webinar: What’s new in Vaadin 8?
” video on YouTube, Matti Tahvonen mentions some project that was done to alter Valo to have Reindeer proportions. Can anyone point me to that work?

4

I second this, can Vaadin support a convenient way to scale down the UI?

5

Add this to your scss and see if it helps. I’m pretty sure I got this from Matti in another post somewhere.

// These global variables emulate the Reindeer theme using Valo
// begin
//$v-app-loading-text: “Migrate Reindeer Theme”;
$v-font-size: 12px;

$v-unit-size: 26px;
$v-unit-size–small: 20px;
$v-unit-size–tiny: 18px;

$v-layout-margin-top: 18px;
$v-layout-margin-right: 18px;
$v-layout-margin-bottom: 18px;
$v-layout-margin-left: 18px;
$v-layout-spacing-vertical: 7px;
$v-layout-spacing-horizontal: 6px;
// end Reindeer emulation