exchange umbraco bootstrap with something more modern and versatile

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Jakob Lithner 61 posts 264 karma points

Mar 27, 2020 @ 23:09

0

Exchange Umbraco Bootstrap with something more modern and versatile

Bootstrap is popular but has some disadvantages.

Is it possible to exchange the Umbraco default Bootstrap usage with another modern UI framework? I have heard a lot of Foundation and am considering it for my new Umbraco 8 site. I am also thinking of pure CSS3.

What are your thoughts on this? Will this cause me problems? Will I loose the ability to have my users create custom Grid layouts as this seems to be tightly coupled to Bootstrap?

Copy Link
Chris Norwood 131 posts 642 karma points

Mar 28, 2020 @ 02:26

1

You can create your own grid layouts - it doesn't have to be Bootstrap, so although the existing layouts are coupled to Bootstrap there's nothing to stop you adapting them and outputting HTML that would work with Foundation.

You can see how they're implemented for Bootstrap 3 in ~\views\partials\grid\ - all you'd have to do is rewrite the rendering for Foundation and amend any calls to render the partial view to use your new Foundation based grid component.

Copy Link
Jakob Lithner 61 posts 264 karma points

Mar 28, 2020 @ 22:12
0
Thanks for your answer. I looked in the folder you mentioned. There are a lot of files and they make me confused:
```
Bootstrap2.cshtml 
Bootstrap2-Fluid.cshtml 
Bootstrap3.cshtml 
Bootstrap3-Fluid.cshtml 
Editors/Base.cshtml 
Editors/Embed.cshtml 
Editors/Macro.cshtml 
Editors/Media.cshtml 
Editors/Rte.cshtml 
Editors/Textstring.cshtml
```
Do I need to rewrite the content of ALL of them?

The content does not look trivial to rewrite ...
Copy Link
Chris Norwood 131 posts 642 karma points

Mar 28, 2020 @ 22:22
100
No, you would only need to add one - something like say Foundation.cshtml - and adapt the code from one of the existing grids (the other files should be OK as they are)

Then when you render a grid in a view you can pass the name of the view to use - e.g. I have a Bootstrap4.cshtml view and I can render it in a partial view like this:
```
@inherits UmbracoViewPage<ContentModels.GridComponent>
@using ContentModels = NDD.Core.Models.Content;
@using Umbraco.Web
@{ 
    var g = Model.GetProperty("contentGrid");
}

@if(g != null)
{
    @Html.GetGridHtml(g, "Bootstrap4");
}
```
So if you replace the "Bootstrap4" with "Foundation" (once you've created the view in the Grids folder) you can experiment with it to make it work the way you want to :).

The code in the bootstrap grid views is quite complex, but you should only need to amend how the HTML is written in the renderRow function and possibly alter the parent div's class.
Copy Link
Jakob Lithner 61 posts 264 karma points

Mar 29, 2020 @ 13:03

0

Thanks, I will try that!

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?