Umbraco Block Grid without using inline style tags for variables
Hi,
We use the Umbraco Grid (legacy) in Umbraco 10 and I am looking at moving to Umbraco 12 and moving to use the Block Grid Editor which is being widely promoted as the way forward on Umbraco.
I have been investigating this. One aspect of or website build is that we use a very strong CSP (Content Security Policy) where unsafe-inline is NOT allowed for styles. hence was are moving toward removing all inline styles, and this I find is at odds with the implementation of the Block Grid editor - as least on the front end.
For example, when I remove the style attributes, from the items.cshtml block editor, such as:
Here's how I dealt with this exact same issue. I am not sure how it will work in the long haul, but it is the only thing I could come up with.
I changed all the CSS variables on the style attributes into individual css classes, taking advantage of the fact that the number of columns on the grid is finite.
/* Example snippet */
.umb-block-grid__area-grid-columns-12
{
--umb-block-grid--grid-columns: 12;
}
.umb-block-grid__area-grid-columns-11
{
--umb-block-grid--grid-columns: 11;
}
.umb-block-grid__area-grid-columns-10
{
--umb-block-grid--grid-columns: 10;
}
/* and so on for this variable and the others */
Then I changed the partial views to use the new classes:
Umbraco Block Grid without using inline style tags for variables
Hi,
We use the Umbraco Grid (legacy) in Umbraco 10 and I am looking at moving to Umbraco 12 and moving to use the Block Grid Editor which is being widely promoted as the way forward on Umbraco.
I have been investigating this. One aspect of or website build is that we use a very strong CSP (Content Security Policy) where unsafe-inline is NOT allowed for styles. hence was are moving toward removing all inline styles, and this I find is at odds with the implementation of the Block Grid editor - as least on the front end. For example, when I remove the style attributes, from the items.cshtml block editor, such as:
The whole design on the front end fall apart.
I will also look at maybe trying to introduce Bootstrap 5 Grid CSS
Can the Block Grid operate successfully without the use of these inline styles?
This seems greatly limiting.
Thank you for any feedback.
Kind regards.
Peter
Here's how I dealt with this exact same issue. I am not sure how it will work in the long haul, but it is the only thing I could come up with.
I changed all the CSS variables on the style attributes into individual css classes, taking advantage of the fact that the number of columns on the grid is finite.
Then I changed the partial views to use the new classes:
Then I removed the style attributes.
You'll have to decide on a cap for the number of rows you will support.
Take it with a grain of salt. I don't know if my answer is the best one, but I hope it is better than no answer at all!
is working on a reply...