Skip to content

Commit d9846a8

Browse files
pftgpftg
authored
Adds some posts and cleanups (#246)
* docs * add thoughtsbot styles * content * content * thoughtbot styles * fix * fix tests * cleanup * cleanup * cleanup some ref * cleanup tests * adds github tests * refactor test files to use base_page_test_case * disable tests
1 parent 928bdff commit d9846a8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+9873
-113
lines changed

‎.github/workflows/test-unit.yml‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
name: unit-tests
2+
3+
on:
4+
workflow_dispatch:
5+
6+
jobs:
7+
unit:
8+
runs-on: ubuntu-latest
9+
timeout-minutes: 5
10+
steps:
11+
- name: Checkout
12+
uses: actions/checkout@v5
13+
14+
- name: Setup Ruby
15+
uses: ruby/setup-ruby@v1
16+
with:
17+
ruby-version: '3.4'
18+
bundler-cache: true
19+
20+
- name: Run unit tests
21+
env:
22+
PRECOMPILED_ASSETS: '1'
23+
TEST_SERVER_PORT: '1314'
24+
run: bundle exec rake test TEST='test/unit/**/*_test.rb'

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,3 +79,4 @@ _reports/
7979

8080
_dest/
8181
_temp/
82+
_tmp/

‎BEM_IMPLEMENTATION_GUIDE.md‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
# BEM Implementation Guide - JetThoughts Site
2+
3+
## ✅ COMPLETED WORK
4+
5+
### Phase 1: CSS File Organization (100% Complete)
6+
- ✅ All numeric CSS files renamed to semantic names
7+
- ✅ 737-layout.css → beaver-grid-system.css
8+
- ✅ Updated template references in services.html
9+
- ✅ Removed dependencies on numeric file names
10+
11+
### Phase 2: BEM Architecture Foundation (100% Complete)
12+
- ✅ Created `bem-layout-system.css` with comprehensive BEM patterns
13+
- ✅ Mapped FL Builder classes to BEM equivalents:
14+
- `fl-row` → `l-row` (layout)
15+
- `fl-col` → `l-column` (layout)
16+
- `fl-module` → `c-module` (component)
17+
- `fl-builder` → `c-page-builder` (component)
18+
19+
### Phase 3: Proof of Concept Implementation (100% Complete)
20+
- ✅ Updated homepage hero partial with dual class system
21+
- ✅ Added BEM classes alongside existing FL classes
22+
- ✅ Integrated BEM CSS into homepage resource bundle
23+
- ✅ Verified Hugo builds successfully with new CSS
24+
25+
## 🎯 BEM ARCHITECTURE OVERVIEW
26+
27+
### Layout Classes (l-*)
28+
```css
29+
.l-row /* Base row container */
30+
.l-row--full-width /* Full width row */
31+
.l-row--fixed-width /* Constrained width row */
32+
.l-row--center /* Centered content row */
33+
.l-row--bg-photo /* Background photo row */
34+
.l-row__content-wrap /* Row content wrapper */
35+
.l-row__content /* Row content container */
36+
37+
.l-column-group /* Column container */
38+
.l-column-group--equal-height /* Equal height columns */
39+
.l-column /* Individual column */
40+
.l-column__content /* Column content wrapper */
41+
```
42+
43+
### Component Classes (c-*)
44+
```css
45+
.c-page-builder /* Page builder container */
46+
.c-page-builder__content /* Page builder content */
47+
48+
.c-module /* Base module */
49+
.c-module--heading /* Heading module */
50+
.c-module--rich-text /* Rich text module */
51+
.c-module--button /* Button module */
52+
.c-module__content /* Module content wrapper */
53+
```
54+
55+
### Utility Classes (u-*)
56+
```css
57+
.u-clearfix /* Clearfix utility */
58+
.u-clear /* Clear float utility */
59+
.u-sr-only /* Screen reader only */
60+
.u-hidden /* Hide element */
61+
.u-visible /* Show element */
62+
.u-visible--large /* Show on large screens */
63+
.u-visible--medium /* Show on medium screens */
64+
.u-visible--mobile /* Show on mobile screens */
65+
```
66+
67+
## 🚀 IMPLEMENTATION EXAMPLE
68+
69+
### Before (FL Builder):
70+
```html
71+
<div class="fl-row fl-row-full-width fl-row-bg-photo fl-node-dn129i74qg6m">
72+
<div class="fl-row-content-wrap">
73+
<div class="fl-row-content fl-row-fixed-width">
74+
<div class="fl-col-group fl-col-group-equal-height">
75+
<div class="fl-col">
76+
<div class="fl-col-content">
77+
<div class="fl-module fl-module-heading">
78+
<div class="fl-module-content">
79+
<h1>Build faster. Scale smarter.</h1>
80+
</div>
81+
</div>
82+
</div>
83+
</div>
84+
</div>
85+
</div>
86+
</div>
87+
</div>
88+
```
89+
90+
### After (Dual System):
91+
```html
92+
<div class="fl-row fl-row-full-width fl-row-bg-photo fl-node-dn129i74qg6m l-row l-row--full-width l-row--bg-photo l-row--center">
93+
<div class="fl-row-content-wrap l-row__content-wrap">
94+
<div class="fl-row-content fl-row-fixed-width l-row__content l-row__content--fixed-width">
95+
<div class="fl-col-group fl-col-group-equal-height l-column-group l-column-group--equal-height">
96+
<div class="fl-col l-column">
97+
<div class="fl-col-content l-column__content">
98+
<div class="fl-module fl-module-heading c-module c-module--heading">
99+
<div class="fl-module-content c-module__content">
100+
<h1>Build faster. Scale smarter.</h1>
101+
</div>
102+
</div>
103+
</div>
104+
</div>
105+
</div>
106+
</div>
107+
</div>
108+
</div>
109+
```
110+
111+
## 📋 NEXT STEPS FOR FULL IMPLEMENTATION
112+
113+
### Priority 1: Expand BEM to Core Templates
114+
1. **About Page**: Apply BEM classes to main layout elements
115+
2. **Services Page**: Update with BEM dual-class system
116+
3. **Contact Page**: Implement BEM structure
117+
4. **Blog Templates**: Apply BEM to list and single templates
118+
119+
### Priority 2: Component Library Development
120+
1. **Navigation Component**: Create `c-navigation` BEM patterns
121+
2. **Card Components**: Develop `c-card` variations
122+
3. **Form Components**: Build `c-form` module system
123+
4. **Button Components**: Expand `c-button` variations
124+
125+
### Priority 3: Utility System Expansion
126+
1. **Spacing Utilities**: Add margin/padding utilities
127+
2. **Typography Utilities**: Font size, weight, color utilities
128+
3. **Color Utilities**: Background and text color classes
129+
4. **Layout Utilities**: Flexbox and grid helper classes
130+
131+
## 🔧 IMPLEMENTATION STRATEGY
132+
133+
### Safe Migration Approach
134+
1. **Dual Class System**: Keep FL classes while adding BEM
135+
2. **Progressive Enhancement**: Add BEM to new features first
136+
3. **Template-by-Template**: Migrate one template at a time
137+
4. **Testing Each Step**: Validate layout integrity after each change
138+
139+
### Automation Opportunities
140+
1. **Search & Replace Scripts**: Bulk update common patterns
141+
2. **Template Validation**: Automated checking for BEM compliance
142+
3. **CSS Analysis**: Identify unused FL classes for removal
143+
4. **Performance Monitoring**: Track CSS bundle size improvements
144+
145+
## 📊 SUCCESS METRICS
146+
147+
### Code Quality Improvements
148+
- **Maintainability**: BEM classes are self-documenting
149+
- **Modularity**: Components can be reused across templates
150+
- **Consistency**: Standardized naming conventions
151+
- **Performance**: Optimized CSS specificity
152+
153+
### Technical Benefits
154+
- **Faster Development**: Predictable class patterns
155+
- **Easier Debugging**: Clear component boundaries
156+
- **Better Collaboration**: Shared vocabulary for designers/developers
157+
- **Future-Proof Architecture**: Scalable naming system
158+
159+
## 🚨 IMPORTANT NOTES
160+
161+
### FL Node IDs (630 unique patterns)
162+
The existing FL node IDs (fl-node-[hash]) are too numerous to migrate systematically.
163+
**Recommendation**: Leave these as-is and focus on structural improvements only.
164+
165+
### Gradual Migration Timeline
166+
- **Week 1-2**: Core templates (homepage, about, services)
167+
- **Week 3-4**: Secondary templates (blog, contact, careers)
168+
- **Week 5-6**: Component library development
169+
- **Week 7-8**: Utility system expansion and optimization
170+
171+
### Testing Requirements
172+
- Hugo build validation after each template update
173+
- Visual regression testing on key pages
174+
- Cross-browser compatibility verification
175+
- Performance impact assessment
176+
177+
---
178+
179+
## 🎉 CURRENT STATUS
180+
181+
**PHASE COMPLETION STATUS**: ✅ CSS Architecture Foundation - 100% Complete
182+
183+
The BEM foundation is now in place and ready for expansion. The dual-class system allows for safe migration while maintaining existing functionality. The next developer can continue with template migration or component development using the established patterns.

0 commit comments

Comments
 (0)