SOLVED Gantry 5 and Bootstrap 3: Question Regarding Best Practice
-
-
- R2ba5Aq4
- Rocketeer
- Posts: 75
- Thanks: 10
-
Hi
At the time of this writing Gantry 5 uses Bootstrap v2.3.2, consistent with Joomla! which still uses Bootstrap 2. The problem is that all of my components use Bootstrap 3.
I am using one Bootstrap 3 file: bootstrap.min.css to provide a consistent theme across all of these components. Bootstrap.min.css is added once in the Gantry 5 administrator via Atoms.
I would also like for all of the inputs, tables, alerts, and other items to have one, consistent theme across my entire Web site --- not just the components. Furthermore, I assume that Joomla! will eventually update its version of Bootstrap and that Gantry will follow shortly thereafter. For these reasons, I have chosen NOT to map the bootstrap.min.css file to the individual components. As one example, I use html{...} instead of .mycomponent html {...}.
I've had to tweak my custom.scss file to reconcile gantry-bootstrap.css with bootstrap.min.css, but for the most part everything seems to be working fine and the two versions of bootstrap seem to coexist without any issues.
Given all of this I have a "best practices" question: Is it okay to use a non-mapped Bootstrap 3 file (bootstrap.min.css) is this manner (to override all inputs, tables, alerts, etc.) to achieve a consistent theme across my entire Web site, or should I be mapping the bootstrap styles to specific components and then adding common styles from bootstrap.min.css to custom.scss (without the mapping) for things like inputs, tables, alerts, etc.?
Thank you - Last Edit: 8 years 4 months ago by R2ba5Aq4. Reason: More info.
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 21595
- Thanks: 3098
- messin' with stuff
-
At the risk of being very wrong... I don't think Gantry 5 loads any bootstrap library... it interacts with Joomla to load Joomla's version of Bootstrap (via Joomla's included library) when Joomla needs it... but I don't believe it loads it's "own" boostrap elements in any way... our base styling in Gantry 5 is custom developed and we call it Nucleus... Gantry 4 did use a stripped down version of Bootstrap
As to your best practices question... the more specific the better... you'd probably be "OK" loading the whole library but you'd want to be on the lookout for conflicts if you see any styling issues arise... so if you controlled on that on a case by case basis by only using the elements you need and placing those within your custom.scss file you'll be more assured that you've limited any conflicts. -
The following users have thanked you: R2ba5Aq4
- SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- R2ba5Aq4
- Rocketeer
- Posts: 75
- Thanks: 10
-
Hi
Thank you for the reply. I'm no expert in bootstrap
but the file I was referring to --- that is, the file that contains several styles that conflict with my bootstrap.min.css theme --- is located as follows:
media/gantry5/assets/css/bootstrap-gantry.css
There is another bootstrap file located as follows:
media/jui/bootstrap.min.css
This second file doesn't seem to load on every page. Maybe this is the Joomla! version of bootstrap you were referring to.
I think you answered my question when you said, "the more specific the better." Since all of my components are using Bootstrap 3, I suppose I could create one wrapper class for all of them and then map the styles in my Bootstrap 3 theme to that class. However, this could get tricky. For example, let's say that I want for all of the tables and inputs, including those located "outside" of the components, to share the same style contained in my Bootstrap 3 theme. Then I would have to cut and paste the corresponding styles from bootstrap.min.css to custom.css, removing the wrapper class from the selectors. I'm not sure that I can manage all of that, especially over time as these files are updated. Anyway, I think I just need to weigh the costs and benefits myself and make a decision.
Thanks again for your time and input. It was very helpful! - Last Edit: 8 years 4 months ago by R2ba5Aq4.
-
Time to create page: 0.046 seconds