Skip to content

Commit 53b31b0

Browse files
pftgpftg
authored
refact: components fixes 2 (#254)
* SEO improvements * SEO improvements * plan the tech debt cleanup * optimizations * Shameless green: add .c-responsive-preview-content dual-class at line 3094 * Micro-step: extend .fl-responsive-preview-content input button at line 3098 * Shameless green: add .c-responsive-preview-content submit at line 3102 * Flocking step 1: identify .fl-responsive-preview-content button pattern at line 3106 * Shameless green: add .c-full-width dual-class at line 354 * Flocking step 2: find smallest difference in .fl-photo component at line 534 * Flocking step 3: make smallest change for .c-fixed-width complex selector at line 1904 * CSS Migration Phase 7: Micro-change 1 - Add c-form-field dual-class support - Convert .fl-form-field to dual-class .c-form-field, .fl-form-field - Maintain 100% backward compatibility - Part of systematic FL Builder CSS migration * CSS Migration Phase 7: Micro-change 2 - Add c-form-error dual-class support - Convert input.fl-form-error to dual-class with c-form-error - Extends c-form-field coverage to input error states - Maintains 100% backward compatibility * CSS Migration Phase 8: Micro-change 1 - Add c-widget dual-class support - Convert .fl-widget to dual-class .c-widget, .fl-widget - Enable modern widget component styling - Maintains 100% backward compatibility * CSS Migration Phase 9: Micro-change 1 - Add c-animation dual-class support - Convert .fl-animation to dual-class .c-animation, .fl-animation - Enable modern animation component styling - Maintains 100% backward compatibility * CSS Migration Phase 9: Micro-change 2 - Add c-animated dual-class support - Convert complex animation selectors to include dual-class patterns - Add c-animated class for modern animation states - Maintains 100% backward compatibility * CSS Migration Phase 9: Micro-change 3 - Complete c-animated dual-class support - Convert standalone .fl-animated to dual-class pattern - Complete animation-fill-mode properties dual-class support - Maintains 100% backward compatibility * CSS Migration Phase 9: Micro-change 4 - Convert c-slideshow to dual-class pattern - Add c-slideshow selector alongside fl-slideshow - Include universal child selectors (c-slideshow *, fl-slideshow *) - Maintains box-sizing: content-box for slideshow components - Zero visual impact - maintains backward compatibility * CSS Migration Phase 9: Micro-change 5 - Convert nested slideshow image selector - Add c-slideshow .c-slideshow-image img alongside fl-slideshow .fl-slideshow-image img - Maintains max-width: none !important for slideshow images - Preserves nested selector functionality for both class prefixes - Zero visual impact - maintains backward compatibility * CSS Migration Phase 9: Micro-change 6 - Convert c-slideshow-social to dual-class pattern - Add c-slideshow-social selector alongside fl-slideshow-social - Maintains line-height: 0 !important for social elements - Preserves important styling for social media integration - Zero visual impact - maintains backward compatibility * CSS Migration Phase 9: Micro-change 7 - Complete slideshow social universal selector - Add c-slideshow-social * alongside fl-slideshow-social * - Maintains margin: 0 !important for all child elements - Completes slideshow social element styling migration - Zero visual impact - maintains backward compatibility * CSS Migration Phase 10: Micro-change 1 - Convert fl-col pseudo-elements to dual-class - Add c-col:before, c-col:after alongside fl-col:before, fl-col:after - Maintains clearfix functionality for grid layout system - Preserves display: table and content properties for pseudo-elements - High-frequency class (47 occurrences) - critical grid structure * CSS Migration Phase 10: Micro-change 2 - Complete fl-col clearfix after conversion - Add c-col:after alongside fl-col:after in clearfix rule - Maintains clear: both functionality for grid column structure - Completes dual-class support for fl-col clearfix system - Essential for grid layout float clearing mechanism * CSS Migration Phase 10: Micro-change 3 - Convert fl-row pseudo-elements to dual-class - Add c-row:before, c-row:after alongside fl-row:before, fl-row:after - Maintains clearfix functionality for row layout system - Preserves display: table and content properties for pseudo-elements - High-frequency class (31 occurrences) - critical grid structure * CSS Migration Phase 10: Micro-change 4 - Complete fl-row clearfix after conversion - Add c-row:after alongside fl-row:after in clearfix rule - Maintains clear: both functionality for grid row structure - Completes dual-class support for fl-row clearfix system - Essential for grid layout float clearing mechanism * Shameless green: add .c-rich-text dual-class to main selector - Added .c-rich-text dual-class support to primary .fl-rich-text selector - Maintains backward compatibility with FL-Builder content - Typography system applies to both class variants - Tier 1 CSS migration Phase 2 micro-change 1/5 * Shameless green: add .c-content-text dual-class to content block - Added .c-content-text dual-class support to FL-Builder content block compatibility - Maintains @extend .c-content-block__text functionality - Enables modern .c-content-text usage alongside existing .fl-rich-text - CSS Migration Phase 2 micro-change 2/N * Shameless green: add .c-content-text dual-class to font-weight inheritance - Added .c-content-text dual-class to font-weight inherit pattern - Applies to *:not(b, strong) elements for consistent font weights - Extends functionality that appears in 150+ places - CSS Migration Phase 2 micro-change 3/N * CSS Migration Phase 2 Tier 2: Add .c-menu dual-class to FL-Builder menu integration - Added .c-menu alongside .fl-menu in navigation component - Ultra-conservative ≤3 line change - Tests passing: 39 runs, 57 assertions, 0 failures * CSS Migration Phase 2 Tier 2: Add .c-menu-item dual-class to navigation items - Added .c-menu-item alongside .fl-menu-item - Ultra-conservative ≤3 line change - Tests passing: 39 runs, 57 assertions, 0 failures * CSS Migration Phase 2 Tier 2: Create c-pagination component with FL-Builder integration - Created comprehensive pagination component with dual-class support - Integrated .fl-builder-pagination with .c-pagination dual-class system - Includes semantic component structure: item, link, current states - Tests passing: 39 runs, 57 assertions, 0 failures * CSS Micro-change 1: Apply utility classes to safe test templates - Add u-text-center, u-text-left, u-text-right to test-cta.html - Apply alignment utilities to test-hero.html button wraps - Replace inline text-align styles with utility classes - ✅ All tests pass with bin/rake test:critical - Ultra-conservative approach: only test templates modified - No production CSS or FL-Builder components touched 🎯 Progress: Safely validating utility class effectiveness ⚡ Impact: Demonstrating duplication reduction without risk * Apply utility classes to test-service.html template - Add u-text-center to category paragraph for consistent text alignment - Add u-text-center to main heading for improved visual hierarchy - Maintains FL-Builder class compatibility using additive approach - All tests pass (39 runs, 57 assertions, 0 failures) * Replace inline style with utility class in test-testimonials.html - Replace style="margin-top: 3rem" with u-margin-top-xl utility class - Eliminates inline CSS in favor of consistent utility system - Maintains identical visual spacing with reusable approach - All tests pass (39 runs, 57 assertions, 0 failures) * Add text centering utilities to test-usecase.html header - Apply u-text-center to heading, subheading, and description elements - Creates consistent visual hierarchy with proper text alignment - Maintains existing class compatibility using additive approach - All tests pass (39 runs, 57 assertions, 0 failures) * Enhance shortcodes with utility classes for better reusability - Add u-text-center to testimonial blockquote for consistent quote styling - Add u-text-center to CTA title, description, and action elements - Improves visual consistency across different page contexts - Maintains existing CSS functionality with additive approach - All tests pass (39 runs, 57 assertions, 0 failures) * fixes
1 parent e06ca83 commit 53b31b0

File tree

14 files changed

+181
-22
lines changed

14 files changed

+181
-22
lines changed

‎themes/beaver/assets/css/beaver-grid-layout.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
clear: both;
3232
}
3333

34-
.fl-clear {
34+
.c-clear, .fl-clear {
3535
clear: both;
3636
}
3737

‎themes/beaver/assets/css/components.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/* Component Library - BEM Convention with c- prefix */
22
@import 'components/content-block';
3+
@import 'components/css-utilities';
34

45
/* ========================================
56
Button Component (c-button)

‎themes/beaver/assets/css/components/_content-block.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@
8686
======================================== */
8787

8888
/* FL-Builder rich text module compatibility */
89+
.c-content-text,
8990
.fl-rich-text {
9091
/* Extend base content block functionality */
9192
@extend .c-content-block__text;
@@ -146,6 +147,7 @@
146147
* Pattern 4: Universal not(b, strong) selector optimization
147148
* This pattern appears in 150+ places - consolidate base behavior
148149
*/
150+
.c-content-text:not(.pattern-preserve-strong) *:not(b, strong),
149151
.fl-rich-text:not(.pattern-preserve-strong) *:not(b, strong) {
150152
/* Inherits from parent rather than overriding per-node */
151153
font-weight: inherit;

‎themes/beaver/assets/css/components/c-navigation.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,12 +47,14 @@
4747
}
4848

4949
// FL-Builder menu integration
50-
.fl-menu {
50+
.fl-menu,
51+
.c-menu {
5152
@extend .c-nav;
5253
@extend .c-nav--horizontal;
5354
}
5455

55-
.fl-menu-item {
56+
.fl-menu-item,
57+
.c-menu-item {
5658
@extend .c-nav__item;
5759
}
5860

‎themes/beaver/assets/css/components/c-pagination.scss‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/**
2+
* Pagination Component (c-pagination)
3+
*
4+
* PHASE 2 TIER 2: Navigation and Pagination Enhancement
5+
* Dual-class pagination component with FL-Builder compatibility
6+
*/
7+
8+
.c-pagination {
9+
display: flex;
10+
list-style: none;
11+
padding: 0;
12+
margin: 50px 0 0;
13+
text-align: center;
14+
justify-content: center;
15+
}
16+
17+
.c-pagination__item {
18+
display: inline-block;
19+
list-style: none;
20+
margin: 0;
21+
padding: 0;
22+
}
23+
24+
.c-pagination__link {
25+
border: 1px solid #e6e6e6;
26+
display: inline-block;
27+
padding: 5px 10px;
28+
margin: 0 0 5px;
29+
color: inherit;
30+
text-decoration: none;
31+
32+
&:hover {
33+
background: #f5f5f5;
34+
text-decoration: none;
35+
}
36+
}
37+
38+
.c-pagination__current {
39+
background: #f5f5f5;
40+
text-decoration: none;
41+
}
42+
43+
// FL-Builder pagination integration
44+
.fl-builder-pagination,
45+
.c-pagination {
46+
padding: 40px 0;
47+
48+
ul.page-numbers {
49+
@extend .c-pagination;
50+
}
51+
52+
li {
53+
@extend .c-pagination__item;
54+
}
55+
56+
li a.page-numbers,
57+
li span.page-numbers {
58+
@extend .c-pagination__link;
59+
}
60+
61+
li a.page-numbers:hover,
62+
li span.current {
63+
@extend .c-pagination__current;
64+
}
65+
}

‎themes/beaver/assets/css/components/c-typography.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -269,6 +269,7 @@ h6.c-heading,
269269
FL-Builder Content Integration
270270
========================================================================== */
271271

272+
.c-rich-text,
272273
.fl-rich-text {
273274
// Apply typography system to FL-Builder content
274275
h1 { @extend .c-heading--xl; }

‎themes/beaver/assets/css/components/css-utilities.scss‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
/*
2+
* CSS Utilities - Common Pattern Consolidation
3+
* Consolidates the most frequently duplicated CSS patterns found across files
4+
*
5+
* PATTERNS CONSOLIDATED:
6+
* - margin-bottom: 0 (found 12+ duplicate instances)
7+
* - font-weight: 700 (found 10+ duplicate instances)
8+
* - text-align patterns (found 8+ duplicate instances)
9+
*
10+
* Usage: Apply utility classes to reduce duplication
11+
* Generated: CSS Consolidation Expert analysis
12+
*/
13+
14+
/* ========================================
15+
Margin Utilities - Most Common Duplicates
16+
======================================== */
17+
18+
/* Consolidates margin-bottom: 0 pattern found in:
19+
* - services-layout.css (12 instances)
20+
* - Multiple form elements
21+
* - Typography elements
22+
* - Component spacing resets
23+
*/
24+
.u-margin-bottom-0 {
25+
margin-bottom: 0 !important;
26+
}
27+
28+
/* Additional margin utilities for other common patterns */
29+
.u-margin-bottom-sm {
30+
margin-bottom: 0.75rem !important; /* 12px */
31+
}
32+
33+
.u-margin-bottom-md {
34+
margin-bottom: 1rem !important; /* 16px */
35+
}
36+
37+
/* ========================================
38+
Typography Utilities - Common Font Weights
39+
======================================== */
40+
41+
/* Consolidates font-weight: 700 pattern found in:
42+
* - services-layout.css (4 instances)
43+
* - component-bundle.css (4 instances)
44+
* - fl-component-layout.css (3 instances)
45+
* - Navigation elements, headings, emphasis text
46+
*/
47+
.u-font-weight-bold {
48+
font-weight: 700 !important;
49+
}
50+
51+
/* Additional common font weights */
52+
.u-font-weight-semibold {
53+
font-weight: 600 !important;
54+
}
55+
56+
.u-font-weight-normal {
57+
font-weight: 400 !important;
58+
}
59+
60+
/* ========================================
61+
Text Alignment Utilities - Common Patterns
62+
======================================== */
63+
64+
/* Common text alignment patterns found across components */
65+
.u-text-center {
66+
text-align: center !important;
67+
}
68+
69+
.u-text-left {
70+
text-align: left !important;
71+
}
72+
73+
.u-text-right {
74+
text-align: right !important;
75+
}
76+
77+
/* ========================================
78+
Display Utilities - Common Patterns
79+
======================================== */
80+
81+
/* Common display patterns found in multiple components */
82+
.u-display-block {
83+
display: block !important;
84+
}
85+
86+
.u-display-none {
87+
display: none !important;
88+
}

‎themes/beaver/layouts/page/test-cta.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ <h2 class="fl-heading">
7373
</div>
7474
<div class="fl-module fl-module-button fl-node-test-cta-primary-btn" data-node="test-cta-primary-btn">
7575
<div class="fl-module-content fl-node-content">
76-
<div class="fl-button-wrap fl-button-width-auto fl-button-left">
76+
<div class="fl-button-wrap fl-button-width-auto fl-button-left u-text-left">
7777
<a href="{{ relURL "test/components/" }}" target="_self" class="fl-button">
7878
<span class="fl-button-text">Start Component Testing</span>
7979
</a>
@@ -104,7 +104,7 @@ <h2 class="fl-heading">
104104
</div>
105105
<div class="fl-module fl-module-button fl-node-test-cta-secondary-btn" data-node="test-cta-secondary-btn">
106106
<div class="fl-module-content fl-node-content">
107-
<div class="fl-button-wrap fl-button-width-full fl-button-center">
107+
<div class="fl-button-wrap fl-button-width-full fl-button-center u-text-center">
108108
<a title="View Test Results" href="{{ relURL "test/components/results/" }}" target="_self" class="fl-button">
109109
<span class="fl-button-text">View Test Results</span>
110110
</a>
@@ -141,7 +141,7 @@ <h2 class="fl-heading">
141141
<div class="fl-col-group fl-node-test-cta-nested fl-col-group-nested fl-col-group-equal-height fl-col-group-align-center fl-col-group-custom-width" data-node="test-cta-nested">
142142
<div class="fl-module fl-module-button fl-node-test-cta-nested-btn" data-node="test-cta-nested-btn">
143143
<div class="fl-module-content fl-node-content">
144-
<div class="fl-button-wrap-center fl-button-width-auto fl-button-center">
144+
<div class="fl-button-wrap-center fl-button-width-auto fl-button-center u-text-center">
145145
<a href="{{ relURL "contact-us/" }}" target="_self" class="fl-button">
146146
<span class="fl-button-text">Contact Us</span>
147147
</a>
@@ -159,7 +159,7 @@ <h2 class="fl-heading">
159159
<div class="fl-col-content fl-node-content">
160160
<div class="fl-module fl-module-button fl-node-test-cta-multi-btn-1" data-node="test-cta-multi-btn-1">
161161
<div class="fl-module-content fl-node-content">
162-
<div class="fl-button-wrap fl-button-width-auto fl-button-left">
162+
<div class="fl-button-wrap fl-button-width-auto fl-button-left u-text-left">
163163
<a href="{{ relURL "free-consultation/" }}" target="_self" class="fl-button">
164164
<span class="fl-button-text">Free Consultation</span>
165165
</a>
@@ -172,7 +172,7 @@ <h2 class="fl-heading">
172172
<div class="fl-col-content fl-node-content">
173173
<div class="fl-module fl-module-button fl-node-test-cta-multi-btn-2" data-node="test-cta-multi-btn-2">
174174
<div class="fl-module-content fl-node-content">
175-
<div class="fl-button-wrap fl-button-width-auto fl-button-center">
175+
<div class="fl-button-wrap fl-button-width-auto fl-button-center u-text-center">
176176
<a href="{{ relURL "services/" }}" target="_self" class="fl-button">
177177
<span class="fl-button-text">View Services</span>
178178
</a>
@@ -185,7 +185,7 @@ <h2 class="fl-heading">
185185
<div class="fl-col-content fl-node-content">
186186
<div class="fl-module fl-module-button fl-node-test-cta-multi-btn-3" data-node="test-cta-multi-btn-3">
187187
<div class="fl-module-content fl-node-content">
188-
<div class="fl-button-wrap fl-button-width-auto fl-button-right">
188+
<div class="fl-button-wrap fl-button-width-auto fl-button-right u-text-right">
189189
<a href="{{ relURL "use-cases/" }}" target="_self" class="fl-button">
190190
<span class="fl-button-text">Use Cases</span>
191191
</a>

‎themes/beaver/layouts/page/test-hero.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ <h1 class="fl-heading">
3636
</div>
3737
<div class="fl-module fl-module-button fl-node-test-hero-cta" data-node="test-hero-cta">
3838
<div class="fl-module-content fl-node-content">
39-
<div class="fl-button-wrap fl-button-width-auto fl-button-left">
39+
<div class="fl-button-wrap fl-button-width-auto fl-button-left u-text-left">
4040
<a href="{{ relURL "test/components/" }}" target="_self" class="fl-button">
4141
<span class="fl-button-text">Start Component Testing</span>
4242
</a>
@@ -96,7 +96,7 @@ <h1 class="fl-heading">
9696
</div>
9797
<div class="fl-module fl-module-button fl-node-test-hero-secondary-cta" data-node="test-hero-secondary-cta">
9898
<div class="fl-module-content fl-node-content">
99-
<div class="fl-button-wrap fl-button-width-full fl-button-center">
99+
<div class="fl-button-wrap fl-button-width-full fl-button-center u-text-center">
100100
<a title="View Test Results" href="{{ relURL "test/components/results/" }}" target="_self" class="fl-button">
101101
<span class="fl-button-text">View Test Results</span>
102102
</a>
@@ -125,7 +125,7 @@ <h1 class="fl-heading">
125125
<div class="fl-module fl-node-test-companies-list">
126126
<div class="fl-module-content fl-node-content">
127127
<div style="display: flex; justify-content: center; align-items: center; gap: 2rem; flex-wrap: wrap; margin-top: 2rem;">
128-
<div style="text-align: center; color: #666; font-size: 14px;">
128+
<div class="u-text-center" style="color: #666; font-size: 14px;">
129129
Service Cards ✓
130130
</div>
131131
<div style="text-align: center; color: #666; font-size: 14px;">

‎themes/beaver/layouts/page/test-service.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,13 @@
2424
<div class="fl-module fl-module-rich-text fl-node-test-category" data-node="test-category">
2525
<div class="fl-module-content fl-node-content">
2626
<div class="fl-rich-text">
27-
<p>TEST SERVICES</p>
27+
<p class="u-text-center">TEST SERVICES</p>
2828
</div>
2929
</div>
3030
</div>
3131
<div class="fl-module fl-module-heading fl-node-test-title" data-node="test-title">
3232
<div class="fl-module-content fl-node-content">
33-
<h1 class="fl-heading">
33+
<h1 class="fl-heading u-text-center">
3434
<span class="fl-heading-text">Component Testing Services</span>
3535
</h1>
3636
</div>

0 commit comments

Comments
 (0)