...
- Bulma is built using sass syntax. This is not directly supported by DomUI (it uses the scss syntax) so I included the css files instead.
...
- There appear to be no Java sass compilers that support sass format- only scss is supported. I implemented both vaadin-sass-compiler and jsass but both fail to load Bulma. So I converted Bulma to scss using sass-convert.
Styling issues
General look
The overall look of Bulma seems.... busy and flat. It uses lots of primary colors, no gradients, big colorful borders around input... Things are also quite big. I think having a business application rendered with Bulma will be considered nice at the start but very tiring after use. It definitely needs a more subdued look, but looking at the available themes the idea seems not to have dawned on others yet.
H1..H6 tags are unstyled
All Hn tags have no style at all; Bulma tells us to use its classes to define headers instead. This is plain dumb: there is simply no reason to break rendering of these tags just because you have another idea. It should be fixed by having the Hn tags expose the same styles using class='title is-2'. Or alternatively wrap the thing in a class="content". See the sillyness silliness in https://github.com/jgthms/bulma/issues/433 or even worse: https://github.com/jgthms/bulma/issues/211. The author does not get an important point: his framework is there to help others. Removing all styles everywhere is not helping, it's vandalism.
...
This might also mean that there is more foolishness than this around. It means that including Bulma fscks up everything else: it's an all or nothing affair.
Reset sheet
The above was caused by minireset.scss, so I removed everything from there.
Buttons
- Buttons only work nice when used with font related icons. Buttons with an image inside render badly:
- To fix, add "icon" class to the image tag. This aligns the buttons correctly, but scales the icon images to 1.5em which for images makes them ugly.
- The colors used in button specification kind of suck. "is-white"?
- Buttons have no "focus" indication apparently, so it is not possible to see what button is currently selected.
Input controls
Input controls are defined as width: 100%, which results in a screen like this:
...