SiteKrafter PRO Update!

Complete Changelog v6.2.2

Overview

Here is the reference https://diviuniversity.com/reference

This changelog documents the complete transformation of the original SiteKrafter Pro CSS framework into a modern, Divi 5-compatible, Tailwind-inspired utility-first framework with enhanced typography, accessibility, keyboard navigation, and comprehensive utility classes.

MAJOR STRUCTURAL CHANGES

1. CSS Reset & Base Styles**

❌ REMOVED

- Universal CSS reset (`, ::before, *::after`) that conflicted with Divi 5

- Global body font-size override that broke Divi's typography system

- Aggressive global styles that interfered with Divi components

✅ ADDED

- Scoped reset system (`.sk-reset`) for safe usage without conflicts

- Conservative base styles that preserve Divi 5 functionality

- Optional typography classes (`.sk-typography`, `.sk-custom-typography`)

- Divi-specific integration overrides

2. Typography System Complete Overhaul

🔄 COMPLETELY REDESIGNED

- Font Sizes:Updated from oversized values to modern UI/UX best practices

  - Body text: Now 16-18px (was much larger and conflicting)

  - H1: Now 28-36px (was 40px+ and too large)

  - H2-H6: Realistic heading hierarchy (24-30px down to 14-16px)

  - All sizes now use responsive `clamp()` functions

✅ ADDED

- Comprehensive line-height system for all text sizes

- Text-specific line heights (`.text-xs` through `.text-4xl`)

- Heading-specific line heights (`.sk-heading-9xl` through `.sk-heading-s`)

- Modern responsive typography using `clamp()` functions

- Letter-spacing optimization for better readability

- `text-wrap: balance` for improved typography

✅ ADDED

Complete Line Height System

Heading-specific line heights

Enhanced spacing variables

--sec-padding-s: clamp(3.8rem, 7vw, 6.2rem) clamp(2.4rem, 5vw, 4rem);

--sec-padding-m: clamp(6.2rem, 9vw, 10rem) clamp(4rem, 6.5vw, 6.5rem);

--sec-padding-l: clamp(10rem, 11vw, 16.2rem) clamp(6.5rem, 7.5vw, 10.5rem);

--sec-padding-hero: clamp(16.2rem, 13vw, 26.2rem) clamp(10.5rem, 9vw, 16.8rem);

🔄 UPDATED

- Font size variables now use realistic UI/UX measurements

- Added heading aliases for backward compatibility

- Enhanced color system with semantic meanings

- Improved spacing scale with responsive values

✅ ADDED

- Complete `.sk-heading-*` class system (9xl through s)

- Enhanced heading classes with proper letter-spacing

- `text-wrap: balance` for better typography

- Modern font-feature settings for rich text

- Comprehensive font-weight utilities (100-900)

- Text transformation utilities (uppercase, lowercase, capitalize)

- Letter-spacing utilities (tight, wide, wider)

Sizing & Positioning System

✅ COMPLETELY NEW

Width utilities

.w-auto, .w-full, .w-screen, .w-fit

.w-1/2, .w-1/3, .w-2/3, .w-1/4, .w-3/4

Height utilities

.h-auto, .h-full, .h-screen, .h-fit

Max-width scale

.max-w-xs through .max-w-7xl

.max-w-full, .max-w-screen, .max-w-none

Position utilities

.static, .fixed, .absolute, .relative, .sticky

Z-index scale

.z-0, .z-10, .z-20, .z-30, .z-40, .z-50, .z-auto

Container & Layout System

✅ ADDED

Responsive container

.container {

  width: 100%;

  max-width: var(--container-max-width);

  margin-left: auto;

  margin-right: auto;

  padding-left: var(--container-padding);

  padding-right: var(--container-padding);

}

Section spacing classes

.sec-s { padding: var(--sec-padding-s) !important; }

.sec-m { padding: var(--sec-padding-m) !important; }

.sec-l { padding: var(--sec-padding-l) !important; }

.sec-hero { padding: var(--sec-padding-hero) !important; }

Responsive Design

❌ REMOVED:

- Conflicting responsive overrides with high specificity

- `.et_pb_text_inner .sk-heading-*` rules that broke base classes

- Media query conflicts that prevented classes from working

✅ SIMPLIFIED

- Mobile-first approach maintained

- Cleaner media queries without conflicts

- Better grid responsiveness

- Responsive container system

DIVI 5 INTEGRATION

✅ ADDED

/ Divi Integration & Overrides /

.et_pb_module { width: 100%; height: 100%; }

.et_pb_text { margin: 0 !important; }

button, .et_pb_button { margin-top: 0 !important; margin-bottom: 0 !important; }

/ Editor overrides for better builder experience /

.et-db #et-boc .et-l .et-fb-modal--with-header-dropdown .et-fb-font-icon-filter,

.et-db #et-boc .et-l .et-fb-modal--with-header-dropdown .et-fb-options-filter {

  top: 0; margin-top: 0;

}

CRITICAL FIXES

❌ REMOVED CONFLICTS

1. **Duplicate CSS Rules

   - Fixed duplicate `.dropdown-menu a:focus` rules

   - Consolidated conflicting focus styles

   - Removed redundant declarations

1. Specificity Issues:

   - Removed `.et_pb_text_inner .sk-heading-*` overrides

   - Fixed CSS cascade conflicts

   - Resolved class application issues

1. JavaScript Errors:

   - Simplified footer.php JavaScript to prevent critical errors

   - Enhanced arrow key navigation with better browser support

   - Added comprehensive menu selector support

VISUAL IMPROVEMENTS

✅ ENHANCED

- Modern shadow system with multiple levels

- Improved border radius scale

- Better transition timing functions

- Enhanced color system with transparency variants

- Glass effect components

- Button hover states

- Notice component styling

- Form element styling

🔄 UPDATED

- Comprehensive utility class system

- Better browser compatibility

- Optimized responsive queries

- Cleaner cascade with fewer overrides

PERFORMANCE OPTIMIZATIONS

✅ IMPROVED

- Reduced CSS specificity conflicts

- Cleaner cascade with fewer overrides

- Better browser compatibility

- Optimized responsive queries

- Eliminated redundant CSS rules

- Streamlined JavaScript for better performance

❌ REMOVED

- Redundant CSS rules

- Conflicting media queries

- Unnecessary !important declarations where possible

- Duplicate focus styles