Skip to content

SASS Modules

The Phenix Design System's SASS architecture is organized into distinct module categories to provide a clean, maintainable structure. This page documents SASS modules present in the framework.

Module Categories

Phenix's SASS modules are organized into several categories:

1. Assets

Base SASS files that provide foundational tools:

FileDescription
_mixin.scssImports all mixins from the mixin directory
_reset.scssCSS reset and base styles
_selectors.scssSASS placeholder selectors for inheritance

2. Grid System

Files that build the responsive grid layout:

FileDescription
grid/_main.scssMain grid container and row classes
grid/_columns.scssColumn classes and responsive variations
grid/_utilities.scssGrid helper classes

3. Utilities

Files that provide utility classes for styling:

FileDescription
utilities/_main.scssCore utility classes
utilities/_position.scssPositioning utilities
utilities/_typography.scssText styling utilities
utilities/_sizes.scssWidth, height, and sizing utilities
utilities/_margin.scssMargin utilities
utilities/_padding.scssPadding utilities
utilities/_colors.scssColor utilities
utilities/_borders.scssBorder utilities
utilities/_visibility.scssDisplay and visibility utilities
utilities/_plugins.scssUtilities for plugins
utilities/_effects.scssEffects and animation utilities
utilities/_hovers.scssHover state utilities

4. Components

UI component styles:

FileDescription
components/_breadcrumb.scssBreadcrumb navigation
components/_buttons.scssButtons and badges
components/_dropdown.scssDropdown menus
components/_navbar.scssNavigation bars
components/_tables.scssTables and data tables
components/_tabs.scssTabs and panels
components/_slider.scssSlider components

5. Form Components

Form-related component styles:

FileDescription
form/_uploader.scssFile upload components
form/_form-controls.scssForm input controls
form/_tornado-form.scssAdvanced form styling

6. Theme Configuration

Theme-related variables and settings:

FileDescription
_theme.scssCSS variables for theming
_customize.scssCustomization variables

How Modules Are Used

Loading Order

The modular approach allows for selective loading of features. The order of imports is important:

  1. Direction Variables: Set first to determine LTR/RTL support
  2. Core Assets: Mixins, selectors, and reset styles
  3. Grid System: For layout structure
  4. Theme Variables: For consistent styling
  5. Components: UI elements
  6. Forms: Form-specific components
  7. Utilities: Additional styling helpers

Separate Files vs. Combined Files

  • phenix.css: Contains only components, grid, and integrations - use when you need the structural foundation
  • phenix-utils.css: Contains only utility classes - use when you need styling utilities

When to use which file:

  • Use both files together for a complete framework experience
  • Use only phenix.css when you need just components without utility classes
  • Use only phenix-utils.css when you need just utility classes without components

Customizing Modules

There are several ways to customize how modules are loaded:

1. Use the Provided Files As-Is

Simply import the CSS files in the correct order:

html
<!-- Core Components (loads FIRST) -->
<link rel="stylesheet" href="path/to/phenix.min.css">

<!-- Enhancement Utilities (loads SECOND) -->
<link rel="stylesheet" href="path/to/phenix-utils.min.css">

2. Create Custom SASS Imports

For more control, create your own SASS file that imports only the modules you need:

scss
// Set direction variables
$direction: ltr;
$direction-start: left;
$direction-end: right;

// Required modules
@import 'path/to/phenix/sass/assets/mixin';
@import 'path/to/phenix/sass/assets/selectors';

// Just import what you need
@import 'path/to/phenix/sass/grid/main';
@import 'path/to/phenix/sass/components/buttons';
@import 'path/to/phenix/sass/utilities/colors';

3. Override Variables Before Import

For theme customization, override variables before importing Phenix:

scss
// Theme customization
$primary-color: #e91e63;
$secondary-color: #2196f3;

// Import Phenix
@import 'path/to/phenix/sass/phenix';

Best Practices

  1. Load in Correct Order: Always load phenix.css before phenix-utils.css
  2. Choose the Right Files: Use just what you need for your project
  3. Understand the Module Structure: Know which files contain which features
  4. Selectively Override: Customize only what you need to change
  5. Respect the Directory Structure: Maintain the same structure when customizing

Example: Custom SASS Implementation

scss
// Create a custom build with only what you need

// Direction settings
$direction: ltr;
$direction-start: left;
$direction-end: right;

// Required modules
@import 'path/to/phenix/sass/assets/mixin';
@import 'path/to/phenix/sass/assets/selectors';

// Only include grid and buttons from components
@import 'path/to/phenix/sass/grid/main';
@import 'path/to/phenix/sass/components/buttons';

// Only include specific utilities
@import 'path/to/phenix/sass/utilities/colors';
@import 'path/to/phenix/sass/utilities/typography';

This approach lets you create a minimal build with only the features you need.

Released under the MIT License.