Web 2.0: A useful video about CSS

Hello there,

your are working hard to develop Web 2.0 Apps and need to learn more about Bootstrap and CSS ? Then I have a video that may be useful:

CSS Grid Crash Course 2022 - YouTube

What you will get from this video depends on what you know about Bootstrap and CSS, but you will all learn something. On top of that, watching again this video once you learned new things will always provide you something.

About a year and a half ago I had to create a PWA - a Progressive Web App - using standard tools like Visual Studio Code. I had quite a hard time delivering an interface that would adapt to different screen sizes on Android, that is having a responsive design.

After I watched that video, I understood what went wrong. Regarding object placement on the screen, in Bootstrap there are grids and flex. They are not identical tools if I may say so. I used only flex, and the video demonstrated that I should have used grids and flex.

When you watch the video, don’t try to understand everything this guy demonstrates. He is a real King Pin, and the example he creates is astonishing ! And all that by coding everything. Just think about everything you will be able to accomplish in Xojo !

2 Likes

Thanks for sharing. It is exciting to know everything about Bootstrap.

A question. Do you know how to edit a Bootstrap file in Visual Studio Source?

My goal is to make my requirement format in Bootstrap.

What do you recommend to me?

Unfortunately I don’t know Visual Studio Source.

If you wish to have a custom CSS file, I would recommend searching for Bootstrap file compatible with Xojo and start from there. Be sure the file is for Bootstrap 4.6. You can find some here:

Bootswatch: Free themes for Bootstrap

This is a very good post from @Jeannot_Muller about Customizing Web 2.0

How To Customize Xojo Web 2. Beginners seem to be facing issues to… | by Jeannot Muller | Xojo Development (jeannot-muller.com)

Hope that helps !

1 Like

Any editor can do. Visual Studio Code has some CSS and Bootstrap Plugins, same for Webstorm for Jetbrains. They can help in visualizing and folding the bootstrap file, pinegrow is another good editor, but usually a normal editor should be more than enough.

Many thanks, Jeannot and Guilles.

Jeannot’s writing is a good publication. I had not seen it.

It has worked very well for me to install “bootstrap.min.css” for the changes and effects I want to achieve. Without hesitation, I see the possible growth that XOJO will do along this path.

Precisely, what I want is to see the bootstrap.min.css code in an orderly way and modify it. To be able to create my custom min.css.

There are so many things that can do with Web2!

I have tried to use Visual Studio Code with a Bootstrap plugin. But the code doesn’t work for me. I guess it doesn’t recognize the min.css,

I’ll try to use Pinegrow to edit min.css.

Again, thanks for your responses.

1 Like

there are different online tools to unminify existing files: https://www.unminified.com/ . But for security reasons one might prefer offline tools (which do exist as well, often has plugins for editors). Good luck!

Indeed I used this online tool. It works well. Then for similar reasons, I started looking for offline tools. I started using Stylizer 7 (not a free tool, but not overly expensive).It saves CSS files as minified. It opens my minified CSS files. It also makes editing CSS files relatively easy. Just save the changes and you are set. There are several other tools that work well also, some are freeware. It is just a question of finding one that we are comfortable with.

Another online tool that I used initially to create an initial basic CSS file was https://bootstrap.build/app. This site lets you save the minified CSS file that you built visually. It was my starting point that I then developed with Stylizer. A good tool to begin from scratch. There are others, but this is the one that I decided to keep in my favorites.

2 Likes

True, and at the beginning unminifying online is good enough. One has to decide, if he wants to share his modified work online to get it minified. The “people” behind those tools might be interested in your work :wink:

I always minify my files, but I am not sure if Xojo is checking if a file is indeed minified (I doubt they do), so calling an unminified file just .min.css could be sufficient. Though the whole purpose of minifying is the speed aspect to avoid characters only needed for human reading.

I have never checked if unminified files have a negative affect on Xojo Web speed. But a @Louis_D is pointing out: everyone will need a CSS editor anyhow to simpflify the whole process, and a good one has such functionality implemented.

Can you set a style for a particular control? I thought I saw that somewhere.

You can change the shape of objects noticeably. Bootstrap gives you a framework to achieve this.

Yes, we do have some ability to specify style options for a particular control. This is done in Xojo, not in CSS. I set the “general rule” through the CSS file. If I need something different for one specific control (or group of controls), then I create a subclass. The subclass has an “Opening” event handler, where I use specific Me.Style statements to alter the control according to desired appearance. In some instances, javascript may be required.

2 Likes