So today I had a bit of an interesting day trying to switch a friend of mine from WordPress to Wappler.
The first thing that I should mention was that in WordPress obviously the person did not really have a clue about Bootstrap as a framework or CSS for that matter. They were previously using WordPress with an Enfold theme that comes preconfigured with something called the AVIA Framework which is very much drag and drop oriented.
I never really contemplated the difficulties a person would face when trying to learn Wappler while at the same time trying to understand the Bootstrap 4 Framework, but after a day of explaining I can see how this could be a little confusing for those that just do not know. If anyone has any good simple tutorials they know of for Bootstrap 4 and CSS for dummies I think many people that are really just starting out might find that the ultimate starting point.
I am posing this here as it might help others that are struggling with the same concept, and that is the difference between the Bootstrap 4 Framework classes, the styles panel and the design panel.
Let’s take this at it’s simplest form, I want to make a piece of text white. Well there are about 100 ways to do this but which is best and why?
-
App Structure Panel - click on the paragraph you want to change to white and add a class of text-white like this.
<p class="text-white">Some Text</p> -
Experimental Design Panel - click on the paragraph you want to change to white and under TEXT > Color - Use the built in color picker to select the color you would like. This will produce the following result.
<p style="color: rgb(255, 255, 255);">Some Text</p> -
Styles Panel -
a. Without an attached external stylesheet - Click the element you want to change, click inside element.style and enter color: #FFF which will produce.
<p style"color: #FFF;">Some Text</p>
b. With an attached external stylesheet, you will select the element you want to alter > click the + icon in the Styles panel, select the attached stylesheet which will create a new selector of p which you type into color: #FFF and it produces.
<p>Some Text</p>in the html file and
p { color: #FFF; }in the external stylesheet file.
Now no method is better than the other as such because it really depends on what you want to achieve as your end result. That being said I would choose to use built in Bootstrap 4 classes over most methods in most cases. Why?, well if I went to the store right now and purchased a Canon camera bundle and it came with a 25mm 50mm and 100mm lens as 3 options, and I wanted to take a picture with a 100mm lens, then I would look in the camera bag and pull out the 100mm lens, clip it on and use it. It would be crazy for me to go to the store and purchase a new 100mm lens every time I needed one. Similarly why recreate a style to turn my text white when Bootstap 4 already includes one. I use the bag of classes that are provided with the Framework.
Some classes can get a little confusing as margins of 1 through 5 are provided in the framework, however 1 means “option 1” and not 1 pixel, em, percent, mm, cm, inch. So it’s actual unit of measurement is based on rem (relative em) where
0 = 1rem * 0
1 = 1rem * 0.25
2 = 1rem * 0.5
3 = 1rem * 1
4 = 1rem * 1.5
5 = 1rem * 3
To try and summarise, I try wherever possible to stick to the App Structure panel and adjust styling using the tools provided within or where there is no tool for what I want, I add or remove classes to achieve what I want.
The Experimental Design Panel is for adding inline CSS to elements where you need more control than a Bootstrap 4 class offers, and the Styles panel is for those with an understanding of a little CSS to add either inline or external styling rules to their elements.
External styling rules are your most powerful in assisting you trough the process and I would suggest where existing framework classes can not be used to try and use external stylesheet rules and as a last resort to use inline styles. Just one mans opinion though.
Some small tips when typing into paragraphs RETURN starts a new paragraph in a new p tag however using SHIFT+RETURN adds a line break <br> tag and remains in the same paragraph.
Last updated: