Using SCSS Source Files (Requires Sass Build Process)

For full customization control, integrate MaverickWave's SCSS source files into your project's Sass build process (e.g., using Node Sass, Dart Sass). This allows you to override Sass variables before the framework is compiled.

MaverickWave uses the !default flag for its Sass variables, meaning you can easily set your own values before importing the framework.

1. Configure Theme Mode (Optional)

You can choose the theme behavior during compilation by setting the $mw-theme-mode variable.

• 'switchable' (Default): Includes styles for both dark (default) and light themes, activated by the .mw-theme-light class and the JS toggle.
• 'dark': Compiles only the dark theme styles. The theme toggle (if present) will be disabled.
• 'light': Compiles only the light theme styles. The theme toggle (if present) will be disabled.

Important: Regardless of the chosen theme mode, the main header and navigation bar components currently retain their default dark appearance as defined in the framework.

2. Override Sass Variables

Define your custom variable values in your main Sass file before importing MaverickWave.

3. Import MaverickWave

Import the main framework SCSS file after your overrides.

// Your main project SCSS file (e.g., styles.scss)
    
// --- 1. Configure Theme Mode (Optional) ---
// Options: 'switchable' (default), 'dark', 'light'
$mw-theme-mode: 'switchable'; // this is the default!

// --- 2. Override Framework Sass Variables ---
// Base Colors
$primary-color: #e94560;    // Your brand primary
$secondary-color: #f39c12;  // Your brand secondary
/* and status colors .... */

// Basic background colors
$dark-background: #1f1f2e;
$light-background: #f8f9fa;
    
// Base Text Colors
$dark-text-color: #ffffff;
$light-text-color: #1c1c1c;
    
// Font Family (Ensure you load the font via @font-face)
$font-family: 'Your Custom Font', sans-serif;
    
// You can override entire theme maps if needed
// $dark-theme-colors: (
  'page-background': #your-color,
  'card-background': #your-color,
  'footer-background': #your-color,
  'border': #your-color,
  'shadow': #your-color,
  'text-color': #your-color,
  'text-secondary-color': #your-color,
// );
    
// --- 3. Import MaverickWave Framework ---
// Adjust the path based on your project structure (e.g., node_modules)
@import 'path/to/maverick-wave/scss/maverick-wave';
    
// --- Your Additional Project Styles ---
body {
  // Your custom body styles
}
    

When you compile this Sass file, MaverickWave will use your variable values, and derived colors (like alert backgrounds calculated with color.adjust or rgba in the framework's SCSS) will automatically use your overridden base colors.

Angular Integration

For Angular projects, install via NPM and include in your angular.json:

// Install package
npm install maverick-wave

// In angular.json
"styles": [
  "node_modules/maverick-wave/maverick-wave.min.css",
  "src/styles.scss"
],
"scripts": [
  "node_modules/maverick-wave/maverick-wave.min.js"
]

For SCSS integration in Angular:

// In src/styles.scss
@import 'node_modules/maverick-wave/scss/maverick-wave';

You can also create a theme file to customize variables:

// In src/theme.scss
$primary-color: #3f51b5;
$secondary-color: #ff4081;

@import 'node_modules/maverick-wave/scss/maverick-wave';

React Integration

For React projects, install via NPM and import in your index.js:

// Install package
npm install maverick-wave

// In index.js or App.js
import 'maverick-wave/maverick-wave.min.css';

// If you need the JavaScript functionality
import 'maverick-wave/maverick-wave.min.js';

For SCSS integration in React:

// In your main SCSS file
@import '~maverick-wave/scss/maverick-wave';

Example usage in a React component:

function App() {
  return (
    <div className="mw-container">
      <h1 className="mw-text-primary">Hello, MaverickWave!</h1>
      <p>Start building your awesome React project.</p>
      <button className="mw-btn mw-btn-primary">Get Started</button>
    </div>
  );
}

Technical Specifications

MaverickWave CSS framework is built with modern web standards in mind:

• Built with SCSS for better organization and maintainability
• Optimized file size (under 30KB minified and gzipped)
• Compatible with all modern browsers (Chrome, Firefox, Safari, Edge)
• No JavaScript dependencies for core functionality
• CSS custom properties for easy theming and customization

User Reviews

Support Options

I offer multiple support channels for MaverickWave:

• Comprehensive documentation
• Regular updates with new features and improvements
• Dedicated support for power users