Redesigning the Bootstrap 4 Properties panel, Part 3: Rows & Columns

Request For Comments
#1

So now we are moving more to the grid design of Bootstrap 4

Row Properties

The row properties has being greatly improved and also offer you ready to go presets for the columns inside:

image

Choosing a columns preset, will auto generate as many columns as selected with the specified alignment.
All those settings are again dependent on device selected in the design view, or valid for all if full size is selected.

Next to the columns preset you can also choose the vertical and horizontal alignments.

Column Properties

When selecting a column, its properties are displayed. The column have a bit more options as each column can have various sizes according the grid or be auto sized:

image

We are offering a extended sliders for easy sizing functionality.

You can either choose from the first few options of the slider as “Equal width”, “Content width” or just size from 1 till 12:

image

Similar principles apply to the Order and Offset sliders.

Of course tooltips also popup when hovering on the labels of the sliders, so that the options are well explained.

So what do you think? All clear enough for the Bootstrap 4 grid rows and columns?

5 Likes
Wappler 1.5.0 Released
#2

This looks really good.

In general, where the result of selecting a particular option may not be obvious straightaway, it’s much easier to see now that we have the split view feature.

1 Like
#4

Only issue I might raise is that I have come across a lot of sliders that attempt to do too much so it is almost impossible to “hit” a particular size (i.e. width) accurately – for example assume you need 4.27, easy to hit 4.25, 4.5 but almost impossible to hit the exact number 4.27. Be nice if you put enough leeway into the slider to accomplish this.

#5

There are only round numbers allowed in the slider from 1-12 usually and the slider snaps to the next closest choice, so that shouldn’t be a problem

#6

Sounds good == I doubt one would need the odd numbers I used as my example so snapping to the number solves the issues I have encountered.

1 Like
#7

Initial reaction… Very Good!

1 Like
#8

Wonderful… this new panels you are proposing (including the other request of comment you ppsted) are great.

These feature will increase more and more not only development but also design in Wappler!!