How to modify the global grid style?

[tisonkun]

Hello!

I cannot find the style definition of Docu's default global grid. I'd like to define a grid layout with 10 grids + 32px padding per column. And I wonder if it's possible by override some predefined class, or I should swizzle some components.

[slorber]

Our grid system comes from Infima, a lightweight version of Bootstrap:
https://infima.dev/docs/layout/grid

This is historical and I'm going to internalize it in our classic theme later, as an implementation detail. Until then it's not easy unfortunately to customize our default grid system.

[tisonkun]

Got it. And I just remembered that we have a customizable them system .. Let me see.

[tisonkun]

Until then it's not easy unfortunately to customize our default grid system.

After that, how can I imagine to customize the default grid system?

[slorber]

Our theme loads the Infima CSS file through a client module:

    getClientModules() {
      const modules = [
        require.resolve(getInfimaCSSFile(direction)),
        // ... other things
      ];

      return modules;
    },

function getInfimaCSSFile(direction: string) {
  return `infima/dist/css/default/default${
    direction === 'rtl' ? '-rtl' : ''
  }.css`;
}

    configurePostCss(postCssOptions) {
      if (direction === 'rtl') {
        const resolvedInfimaFile = require.resolve(getInfimaCSSFile(direction));
        const plugin: PostCssPlugin = {
          postcssPlugin: 'RtlCssPlugin',
          prepare: (result) => {
            const file = result.root.source?.input.file;
            // Skip Infima as we are using the its RTL version.
            if (file === resolvedInfimaFile) {
              return {};
            }
            return rtlcss(result.root as unknown as rtlcss.ConfigOptions);
          },
        };
        postCssOptions.plugins.push(plugin);
      }

      return postCssOptions;
    },

At best we could eventually expose an API to load a custom CSS file instead of Infima (ie provide your own getInfimaCSSFile() impl. You can already achieve that by extending our theme (see #4138) and overriding/replacing the theme getClientModules() result by something else.

But this would still require you to fork Infima and create your own variant of it, build it to a single CSS file, and then provide that file to our theme. Possible, but still requires some work.