diff --git a/.github/workflows/test-unit.yml b/.github/workflows/test-unit.yml new file mode 100644 index 000000000..bf124845e --- /dev/null +++ b/.github/workflows/test-unit.yml @@ -0,0 +1,24 @@ +name: unit-tests + +on: + workflow_dispatch: + +jobs: + unit: + runs-on: ubuntu-latest + timeout-minutes: 5 + steps: + - name: Checkout + uses: actions/checkout@v5 + + - name: Setup Ruby + uses: ruby/setup-ruby@v1 + with: + ruby-version: '3.4' + bundler-cache: true + + - name: Run unit tests + env: + PRECOMPILED_ASSETS: '1' + TEST_SERVER_PORT: '1314' + run: bundle exec rake test TEST='test/unit/**/*_test.rb' diff --git a/.gitignore b/.gitignore index 1e497bc9b..4afd9e44f 100644 --- a/.gitignore +++ b/.gitignore @@ -79,3 +79,4 @@ _reports/ _dest/ _temp/ +_tmp/ diff --git a/BEM_IMPLEMENTATION_GUIDE.md b/BEM_IMPLEMENTATION_GUIDE.md new file mode 100644 index 000000000..79fc5f2ab --- /dev/null +++ b/BEM_IMPLEMENTATION_GUIDE.md @@ -0,0 +1,183 @@ +# BEM Implementation Guide - JetThoughts Site + +## ✅ COMPLETED WORK + +### Phase 1: CSS File Organization (100% Complete) +- ✅ All numeric CSS files renamed to semantic names +- ✅ 737-layout.css → beaver-grid-system.css +- ✅ Updated template references in services.html +- ✅ Removed dependencies on numeric file names + +### Phase 2: BEM Architecture Foundation (100% Complete) +- ✅ Created `bem-layout-system.css` with comprehensive BEM patterns +- ✅ Mapped FL Builder classes to BEM equivalents: + - `fl-row` → `l-row` (layout) + - `fl-col` → `l-column` (layout) + - `fl-module` → `c-module` (component) + - `fl-builder` → `c-page-builder` (component) + +### Phase 3: Proof of Concept Implementation (100% Complete) +- ✅ Updated homepage hero partial with dual class system +- ✅ Added BEM classes alongside existing FL classes +- ✅ Integrated BEM CSS into homepage resource bundle +- ✅ Verified Hugo builds successfully with new CSS + +## 🎯 BEM ARCHITECTURE OVERVIEW + +### Layout Classes (l-*) +```css +.l-row /* Base row container */ +.l-row--full-width /* Full width row */ +.l-row--fixed-width /* Constrained width row */ +.l-row--center /* Centered content row */ +.l-row--bg-photo /* Background photo row */ +.l-row__content-wrap /* Row content wrapper */ +.l-row__content /* Row content container */ + +.l-column-group /* Column container */ +.l-column-group--equal-height /* Equal height columns */ +.l-column /* Individual column */ +.l-column__content /* Column content wrapper */ +``` + +### Component Classes (c-*) +```css +.c-page-builder /* Page builder container */ +.c-page-builder__content /* Page builder content */ + +.c-module /* Base module */ +.c-module--heading /* Heading module */ +.c-module--rich-text /* Rich text module */ +.c-module--button /* Button module */ +.c-module__content /* Module content wrapper */ +``` + +### Utility Classes (u-*) +```css +.u-clearfix /* Clearfix utility */ +.u-clear /* Clear float utility */ +.u-sr-only /* Screen reader only */ +.u-hidden /* Hide element */ +.u-visible /* Show element */ +.u-visible--large /* Show on large screens */ +.u-visible--medium /* Show on medium screens */ +.u-visible--mobile /* Show on mobile screens */ +``` + +## 🚀 IMPLEMENTATION EXAMPLE + +### Before (FL Builder): +```html +
By <%= @post.user.name %> on <%= @post.created_at.strftime('%B %d, %Y') %>
+By <%= @post.user.name %>
+ <% end %> + + <% @post.comments.each do |comment| %> + <% cache comment do %> +