search

RockefellerArchiveCenter / styles

Style Library for the Rockefeller Archive Center
https://styles.rockarch.org
MIT License
0 stars 1 forks source link

Replace Neat with CSS grid layout #106

Closed HaSistrunk closed 2 years ago

HaSistrunk commented 2 years ago

Fixes #105 Removes Neat and replaces it with a 12-column grid using CSS grid layout grid-column styles (see mixins).

The grid-column mixin can be used flexibly to specify the starting column grid-line and number of columns that the item spans on the page. By default it starts at the first column and spans all 12 columns.

Updates the footer layout with this approach, which is the only component/layout currently using Neat. However, I'm hoping this is flexible enough once we get into implementation to replace Neat or other 12-column grid approaches.

HaSistrunk commented 2 years ago

Ok, I've adjusted this a little to hopefully make it clearer how this is working. The grid-column property is a short-hand for grid-column-start and grid-column-end, so I've separated these out in the mixin.

Although there are only 12 columns, the col-start and span values add up to 13. Thinking about this, it kind of makes sense but also is a little confusing at first. I'm not sure if there's anything we can do about that?

I adjusted the code comments to better explain this. The numbers are referring to grid-lines, not column numbers. If you inspect in the browser with the grid view, it illustrates this pretty clearly: image

I'm seeing things like @include grid-column(col-start / span 6); which I'm assuming is the equivalent of @include grid-column(col-start 1 / span 6);. Assuming I'm right, is there a way to NOT have to pass those variables when we're using the default value, so something like @include grid-column(span 6);?

Yep, good call! This is now possible.

HaSistrunk commented 2 years ago

I also want to note that grid isn't supported by Internet Explorer, so this would be a definitive move away from support for that browser.