All font sizes are set in the Main Stylesheet as :root variables: var(--fs0) > var(--fs6). ie. to adjust font sizing, do so by way of editing the :root variables.

These variables are then applied in Oxygen > Global Settings (from within the Oxygen Builder)

**Note: This 'framework' is still a "work-in-progress" and is still likely to evolve.

Fundamental sizing for gaps and margins between cells/columns and rows are set by :root variables in the Main stylesheet.

These Global Variables are:

--gutters: 20px; /* use for default Oxy SECTION left&right padding */
--sect-tb: calc(2vw + 20px); /* use for default Oxy SECTION top&bottom padding */
--gap: 4vmax; /* desired default gap for FlexBox and CSSGRID */
--vgap: 20px; /* vertical spacing for content in grid "tiles" */
--p: 1vmax; /* padding */
--bdr-rad: .8em; /* border radius */
--col-dyn-sm: 200px; /* width for tile in dynamic CSSGRID */
--col-dyn: 400px; /* width for tile in dynamic CSSGRID */
--col-dyn-lg: 600px; /* width for tile in dynamic CSSGRID */

If using FLEXBOX and 'gaps' are applied, the container has negative L&R margins (that match the gap size) so that the tile edges line up on the L&R edges of the page container *at the time of creating this, FLEXBOX wasn't found to use 'gap' effectively (but CSSGRID does)

Variations exist for both FLEX and GRID layouts specifying tile/column sizes. eg.

For a FLEXBOX layout, start by adding class flx* to the parent div
For a CSSGRID layout, start by adding class grd to the parent div

* the flx container will have a negative bottom margin corresponding to the eventual gap/row-gap value (this is because each 'tile' in the grid will have a bottom margin and it's to remove that unwanted bottom margin and the end of the div)

.... then add classes specifying column configuration

For evenly spaced columns, add one of the following classes to the parent div (the number represents the number of columns):
.flx-2, .flx-3, .flx-4, .flx-5, .flx-6
.grd-2, .grd-3, grd-4, .grd-5, .grd-6

*Each number in the classes below, represents a 'column' and their relative widths

flx-1-2 / grd-1-2
flx-3-2 / grd-3-2   etc...

Various modifiers also exist (to be applied to the containing parent divs):
.no-break
.tiles-centre
.tiles-center
.center-row
.centre-row
.tiles-left
.tiles-right
.tile-top
.tiles-end 
.tiles-middle
.tiles-stretch,.eq-h
.grow, .flx-grow
.no-gutters
.flx-row
.flx-wrap
.flx-between
.flx-around
.full-span

For additional formatting classes for use inside of tiles, refer the table below:
.tile__inner  /* Used inside of the div in Oxy REPEATER. This div can have an href applied */

Notes:

The aim is to:

• have only core formatting classes for 'grids' (be it FLEXGRID or CSSGRID) that can be used throughout a site to provide a global foundation for structure.
• have bare minimal core classes that are intuitive and easy to remember in providing that structure. ie 'flx', 'flx-3', 'grd-2', 'gap' etc
• allow for customised formatting by adding site/page/module specific classes that can be used for global styling and responsive design. eg.
  Default FLEX formatting would be: 'flx.flx-3.gap-sm'
  Custom site formatting would include a site specific class such as: '.thissite-promo-row'  ... where the first is used to style the 'grid/flex containing div' the second for custom styling to the tiles.

Basic overview of setting up a grid:
Apply all of the following options to the parent-containing-div for a grid

1. Decide on .flx or .grd
2. Set the number of equal columns (tiles) or sizes of 2 columns (tiles) ie. .flx-4  or  .grd-2-1 ..... child divs are 'columns' or 'tiles'
3. **Note global variables for '--gap' and '--vgap' at the top of this page. They set the global spacing for ALL grid items throughout a site. Variants of *-sm, *-xl etc are all derived from the above variables
4. Set a gap between 'tiles' (if desired) .... setting a single 'gap' or 'gap-sm' sets that gap size for columns AND rows
5. Set a 'row gap' if it's to be different from column gap. ie. .row-gap-sm
6. Use 't-vgap' (with size variants) to set vertical spacing for content within tiles  (pretty handy)
7. Additional grids can then be added in exactly the same way inside of tiles to provide more complex grid layouts (refer below)

Examples:

• A simple 4 column grid with CSSGRID with default gap ....   .grd.grd-4.gap
• 2 column CSSGRID with sizes 2/3 and 1/3 with a small column gap and default row gap......   .grd.grd-2-1.gap-sm.row-gap
• 3 column FLEXGRID with large gap and setting small vertical spacing for contents within tiles.....    .flx.flx-3.gap-lg.t-vgap-sm
• Some visual examples are provided below...

For easier responsive operation, it seems to work well to have just 2 columns/tiles inside the main parent div, and then add further grid/flex formatting within either of those columns where needed

.grd.grd-1-3.gap

.flx.flx-2-1.gap-sm