Core Framework
HomeChangelogDashboard
  • 📖Introduction
    • 📝 Overview of Core Framework
    • 💁🏼‍♂️ Target Audience
    • 🔍 Navigation of the Documentation
  • 🚀Getting Started
    • Getting Started with Web App and WordPress
    • Initial Setup and Configuration
    • Video tutorial: First-time setup walkthrough
    • OxyNinja Users
  • 🧩Builder Integrations
    • Overview
    • Oxygen Builder
    • Bricks Builder
    • Gutenberg
  • Figma
    • Getting Started with Figma
    • Create and Manage Variables
    • Editing Elements
  • 💻Navigating the UI
    • Color System
    • Typography
    • Spacing
    • Components
    • Utility Classes & Vars
    • Breakpoints
    • Manage project
    • Remote Import
    • Preferences
  • 📒How to Use
    • Dark Mode
    • Grid System
    • Filters
  • 🎯Marketplace
    • Buying Products
    • Become an Author
    • Author Guidelines
  • 👕Official UI Kits
    • Blocks
    • CoreKit
    • Violet
    • WooCore
    • Style Guide
    • OxyNinja Icons
  • Official Templates
    • Agency
    • Real Estate
  • 🔨Troubleshooting
    • Common Problems
    • FAQ
  • 📖Changelog
    • Changelog
    • Feature Requests
  • Development
    • CoreFramework\Helper
Powered by GitBook
On this page
  • Video Overview
  • Base Settings
  • Ratios
  • Manual Mode
  • Info on Class Generation
  1. Navigating the UI

Spacing

Similarly to our typography section, you can use our calculators for efficient size generation, all of which are automatically responsive. See the visual representations update in real time.

PreviousTypographyNextComponents

Last updated 5 months ago

Video Overview

This section uses the same scaling techniques as the typography section ensuring that everything is uniform across your website.

Base Settings

In this section, you can choose your base settings, such as the minimum base size, maximum base size, or even the base scale index (this is where you set which variable becomes your base, by default, this is --space-m). See the base highlighted in blue on the right.

Ratios

Just like with the typography, you can choose which kind of ratio in which your sizes change, ranging from Minor Second, Major Third, Perfect Fourth, Golden Ratio, plus many more.

You can even click the edit button on the ratio section to toggle to manual mode for extra scaling control!

Manual Mode

Once again, you have full control should you choose to set your sizing manually. Here, you can change the name of your variables, and change their minimum and maximum sizes.

Info on Class Generation

Note: The manual tab is disabled from the class generators.

Users have the flexibility to name variables according to their preferred naming conventions. As a result, the suffixes appended to variables may differ from the conventional designations (e.g., -s, -m, -l, -xl) utilized in our class generation logic. Consequently, we have decided to remove this feature from the manual tab.

Additionally, users are encouraged to create their own selector groups and manually assign variables to their properties.

💻
Spacing Section
Select the kind of scaling ratio
Click the edit button on the ratio section to toggle to manual mode for extra scaling control.
Manual Sizing Mode
Page cover image