Skip to content

General asset cleanup and nav style fixes#4

Open
sorentwo wants to merge 8 commits intoesl:masterfrom
sorentwo:asset-cleanup
Open

General asset cleanup and nav style fixes#4
sorentwo wants to merge 8 commits intoesl:masterfrom
sorentwo:asset-cleanup

Conversation

@sorentwo
Copy link
Copy Markdown

There are a lot of changes in this PR, from css fixes, to font reductions, and JS consolidation. Each commit outlines specific improvements, but overall:

  • Consolidate six fonts into one (there were 6 fonts downloaded while only two were used, and one of those in three places). This makes the entire page more consistent and improves legibility for some copy)
  • Use modern vanilla JS instead of older, and sometimes unused, assets (all the same functionality as before, with a 532KB, 98.5% overall reduction in downloaded JS)
  • Tweak the alignment and styling for the main nav menu (vertical alignment was off, dropdown hover states weren't full width, the mobile version had secondary dropdowns that weren't usable)

Use a current ruby version (the pinned version is 5+ years old), and
update the tooling to ignore deps/vendor directories.
There were six fonts downloaded even though only two were used, and one
of those only referenced in a few titles.
After this cleanup, down to just 4 JS files:

  jquery-1.11.0.js     (94KB) - Required by Owl Carousel
  owl.carousel.min.js  (43KB) - Testimonials carousel
  fslightbox.js        (30KB) - Gallery lightbox (conditional)
  main.js              (4KB)  - Site functionality

Total JS cleanup:

  - Started with: 17 files (~540KB)
  - Now: 4 files (~171KB)
  - Removed: 13 files (~369KB / 68% reduction)
The new solution uses portable, vanilla JS weighing in around 1KB,
rather than Owl Carousel at 43KB.
Total JS reduction:
- Started: 17 files, ~540KB
- Now: 2 files, ~35KB
- Removed: ~505KB (93% reduction)

main.js now handles:
- Page loader
- Header background on scroll
- Mobile menu toggle
- Testimonials carousel (infinite loop, responsive, autoplay)
- Smooth scrolling for anchor links

All in ~190 lines of vanilla JS, no dependencies.
Remove fslightbox.js in favor of ~40 lines of JS and ~60 lines of CSS.

Final JS summary:
Started:  17 files, ~540KB
Now:      1 file,   ~8KB
Removed:  ~532KB (98.5% reduction)

main.js now handles everything:
- Page loader
- Header scroll effect
- Mobile menu
- Testimonials carousel
- Smooth scrolling
- Gallery lightbox

All in ~270 lines of vanilla JS, zero dependencies.
The vertical alignment for nav links and dropdowns as off because of
some global rules that weren't overridden.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant