Still Confused About Need to Include Bootstrap 4 Classes

webdevtim · Post by **webdevtim** » Fri Mar 05, 2021 1:26 am

I want to develop a pure CSS Grid template with as little JS as possible, but after much reading I am not sure whether I have to include Bootstrap 4 classes in the markup or not. I have not been able to find any documentation on this except for the very basics.

Is Bootstrap 4 still part of Joomla 4 core for extensions compatibility sake? So I need to include Bootstrap 4 classes in the markup when designing templates?

Should I use the Cassiopeia template as the bench mark I should follow, or is Cassiopeia a template deigned to meet everyone's needs without catering to anyone? When designing templates for a specific purpose I should feel free to kick Bootstrap 4 to the wind? Or am I constrained? i/e/ I have created pure CSS Grid nav-bars that work on any and every device out there, so I would not want to use the Bootstrap 4 nav-bar. i.e. https://www.sagacicweb-tests.com/teaser-gallery.html No need for all the JS except for a listener.

Post by **Per Yngve Berg** » Fri Mar 05, 2021 4:42 am

Beta 7 contains Bootstrap 5.

Pavel-ww · Post by **Pavel-ww** » Fri Mar 05, 2021 12:25 pm

webdevtim wrote: ↑
Fri Mar 05, 2021 1:26 am
Is Bootstrap 4 still part of Joomla 4 core for extensions compatibility sake? So I need to include Bootstrap 4 classes in the markup when designing templates?

I do not think that there is any dependence on bootstrap when creating a custom template. Many templates on ukit are proved. If the server part of the control is assumed, then you only need to take into account the behavior of the container boatstrap and nothing more. But of course, third-party extensions may require Bootstrap JS. Therefore, it is necessary to provide an optional option to add bootstrap to your template if necessary.

webdevtim · Post by **webdevtim** » Fri Mar 05, 2021 6:17 pm

Per Yngve Berg wrote: ↑
Fri Mar 05, 2021 4:42 am
Beta 7 contains Bootstrap 5.

What I want is to have the template generate semantic HTML. I don't want to have to nest div's like I do in Bootstrap?

Bootstrap 5 is CSS Grids aware, yes? Does it support all of the CSS Grid features? Doesn't this still add bloat to websites when I can use SCSS, CSS Grids and Media queries directly to produce very compact pages without sacrificing any functionality? Obviously I haven't explored Bootstrap 5 yet because I didn't think I would still need to use Bootstrap. Facebook has react.js, Google has angular.js, then there is the independently developed vue.js. I know I can use CSS Grids directly in react.js, and I can generate semantic HTML with react.js, no need for any special nested div classes. For Joomla, I really don't need a JS framework at all because with CSS Grids, what was traditionally done with JS is now done natively by the browser. All I need JS for is to set some listeners for specific events like clicks, hovers, etc in order to start some kind of CSS animation with the transform(), keyframes() functions as you can see in the hamburger menu I created here[https://www.sagacicweb-tests.com/teaser-gallery.html] when viewed at iPhone resolution.

webdevtim · Post by **webdevtim** » Fri Mar 05, 2021 6:36 pm

Pavel-ww wrote: ↑
Fri Mar 05, 2021 12:25 pm

webdevtim wrote: ↑
Fri Mar 05, 2021 1:26 am
Is Bootstrap 4 still part of Joomla 4 core for extensions compatibility sake? So I need to include Bootstrap 4 classes in the markup when designing templates?
I do not think that there is any dependence on bootstrap when creating a custom template. Many templates on ukit are proved. If the server part of the control is assumed, then you only need to take into account the behavior of the container bootstrap and nothing more. But of course, third-party extensions may require Bootstrap JS. Therefore, it is necessary to provide an optional option to add bootstrap to your template if necessary.

OK, does this hold for Bootstrap 5, since Per Yngve Berg brought this up. In the past I have simply overridden Bootstrap classes with CSS Grid equivalents.

For the Cassiopeia template we have container like <div class="grid-child container-header full-width">. Do I need to include these for extension compatibility sake? This is exactly the kind of restraint I wanted to avoid. This is a grid-child of <body>. I would want to make body display: grid and then assign grid-areas to the various module positions from there. I may also want the to have a <div class="hero-container"> and then nest <div class="header-container"> inside that as one of the elements of the hero-container.

So back to extensions compatibility. I guess I will need to override the Bootstrap 4/5 classes with my own definitions but leave them named according to Bootstrap 4/5 in order to provide a hook for the extensions to use. This means I will need to consume the Bootstrap documentation in every detail so that I will know what I can and can't get away with.

Is that what you are implying???

webdevtim · Post by **webdevtim** » Fri Mar 05, 2021 7:15 pm

I have started to consume Bootstrap 4 and the first thing that is of importance to me is that three JS libraries need to be loaded in order to use it.

Code: Select all

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

All of this is needed for things that can be accomplished completely with CSS. The only thing I need JS for is to initiate an action like.

What the above JS libraries are needed for

Alerts for dismissing
Buttons for toggling states and checkbox/radio functionality
Carousel for all slide behaviors, controls, and indicators
Collapse for toggling visibility of content
Dropdowns for displaying and positioning (also requires Popper.js)
Modals for displaying, positioning, and scroll behavior
Navbar for extending our Collapse plugin to implement responsive behavior
Tooltips and popovers for displaying and positioning (also requires Popper.js)
Scrollspy for scroll behavior and navigation updates

ceford · Post by **ceford** » Fri Mar 05, 2021 8:34 pm

I think you should stop flogging a dead horse. Joomla 4 is using Bootstrap 5. It is simply not worth worrying about whittling down the css and javascript unless you have really good reason to. If you need extra css and js put your stuff in the template user.css/user.js - and you could read about how to manage web assets here: https://docs.joomla.org/J4.x:Web_Assets

webdevtim · Post by **webdevtim** » Sat Mar 06, 2021 6:07 pm

ceford wrote: ↑
Fri Mar 05, 2021 8:34 pm
I think you should stop flogging a dead horse. Joomla 4 is using Bootstrap 5. It is simply not worth worrying about whittling down the css and javascript unless you have really good reason to. If you need extra css and js put your stuff in the template user.css/user.js - and you could read about how to manage web assets here: https://docs.joomla.org/J4.x:Web_Assets

I am consuming the Bootstrap documentation and they do things pretty much the way I would do it, but not exactly, because I think they are married to particular methods to satisfy their installed base.

Every web design guide that I have read, however, says that using JS frameworks adds bloat and load time to web pages. So not sure where you are getting the idea that it is not worth whittling down the CSS and JavaScript. I am not talking about adding extra CSS, I am talking about making web design simpler, cleaner, and faster loading so that website pages load instantly on mobile and any other device that goes over 4G networks. Oh yes, since we are used to adding bloat that increases load time we can just brute force decreasing load time by going to 5G and suffering the exposure to 3 millimeter microwave that comes with that.

Facebook created react.js for that very reason, so that Facebook assets load blazingly fast.

Unless Bootstrap 5 does away with this crap, however, I will not use it

Code: Select all

<div class="container">
    <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>
</div>

Designing using CSS Grids would produce the following markup:

Code: Select all

<div class="container">
    <div></div>
    <div></div>
</div>

Wow, so much simpler.

I agree with Nicholas Dionysopoulos

Grid does not require a ton of CSS and JS to work since it's part of the web platform itself. This means that you can shave off 80% of your page load time on slower connections (3G or slower), making Joomla! competitive. Grid doesn't require JavaScript. No JS means that the site will work every single time. Try seeing how responsive a BS2/3/4 site is if you disable JS. Not so much, right? More so when you want to change column orders on smaller screen sizes. See: https://www.joomlashack.com/blog/joomla-news/css-grid/

So by locking me into Bootstrap, you are forcing me to look elsewhere for a platform where I can produce more efficient designs.

Look at how simple a CSS Grid Navbar is: view this with the browser width less than 768 pixels: https://www.sagacicweb-tests.com/teaser-gallery.html Click on the hamburger menu, it actually works; three lines of JS to make that happen.

ceford · Post by **ceford** » Sun Mar 07, 2021 10:03 am

Bootstrap 5 is not using jQuery and you don't have to use Bootstrap if you don't want to. I have a custom template based on Cassiopeia that uses Bootstrap 5 loaded from cdn because I created it whilst Joomla 4 was still using Bootstrap 4. If you want to customise Bootstrap or use something else you can. The snag is that CMS content will have Bootstrap mark-up unless you create template overrides or alternative layout files. That could be a lot of work and a longer term maintenance nightmare. You could even use Bootstrap css but substitute your own Javascript.

The first link you quoted is about CSS Grid vs Bootstrap 4 and says:

You can see CSS Grid in action in Cassiopeia, the default frontend template for Joomla 4.

The second link is to a site where the menu is not accessible!

A lot of people are interested in making their sites faster but don't have the expertise to write their own css or javascript or even the know-how to plugin a different framework. Please let us know how you get on.

Pavel-ww · Post by **Pavel-ww** » Sun Mar 07, 2021 10:04 am

webdevtim wrote: ↑
Sat Mar 06, 2021 6:07 pm
So by locking me into Bootstrap, you are forcing me to look elsewhere for a platform where I can produce more efficient designs.

I already wrote you, in pure form, there is no dependence. This proves the templates built on UKIT (not on bootstrap).
For example, consider the source code of one of the YOOtheme templates. https://demo.yootheme.com/joomla/themes/paladin
You will not find there bootstrap.

But you need to consider the developers community, many of which build their extensions on bootstrap. And you need to consider it only if you create your template for selling a variety of users. If you do it only for your project or for a unique client, you just need to replace the existing code in third-party extensions on your own, through override.

For example, I love Joomshopping very much. But its HTML structure is terrible. I just create my Joomshopping custom template, with my own HTML structure, as I want. Leave only PHP calls. I am writing my own CSS code for this using Flex Box (I have not tried Grid yet ). And the same can be done with any third-party module or component.

webdevtim · Post by **webdevtim** » Mon Mar 08, 2021 5:29 am

Pavel-ww wrote: ↑
Sun Mar 07, 2021 10:04 am

Thanks your reply was very informative and very helpful

For example, consider the source code of one of the YOOtheme templates. https://demo.yootheme.com/joomla/themes/paladin
You will not find there bootstrap.

Yes I like the clean HTML, no CSS-Grids, but I get the point.

But you need to consider the developers community, many of which build their extensions on bootstrap. And you need to consider it only if you create your template for selling a variety of users. If you do it only for your project or for a unique client, you just need to replace the existing code in third-party extensions on your own, through override.

Well I would like to help the developer community ween themselves from Bootstrap

For example, I love Joomshopping very much. But its HTML structure is terrible. I just create my Joomshopping custom template, with my own HTML structure, as I want. Leave only PHP calls. I am writing my own CSS code for this using Flex Box (I have not tried Grid yet ). And the same can be done with any third-party module or component.

Flexbox has it's place when you want to arrange an undetermined number of elements in an organized way, but CSS Grids provides the same functionality such that it almost makes Flexbox irrelevant.

CSS Grids permits elements to be arranged in a specific way, or automatically when the number of elements cannot be determined in advance.

CSS Grids is a designer dream come true when it comes to creating designs that look outstanding on any device without the need for JavaScript to make it look outstanding. There is still a place for JavaScript, but it isn't needed for any layout, responsive, adaptive, consideration, that is handled by CSS Grid functions, the minmax() function and @media queries.

See:
https://developer.mozilla.org/en-US/doc ... rid_Layout
https://www.joomlashack.com/blog/tutori ... icit-grid/
https://www.joomlashack.com/blog/joomla-news/css-grid/
https://www.joomlashack.com/blog/tutori ... icon-menu/

https://css-tricks.com/snippets/css/com ... uide-grid/

erick-b · Post by **erick-b** » Mon Mar 08, 2021 7:38 am

my main concern is to remove totally that useless bootstrap thing from frontend , any version

Pavel-ww · Post by **Pavel-ww** » Mon Mar 08, 2021 1:15 pm

webdevtim wrote: ↑
Mon Mar 08, 2021 5:29 am
CSS Grids permits elements to be arranged in a specific way, or automatically when the number of elements cannot be determined in advance.

Thanks. I am familiar with CSS Grid and have a practice with this already more than two years and know that this is a great technology. I mean that it is still not used in the working draft, because in all the will of clients for whom I make websites.

webdevtim · Post by **webdevtim** » Mon Mar 08, 2021 6:50 pm

Yes, I am stuck maintaining old sites that depend on old technology as well. I just thought with Joomla 4 we could have a clean break to something new and then have Joomla 3.xx continue to be maintained for a couple more years for those that wish to stick with the tried and true.

I noticed that English isn't your first language, wish we all spoke the same language across the planet, that would help us all understand each other better. My grandmother spoke German and broken English. My parents spoke English and some German, I speak English and enough German to order dinner. Ich möchte eine Bratwurst, bitte. I actually speak Spanish much better than I can speak German.

brian · Post by **brian** » Mon Mar 08, 2021 10:17 pm

As already stated the default template in Joomla 4 uses bootstrap 5 not 4
As already stated you do not need to use bootstrap 5 in Joomla 4. Just as you dont have to use bootstrap 2 with Joomla 3.

I would stop reading the documentation on Bootstrap 4 as it is leading you down the wrong path.

Personally I found bootstrap 5 very easy to work with and produced an incredibly fast AND accessible site. But I am just as sure that you could do the same with any frontend framework or even one of your own invention.

As I can't link to the site I built I will just link to the magazine article about it where you can read more and get the link to test it yourself.

https://magazine.joomla.org/all-issues/ ... -4-website

webdevtim · Post by **webdevtim** » Fri Mar 12, 2021 4:12 pm

Thanks you Brian. I have consumed everything possible where CSS Grids are concerned and I am completely sold on how easy it makes designing responsive/adaptive templates that looks spectacular on any device and cannot understand why it wasn't immediately adopted universally as the web design standard.

Thank you also for the Bootstrap 5 reference, I was going through the Bootstrap 5 documentation but the documentation available at https://getbootstrap.com/docs/5.0/getti ... roduction/ looked to be not different from Bootstrap 3. Now that I look again, I see that they have done away with the class="row" containers. I must have gotten redirected to old Bootstrap 4 documentation by mistake. I will consume this documentation as well and see how this dovetails with CSS Grids.

I think we can build incredible interfaces with CSS Grids, I have already experimented with this and I am amazed with how much I can do with such simple code. You are suggesting that we can do similar amazing things with Bootstrap 5. Perhaps it has incorporated CSS Grids in it's style sheets, I will read to find out. The goal is to be able to design the most stunning templates with the least effort possible. Are there packages for Sublime Text 3 for Bootstrap 5 available yet, helps to have hints as I type and linting as well?

And most of all, thank you for making it clear to me that Bootstrap 5 isn't a requirement for developing Joomla 4 templates, but that it is available to anyone that wants to build Joomla templates based on Bootstrap 5.

Cheers

webdevtim · Post by **webdevtim** » Fri Mar 12, 2021 5:45 pm

I will end this with a couple of quotes from Nicholas Dionysopoulos:

I honestly feel that Joomla 4 is a much-needed stepping stone to the future development of Joomla and its continued existence. It is a bridge between the old and trusted CMS model of the early 00s and the needs of modern site development. It combines the best features of both worlds, offers raw power to the expert and a friendly interface to the novice. Not every site has the budget or human capital to be built on a framework like Laravel or Drupal. Not every site fits in the watered-down, content creator-centric approach of WordPress. The niche Joomla fills is large and freely encroaches into both extremes. In short, I think it’s the right thing for the time it’s released, something which will help not only hold but expend Joomla’s market share. Combined with the fact that Joomla is still the only project without a benevolent dictator or VC funding we are the living proof that FOSS idealism is not antithetic to the development of a mass distributed product fit for small, medium and large businesses alike. In short, it makes me feel proud to be part of the Joomla family once again.

and

Grid does not require a ton of CSS and JS to work since it's part of the web platform itself. This means that you can shave off 80% of your page load time on slower connections (3G or slower), making Joomla! competitive. Grid doesn't require JavaScript. No JS means that the site will work every single time. Try seeing how responsive a BS2/3/4 site is if you disable JS. Not so much, right? More so when you want to change column orders on smaller screen sizes.

Pavel-ww · Post by **Pavel-ww** » Sat Mar 13, 2021 6:53 am

webdevtim wrote: ↑
Fri Mar 12, 2021 4:12 pm
Now that I look again, I see that they have done away with the class="row" containers.

Hi.
No, they did not get rid of and unlikely to get rid. This is the basis of the Bootstrap grid.

webdevtim wrote: ↑
Fri Mar 12, 2021 4:12 pm
Perhaps it has incorporated CSS Grids in it's style sheets

Grid CSS is not in Bootstrap 5. And I think will never be. To do this, they need to completely rewrite bootstrap, removing all classic grid construct schemes. And, if you practice Grid CSS, should be clear to you that it is self-sufficient and does not make sense to create a framework, based on it.

webdevtim · Post by **webdevtim** » Sat Mar 13, 2021 4:49 pm

Thanks, I shouldn't speak before completely consuming the Bootstrap 5 documentation. That <div class="row"> is the problem because without it I could support both Bootstrap where extensions require it and CSS Grids by just overriding the Bootstrap classes. Requiring that row class div makes it an either or proposition.

And yes now that you mention it, GSS Grids does provide everything I need for layout which would obviate the need for Bootstrap.

I will consume the Bootstrap 5 documentation regardless, because I think it will continue as a framework on down the line at least for the next couple of years. At the same time I will hone my CSS Grid skills and explore all the novel implementations I can think of.

Thanks Pavel-ww for the heads up again. I will not speak again until I have read the entire Boostrap 5 documentation suite. You words are much appreciated.

The Joomla! Forum™

Still Confused About Need to Include Bootstrap 4 Classes

Still Confused About Need to Include Bootstrap 4 Classes

Re: Still Cocfused About Need to Include Bootstrap 4 Classes

Re: Still Confused About Need to Include Bootstrap 4 Classes

Re: Still Cocfused About Need to Include Bootstrap 4 Classes

Re: Still Confused About Need to Include Bootstrap 4 Classes

Re: Still Confused About Need to Include Bootstrap 4 Classes

Re: Still Confused About Need to Include Bootstrap 4 Classes

Re: Still Confused About Need to Include Bootstrap 4 Classes

Re: Still Confused About Need to Include Bootstrap 4 Classes

Re: Still Confused About Need to Include Bootstrap 4 Classes

Re: Still Confused About Need to Include Bootstrap 4 Classes

Re: Still Confused About Need to Include Bootstrap 4 Classes

Re: Still Confused About Need to Include Bootstrap 4 Classes

Re: Still Confused About Need to Include Bootstrap 4 Classes

Re: Still Confused About Need to Include Bootstrap 4 Classes

Re: Still Confused About Need to Include Bootstrap 4 Classes

Re: Still Confused About Need to Include Bootstrap 4 Classes

Re: Still Confused About Need to Include Bootstrap 4 Classes

Re: Still Confused About Need to Include Bootstrap 4 Classes