Update spacing to match 8-pt grid values shown in Figma

[angela-tran]

This ticket is for updating the spacing in MobiMart so that it matches the 8-pt grid that design uses for their Figma screens.

Additional context

Yes, this does follow the 8-pt grid. Whenever I create new designs for mobimart or calitp.org, I automatically update with that design framework. I know we never discussed that explicitly for the homepage dev work though—I'll do a better job noting that when we're scoping in the future. If we can create a new ticket for updating the spacing in backlog that would be great

Originally posted by @segacy1 in #489 (comment)

[angela-tran]

We don't know exactly how much there is on MobiMart to update over to 8-pt grid (it could be a lot). And MobiMart uses Sass, so it works differently from what we're used to in Benefits.

A dev should go through and see how much there is to update.

[indexing]

@allejo Any updates from your research? Do you have any proposed direction for a refactor, as well as level of effort?

[thekaveman]

👆 RE: the SASS refactor

[allejo]

Lots of Sass Files

There are 23 Sass files in src/_sass/. If we want to rewrite all of our Sass as CSS, we'd have one giant CSS file to maintain. I'm not sure how your other apps are managed, but a giant CSS file could lead to tedious merge conflicts if everyone is working on the same file.

Sass Variables

Most of the Sass variables located in _variables.scss can be replaced by CSS variables. The only exceptions are variables used to customize Tabulator (more on that below). The Sass variables mostly hold colors, and we're not using any Sass color modification functions, so these should be reasonably straightforward to find and replace.

Heavy Use of Nesting

We heavily use CSS nesting. It's not a deal breaker, but we will have to rewrite this as regular CSS. There's probably some automated way of flattening this without compiling it and not losing Sass syntax for other stuff that may need to be migrated differently.

Media Query Functions

We heavily use Sass functions for handling breakpoints; 40 uses over 15 different files.

• media-breakpoint-up
• media-breakpoint-down
• media-breakpoint-between
• media-breakpoint-only

Unfortunately, there's no way for us to use CSS variables for media queries. We'd have to define the breakpoint widths repeatedly throughout the codebase.

These functions extend beyond simple CSS rules that we'd be able to replace with Bootstrap's utility functions. Bootstrap doesn't have enough atomic CSS to do what we want.

Tabulator Uses Sass

We can only partially move away from Sass if we want to continue using Tabulator and customizing it. Tabulator does have version 6 released; however, their official styling customization API is via Sass variables.

Unfortunately, it doesn't look like the project has any intentions of introducing support for CSS variables.

I covered that Tabulator manages its variable through SCSS styling and if you want to customize your themes at that level.

While i understand your desire for this feature, i would consider it confusing to add two levels of configuration of themes, so would not be looking to implement this in Tabulator. Please do not raise a third issue on this subject, it will be closed without notice.

Proposal

Jekyll has Sass built-in, so there's no harm in continuing to use it solely for Tabulator; the rest of the Sass could be rewritten as CSS.