I’ve been able to get around it by entering an empty grid item, but it seems like a hack to enter empty space to push over other grid items. The idea is to use the middle four grid items so the data is centered (in a 12 column setup.)
This works, is it the right way to go?
B
D
The output accomplishes what I’m trying for but I’m wondering if it’s the right way to go about it. I’m used to bootstrap which has convenient “offset” classes for grid columns.
Related, how do I get two columns in the mobile breakpoint instead everything in the grid dropping to one column?
In lieu of an explicit class for offset, empty grids are perfectly acceptable. Even in Bootstrap, the offset-classes can be a hassle (especially between v3 and v4), and other than a tiny superfluous piece of HTML there is no difference between using them or not.
Unless you declare extra attributes to the empty columns, such as for ARIA or screenreaders, then it will never be a nuisance to anyone, and semantically it is more declarative than the offset (“These five lego blocks form the structure”, rather than “these four lego blocks and the empty space at the end form the structure”).
I’m not familiar enough Nucleus in regards to mobile breakpoints, but I would assume that setting a higher-level breakpoint for the columns would cause the folding to fial on lower-level breakpoints.
I’m actually thinking of developing a new default theme that will have more useful utility classes and it would be much better documented. I already have ported the lovely Spectre.css CSS framework to SCSS. Now I just need to covert antimatter (or something similar) to use it.