Redesigning the Bootstrap 4 panel, Part 2: Text styles

Request For Comments
#1

Before we move on to more complicated stuff, I wanted to show you the design we have in mind for the generic text styling with the Bootstrap 4 typography

We decided to divide the options in basic and advanced:

Basic options

This covers to most common options like colors, alignment, font weight and style:

image

A few options that might need more explanations:

image - Highlighted text
image - Lead text
image - Small text

Also the color picker drops down a menu with the current Bootstrap 4 colors only to choose from:

image

Advanced Options

When you toggle the “advanced” switch you will get:

image

You see here more advanced options like text transforms, text overflow handling and additional styles like mono type and abbreviations (n/a). Those won’t be used that often so that is why we put them all under advanced.

So that’s all about the new text display options that will be visible on all Bootstrap 4 elements dealing with text.

Let us know what you think!

2 Likes
#2

Looks awesome from where I sit on this early Saturday morning.

1 Like
#3

Looks ok
and there is nothing wrong or confusing with it in the first place

#4

Lovely job - looks great!

#5

Looks very good.

What colours will be shown if a custom theme is used - ie neither the default Bootstrap colours, nor one of the Bootswatch options? Will Wappler look at the CSS to decide what colours are available ?

#6

An example of what I meant regarding the colours:

Currently the colours in the property panels don’t necessarily reflect the actual colours according to the defined styles. Eg here I’ve customised the default styles in the recommended way (redefining variables in custom.scss etc.), so my primary colour is now dark red. However the colours which appear in Wapper are still the default Bootstrap colours, in this case blue instead of red:

image
image.png811×212 14.1 KB

It would be good if this could be improved. Obviously sites developed in Wappler shouldn’t be restricted to either the default Bootstrap theme or one of the Bootswatch selection.

#7

Yes I understand what you mean. Currently we already show the different colors used by the default bootstrap or the bootswatch themes, but we don’t pick custom colors. We will hover do so soon as well.

3 Likes
#8

Will there be a way to adjust text size globally? One issue I have with BS4 is the text (paragraph and in tables) is so large for dashboards. Would be nice to be able to resize text.

#9

You could change the text size globally by using the CSS panel:

body {
font-size: 12px;
}
2 Likes
#10

I would add ‘Responsive text’ and using the vw sizing for titles who need to be relative to the current viewport size.

#11

@vdweyer these are Bootstrap properties, not a CSS style panel.
Bootstrap properties, coming within Bootstrap 4 framework does not include this.

Responsive text sizes (for different breakpoints) will be added to the design panel.

Wappler 1.5.0 Released
#12

Is there any way to change the default colors of Bootstrap 4 or add more colors to the default list?

#13

Reflecting the real colours from bootstrap within that dropdown would be very nice.

#14

Currently those theme colors are the default bootstrap 4 colors, or if you use one of the supplied bootswatch themes - then they show the theme colors.

we will soon indeed pick up the live bootstrap theme colors, so if you have a custom theme those can be picked up as well.

3 Likes