Video Tutorial Request: Design Features

Front End Components General
#1

Hi,

My apologies if this already exists. I’d be very interested in a video tutorial on using the design components of Wappler. Specifically related to the Bootstrap framework. It seems most of the tutorials are focused around the server connect side of things. I frequently have trouble with aligning content and I don’t understand what most of the side bar tools are for (flex item, appearance, spacing, display) and how these are meant to be used.

Other issues I’ve had are understanding the bootstrap classes and how I can use these within Wappler. For example I found a bootstrap template which had cards with a shadow behind them. I was able to do this in Wappler on a hunch by typing “Shadow” into the class box. Is there another way to enable these kind of design features?

Thanks for all of the great tutorials so far,

Logan

3 Likes
#2

completely agree with you :ok_hand:t4:

1 Like
#3

Wappler uses the bootstrap framework. There are dozens of bootstrap tutorials on the internet which cover things like you mention (which are not implemented via the GUI.) . I suspect the reason why tutorials concentrate on Wappler specifics is becase Bootstrap is nto a Wappler technology, it’s a web technology which is made available via Wappler.

Take a look at something like this which covers pretty much every aspect of bootstrap you could even want including hundreds of bootstrap classes.
So there you are, a full bootstrap tutorial now added to the forum. :grinning:
https://www.tutorialspoint.com/bootstrap/index.htm

2 Likes
#4

Thanks, I’ll take a look at that.

Am I crazy or is the entire design interface of Wappler not explained anywhere? I looked through most of the documents and videos. I’m wondering about the features I mentioned in my original post.

It would be nice to have a tutorial on formatting and aligning content and using bootstrap in Wappler. I get there is a lot of information about bootstrap on the web but I feel like using it within Wappler is a different story… at least for me. There’s also basic elements that aren’t related to Bootstrap as I mentioned above that I don’t understand and I can’t find info on.

I’ve watched hours of your tutorials now @Hyperbytes thanks for those! I’m looking forward to the rest of the blog series :slight_smile:

1 Like
#5

Hello Logan,
The options you see in the App Structure panel are exactly visual representation of the Bootstrap 4 options and classes.

Not sure which part of the options are not clear to you but according to your post:

These options are actually quite straight forward.
I mean things like - spacing (margins/paddings), appearance (colors, width etc), display (show/hide on specific device size), text align … really don’t need any further explanation.
As for flex options better check the bootstrap 4 docs explaining how and when they are used.

Basics of Bootstrap 4 controls and components are already explained in our documentation:

Maybe you can just provide a specific example of you can’t achieve and explain what is not working for you, so we can help?

#6

For some people it’s easier to learn from video’s with someone explaining in audible words what he’s doing. I am also hesitant to learn with docs only, it’s just not the ideal way I learn things. That is why I suspect Logan is asking about video specifically, since some of the Wappler users here are more visually minded, then text/code minded.

2 Likes
#7

Yes, some users do prefer video, it’s a more passive way of learning

However even just a 10 minute video can take many hours to plan, records and edit. Something as extensive as Bootstrap would involve thousands of hours of work and to be fair, bootstrap is not a Wappler technology, it’s a general web technology.

However simply typing “Bootstrap” into YouTube will yield a massive number of Bootstrap tutorials, it is impractical just to remake them specifically for Wappler.
If people have specific needs then it can be catered for but certainly, personally, I would never just product hours of video on the small chance someone, sometime may find it useful, that’s just a waste of time

1 Like
#8

Thanks Teodor,

Actually it is enlightening to know that the App Structure panel is built around Bootstrap. I hadn’t thought to read up on how Bootstrap works as I assumed Wappler worked with it differently. In George’s post introducing Bootstrap he wrote “Bootstrap needs no introduction”… I had to chuckle a little bit.

So my biggest problem I suppose is that I don’t know what I don’t know. For example I have spent over an hour trying to align a paragraph below an image. The problem comes when I look at different screen sizes and the alignment is off. This is just an example.

I have looked though all of the Visual Designer docs but it certainly doesn’t mention many features and menu items. There are many docs on server connect features (which have been very helpful) yet I still find the videos on the same topics much more helpful.

@Hyperbytes I’m going to do exactly this. I’ll folllow up a few links if they are useful and whether I’m still confused. I definitely don’t underestimate the time commitment of your videos! Thanks again.