[Support request] Default Unsemantic Classes

[Ahmed]

Hi,
I’m trying to use the default css grid classes provided by unsemantic on a custom template, but it seems that those classes are missing from my main CSS file. For ex. I would like to use “grid-50” but it doesn’t work because the class is not defined.

What’s the best way to include the entire grid system?

Thanks!

[Fernando]

Hi Ahmed,

By default, those classes are meant for articles in Blog and archive pages. For non-article elements, our suggested way to create grids is to use the GB Grid Block.

Reference: https://docs.generateblocks.com/article/grid-overview/

[Ahmed]

Thanks Fernando! How can I get that layout transferred to a custom php template file?

[Fernando]

What’s your template file for? Is it for archive pages or a single post or something else?

And, where in this template are you adding a Grid?

Perhaps you can simply add an action hook, and hook a Block Element there.

[Ahmed]

Yes, it’s a single post for a custom plugin. I guess I can build a page template and then use the same grid pattern in the custom file.

[Ahmed]

Ok, that’s not going to work because using the block builder adds a lot of inline styling for positioning, margins, etc. How can I get access to the Unsemantic utility classes like class=”grid-25″, class=”grid-25 mobile-grid-50″, etc. on a single post and archive page?

Thanks!

[Leo]

How can I get access to the Unsemantic utility classes like class=”grid-25″, class=”grid-25 mobile-grid-50″, etc. on a single post and archive page?

This is not a good idea at all and might cause some conflicts with the theme which is already using Flexbox.

If you are going to write HTML then why not create the columns using Flexbox instead?
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

[Author]

Posts