Er.... Think I've just worked it out. I added the responsive files into the site and responsive.min appears as a choice on the Stylesheets section of the Grid Layout datatype.:)

Cheers,

Craig

Hmm.... That wasn't the answer at all, I have a car crash. The grid is adding a load of extra inline style info that isn't wanted. Some of the grid info is Bootstrap when I need it to be Responsive. How do we change that?

I hope it's not a major issue to change it as I've created the whole HTML templating code with Responsive. Really don't want to use Bootstrap on this project.

Or maybe the Grid isn't mature enough for production use yet.

Any advice appreciated.

Think I'm getting there but it's the usual Umbraco drag (for me at least ;))

Cloned the /Views/Parials/Grid/Bootstrap3.cshtml and renamed it Responsive.cshtml.

Noted the single quotes output into html: @Umbraco.If(singleColumn, "<div class='container'>") so changed to @Umbraco.If(singleColumn, "<div class=\"container\">"). Harmony restored :)

Trying to make it output more "Responsive" html. So removed all the divs with a class of "container", as they were causing issues as the class "container" has a predefined width set in my CSS. Also removed classes like Umb-Grid as I couldn't see what they were doing and the output looked fine. Also removed as many other div pairs as the output looked like some tag-soup nightmare.

Another slight issue is that all the column settings are for "m", you can't change or add them in the editor. That might be a setting too far.

Now I realise that all those many, many divs might be protecting me from something, but at the moment, they just seem wasteful. And I'm also sensitive to the fact that this stuff is shiny-new. Anyway, here's my code as it stands. If there's a better way to change CSS frameworks and keep as much control of the HTML as possible, like you usually can with Umbraco, then I'd love to hear about it.

Cheers,

Craig

@inherits UmbracoViewPage<dynamic>
@using Umbraco.Web.Templates
@using Newtonsoft.Json.Linq

@*
    Razor helpers located at the bottom of this file
*@

@if (Model != null && Model.sections != null) {
var oneColumn = ((System.Collections.ICollection)Model.sections).Count == 1;

        if (oneColumn) {
            foreach (var section in Model.sections) {
            <div>
                @foreach (var row in section.rows) {
                @renderRow(row, true);
                }
            </div>
            }
        }
        else { 
            <div class="row">
                @foreach (var s in Model.sections) {
                    <div class="[email protected]">
                        @foreach (var row in s.rows) {
                        @renderRow(row, false);
                        }
                    </div>
                }
            </div>
        } 
}

@helper renderRow(dynamic row, bool singleColumn) {
    <div @RenderElementAttributes(row)>
        @Umbraco.If(singleColumn, "<div>")
        <div class="row">
            @foreach (var area in row.areas) {
            <div class="[email protected]">
                <div @RenderElementAttributes(area)>
                    @foreach (var control in area.controls) {
                    if (control != null && control.editor != null && control.editor.view != null) {
                    <text>@Html.Partial("grid/editors/base", (object)control)</text>
                    }
                    }
                </div>
            </div>}
        </div>
        @Umbraco.If(singleColumn, "</div>")
    </div>
}

@functions {
    public static MvcHtmlString RenderElementAttributes(dynamic contentItem) {
    var attrs = new List<string>();
    JObject cfg = contentItem.config;

    if (cfg != null)
        foreach (JProperty property in cfg.Properties()) {
        attrs.Add(property.Name + "='" + property.Value.ToString() + "'");
        }

    JObject style = contentItem.styles;

    if (style != null) {
    var cssVals = new List<string>();
    foreach (JProperty property in style.Properties())
        cssVals.Add(property.Name + ":" + property.Value.ToString() + ";");

    if (cssVals.Any())
        attrs.Add("style='" + string.Join(" ", cssVals) + "'");
    }

    return new MvcHtmlString(string.Join(" ", attrs));
    }
}

Hi Graig,

It seems that you already have found out how to do it, but I would like to provide you the documentation about how to use your own grid framework with the new grid editor. Here is the documentation for the grid editor, including how to use another grid, than the default Bootstrap 3. http://our.umbraco.org/Documentation/Using-Umbraco/Backoffice-Overview/Property-Editors/Built-in-Property-Editors-v7/Grid-Layout

And here are some documentation (still in working progress at the moment) on best practices when you are working with the new grid editor in Umbraco 7.2 http://our.umbraco.org/Documentation/Using-Umbraco/Backoffice-Overview/Property-Editors/Built-in-Property-Editors-v7/Grid-Layout-Best-Practices

Hope this helps, if you haven´t seen it yet.

/Dennis

Thanks Dennis, I'd already read them. I only have a simple use case for the grid as advised. However, as changing the framework was mentioned several times I thought it would be easier that it is. Out of the box, Bootstrap is "baked in". I guess in a future iteration it could be made to be a bit easier to change.

Haven't even attempted to offer settings and styles as I haven't seen an explanation I can get my head around yet.

Cheers,

Craig

Just as an example of how bad the Grid tag soup is, even after I've tried to cut it down....

My original HTML

                        <div class="content">                               
                            <h1>My Main Title</h1>
                            <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
                        </div>

in the grid becomes:-

 <div class="content">
<div>
    <div>
        <div>
        <div class="row">
            <div class="col-m-12">
                <div >
                    <h1>My Main Title</h1>
                </div>
            </div>        
        </div>
    </div>
</div>
<div>
    <div>
        <div class="row">
            <div class="col-m-12">
                <div>
                    <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
                </div>
            <?div>
        </div>
    </div>
</div>

Not pretty is it?

Craig

Hi Criag, just want to say a quick thanks for sharing. I was wondering where the annoying extra css was being injected from and after a quick Google I was able to find out with your bootstrap3 example. I am still having trouble with the mysterious equalizer class which comes when you insert am image with right text. I even deleted the whole bootstrap css file and it still doesn't go away!

Thanks,

Steph

@Craig a lot of those extra div tags are shown in your grid file code so just remove them i.e. you don't need @Umbraco.If(singleColumn, "<div>") and @Umbraco.If(singleColumn, "</div>")

 You can probably get rid of the one in the empty div tags in the "foreach (var section in Model.sections) {" section too (I haven't tested that though) 

@Stephanie - have a look in this folder: \App_Plugins\Grid\Editors\Render\  There should be a file called "media_text_right.cshtml" that you can remove the "equalizer" classes from.

is working on a reply...