Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.squeditor.com/llms.txt

Use this file to discover all available pages before exploring further.

Squeditor relies heavily on Tailwind CSS for utility grids, spacing, and typography, but recognizes that complex components often require a dedicated preprocessor layer. The framework employs a strict 10-layer SCSS hierarchy.

​
The 10-Layer Hierarchy

The entry point for SCSS is always src/assets/scss/main.scss. The file imports the layers in a very specific top-to-bottom cascade:
main.scss
@import 'config';
@import 'functions';
@import 'tokens';
@import 'uikit_dynamic';
@import 'uikit-overrides';
@import 'utilities';
@import 'base';
@import 'components';
@import 'themes/showcase';    // auto-replaced based on squeditor.config.js
@import 'custom';           // Your client or project custom styles or overrides
LayerDescription
_config.scss, _functions.scssThe foundational programmatic layers. _config.scss is the Design Dashboard, housing Sass variables and maps for colors, typography, spacing, radius, and shadows.
_tokens.scssThe Generation Layer. It takes properties from _config.scss and emits them as global CSS custom properties. You rarely need to edit this file.
_base.scssDocument-level resets extending standard normalizing behavior.
ex: HTML/Body typography baseline, generic a tag hover transitions.
_uikit_dynamic.scssDynamic variables specifically bridging Squeditor tokens into the UIKit3 SCSS ecosystem before the main components compile.
_uikit-overrides.scssOverriding default UIKit3 styles. Because UIKit generates massive specificity, we dedicate a specific layer entirely to resolving .uk-modal-dialog or .uk-offcanvas-bar overrides using our custom properties.
_components.scssCustom Squeditor component styles which Tailwind struggles to bundle cleanly.
ex: .sq-card, .sq-hero-overlay, .sq-accordion-active.
_utilities.scssCSS-only helper classes not natively covered by Tailwind.
ex: Typography gradients, complex clip-paths, or .scrollbar-hide. Note that background classes requiring variants (like hover:sq-bg-primary) are registered as plugins directly inside tailwind.config.js instead of here.
themes/*.scssthemes/default provides the fallback tokens, while specific child themes (showcase, saas, agency) are swapped dynamically by build-components.js per build target.
_custom.scssThe absolute highest specificity layer, loading last. Use this for specific client overrides and final project-specific CSS patches that must forcefully cascade over themes and components.
themes/showcase.scss
// Overriding Layer 2 Tokens
:root {
  --sq-color-primary: #FF0000;
  --sq-font-sans: 'Helvetica Neue', sans-serif;
}