Usage - Getting started

Overview

The Softedge framework is a WordPress theme system built on Bootstrap 5.3. It follows a parent / child architecture — the parent ships every feature, the child picks what it needs and customizes the look.

Architecture

Layer Role softedge-theme Parent — Bootstrap, SCSS components, JS modules, LiveCanvas blocks, WooCommerce support softedge-theme-child Child — variable overrides, font loading, component opt-in, project-specific styles

Build tools

Theme Commands Parent npm run sass (CSS) + npm run build (13 JS modules via Vite) Child npm run sass (CSS only — no JS build needed)

# Parent theme
cd softedge-theme
npm run sass          # compile SCSS → dist/css/bundle.css
npm run build         # compile JS modules → dist/js/*.min.js

# Child theme
cd softedge-theme-child
npm run sass          # compile SCSS → dist/css/bundle.css
npm run sass:watch    # watch mode for development

Parent Theme

Ships all the building blocks: Bootstrap source, custom SCSS components, modular JavaScript, and WordPress integrations. You should never edit the parent directly — everything is overridable from the child.

SCSS structure

softedge-theme/src/scss/
├── main.scss                # Entry point
├── bootstrap5/              # Bootstrap 5.3.8 source (functions, variables, mixins, components)
└── themes/                  # Softedge custom layer
    ├── _variables.scss      # Brand colors, fonts, spacing
    ├── _variables-dark.scss # Dark mode palette
    ├── _maps.scss           # Color maps & utility generation
    ├── _utilities.scss      # Custom utility classes
    ├── _root.scss           # CSS custom properties
    ├── _general.scss        # Global base styles
    ├── components/          # avatar, buttons, carousel, lift, shapes, etc.
    └── motions/             # Scroll animations & hover effects

JavaScript modules

Each module builds to a standalone dist/js/*.min.js file. core.js always loads; every other module is opt-in via the child theme.

core Always loaded — foundation utilities carousel Embla Carousel wrapper motion Scroll-triggered animations colormode Dark / light theme toggle hidenav Auto-hide navbar on scroll offcanvas Bootstrap offcanvas enhancements lightbox GLightbox image & video gallery filterable Grid filtering with Shuffle.js typewriter Typewriter text animation revealtext Scroll-linked text reveal stackingcards Stacking cards scroll effect scrollspy Bootstrap scrollspy woocommerce Product variations & toasts

Child Theme

Where all project-specific work happens. The child is intentionally minimal — it customizes variables, picks JS components, and adds project styles.

File structure

softedge-theme-child/
├── style.css                    # WordPress metadata (required)
├── functions.php                # Component opt-in & custom PHP
├── package.json                 # npm scripts (SASS only)
├── src/scss/
│   ├── main.scss                # Imports parent SCSS + child overrides
│   ├── _custom-variables.scss   # Variable overrides (colors, fonts, spacing)
│   └── _custom-styles.scss      # Project-specific CSS
├── dist/css/
│   └── bundle.css               # Compiled output (replaces parent CSS)
└── fonts/                       # Custom web fonts

How SCSS compilation works

The child compiles its own bundle.css which includes all parent styles. The key is the --load-path flag pointing to the parent SCSS source.

At runtime, WordPress loads only the child CSS — the parent CSS is dequeued.

# in child package.json
sass src/scss/main.scss dist/css/bundle.css --load-path=../softedge-theme/src/scss

# This allows child main.scss to import parent files directly:
@import 'themes/variables';       // resolves to parent
@import 'bootstrap5/functions';   // resolves to parent
@import 'custom-variables';       // resolves to child

Customizing SCSS

Three levels of customization, from simplest to most advanced.

1. Variable overrides _custom-variables.scss

Uncomment or add variables in _custom-variables.scss. These are imported before Bootstrap and the parent, so they take priority over any !default value.

// _custom-variables.scss

$primary: #6610f2;
$font-size-base: 0.9rem;
$spacer: 1rem;

// Custom fonts
@font-face {
    font-family: "Geist";
    src: url("../../fonts/GeistVF.woff2") format("woff2");
    font-display: swap;
}
$font-family-sans-serif: "Geist", system-ui, sans-serif;

2. Toggle parent components main.scss

Comment out parent component imports you don't need in the child main.scss. This reduces CSS bundle size.

// main.scss — comment out unused components

@import "themes/components/avatar";
@import "themes/components/lift";
//@import "themes/components/help-colors";   // not needed in production
//@import "themes/components/layout";        // no dashboard layout needed

3. Custom styles _custom-styles.scss

Add project-specific CSS in _custom-styles.scss. Imported last, so it can override anything.

// _custom-styles.scss

.hero-section {
    min-height: 80vh;
    background: var(--bs-primary);
}

.card-custom {
    border-radius: var(--bs-border-radius-xl);
    box-shadow: var(--bs-box-shadow-lg);
}

Enabling JS Components

JavaScript modules are opt-in. The child picks which parent modules to load via a PHP filter in functions.php.

softedge_js_components

Each enabled component loads its own dist/js/*.min.js file from the parent. Only core.js is always loaded.

// functions.php

add_filter('softedge_js_components', function($components) {
    $components[] = 'carousel';
    $components[] = 'lightbox';
    $components[] = 'colormode';
    $components[] = 'offcanvas';
    $components[] = 'motion';
    $components[] = 'hidenav';
    $components[] = 'woocommerce';
    return $components;
});

// Available: carousel, motion, offcanvas, hidenav, colormode,
//            woocommerce, lightbox, filterable, typewriter,
//            revealtext, stackingcards, scrollspy

SCSS Import Order

The cascade matters. The child main.scss follows this order to ensure correct variable resolution.

main.scss

# Import Source & role 1 _custom-variables Child — overrides before anything loads 2 themes/_variables Parent — brand defaults (!default) 3 bootstrap5/functions Parent — Bootstrap SASS functions 4 bootstrap5/variables Parent — Bootstrap defaults (!default) 5 themes/_variables-dark Parent — dark mode variables 6 themes/_maps Parent — color maps 7 bootstrap5/mixins Parent — Bootstrap mixins 8 themes/_utilities Parent — custom utility definitions 9 Bootstrap components Parent — reboot, type, grid, buttons, etc. 10 Theme components Parent — avatar, lift, carousel, shapes, etc. 11 Motions Parent — animations & hover effects 12 _custom-styles Child — final project-specific overrides

Starting a New Project

Checklist for setting up a new site with the Softedge framework.

Quickstart

1. Copy the child theme — duplicate softedge-theme-child and rename it for your project.

2. Set your fonts — add font files to fonts/ and declare @font-face + variables in _custom-variables.scss.

3. Set your colors — uncomment and adjust $primary, $secondary, etc. in _custom-variables.scss.

4. Pick JS components — edit the softedge_js_components filter in functions.php to enable only what you need.

5. Trim SCSS imports — comment out unused component imports in main.scss (e.g. WooCommerce, layout, help-colors).

6. Compile — run npm run sass in the child theme to generate dist/css/bundle.css.

7. Activate — activate the child theme in WordPress. The parent is loaded automatically.

On this page