Build System

This guide covers OxyMade’s build system for developers who want to customize the framework or understand how it works.

Overview

OxyMade uses Node.js build scripts to generate:

• CSS framework file
• Selector definitions
• Class mappings
• Component bundles

Build Scripts

Available npm scripts in package.json:

Framework Source Files

Located in /framework/src/:

Utility Modules

Build Scripts

CSS Generation

Process

1. Load selector definitions from JSON
2. Process each selector’s properties
3. Handle nested properties
4. Generate breakpoint variants
5. Output to oxymade-framework.css

generate-full-css.js

Main CSS generator (~69KB):

// Simplified structure
const selectors = loadSelectors();
let css = '';

for (const selector of selectors) {
  css += generateSelectorCSS(selector);
  css += generateBreakpointVariants(selector);
}

writeFile('assets/oxymade-framework.css', css);

Output Structure

/* Base classes */
.flex { display: flex; }
.grid { display: grid; }

/* Breakpoint variants */
@media (min-width: 480px) {
  .sm-flex { display: flex; }
  .sm-grid { display: grid; }
}

@media (min-width: 768px) {
  .lg-flex { display: flex; }
  .lg-grid { display: grid; }
}

Breakpoint System

Mapping

OxyMade breakpoints map to Oxygen:

const breakpoints = {
  'breakpoint_base': null,
  'breakpoint_sm': 'phone_portrait',
  'breakpoint_md': 'phone_landscape',
  'breakpoint_lg': 'tablet_portrait',
  'breakpoint_xl': 'tablet_landscape'
};

Breakpoint Widths

Selector JSON Structure

Selectors are defined in /data/selectors-only.json:

{
  "id": "uuid-string",
  "name": "flex",
  "collection": "OxyMade Flexbox",
  "type": "class",
  "locked": true,
  "children": [],
  "properties": {
    "breakpoint_base": {
      "layout": {
        "display": "flex"
      }
    }
  }
}

Property Categories

Class Mappings

/data/class-mappings.json maps UUIDs to class names:

{
  "uuid-123": "flex",
  "uuid-456": "grid",
  "uuid-789": "text-lg"
}

Used for:

• Quick lookups
• Oxygen integration
• Class name resolution

Customizing the Build

Adding New Utilities

1. Create a new module in /framework/src/:

// my-utilities.js
export function generateMyUtilities() {
  return [
    {
      name: 'my-utility',
      collection: 'OxyMade Custom',
      properties: {
        breakpoint_base: {
          custom_css: {
            'my-property': 'value'
          }
        }
      }
    }
  ];
}

2. Import in the build script
3. Run npm run build:css

Modifying Existing Utilities

1. Find the source file in /framework/src/
2. Modify the generation function
3. Run npm run build:css
4. Test the output

Adding Breakpoint Variants

Ensure your utility includes breakpoint properties:

{
  name: 'my-utility',
  properties: {
    breakpoint_base: { /* base styles */ },
    breakpoint_sm: { /* sm styles */ },
    breakpoint_lg: { /* lg styles */ }
  }
}

Build Output

oxymade-framework.css

Main CSS output (~49KB):

• All utility classes
• Breakpoint variants
• CSS custom properties
• Organized by collection

selectors-only.json

Lightweight selector data:

• Class names
• Collections
• Property references
• Used for Oxygen sync

Development Workflow

Making Changes

1. Modify source files in /framework/src/
2. Run appropriate build script
3. Test in development
4. Verify Oxygen integration

Testing Changes

1. Run build script
2. Open Oxygen builder
3. Apply classes to elements
4. Check browser dev tools
5. Test responsive behavior

Debugging

Add console logging in build scripts:

console.log('Processing selector:', selector.name);
console.log('Generated CSS:', css);

File Structure

/framework/
├── src/
│   ├── shared-utils.js
│   ├── grid-utilities.js
│   ├── flexbox-utilities.js
│   └── ...
├── build.js
└── build-components.js

/data/
├── selectors-only.json
├── class-mappings.json
├── variables.json
└── layers.json

/assets/
└── oxymade-framework.css

/generate-full-css.js

Performance Considerations

CSS Size

• Full framework: ~49KB
• Minified: ~35KB
• Gzipped: ~8KB

Build Time

• Full build: ~2-5 seconds
• CSS only: ~1-2 seconds

Runtime Performance

• CSS variables: Hardware accelerated
• Utility classes: No specificity issues
• Media queries: Standard browser handling

Related

• CSS Variables Reference
• Settings Options
• Requirements