MobiSkan.pl
The public product site for MobiSkan, built on Joomla with a fully custom template. The only parts of Joomla core actually reused are the CMS content model, the routing/SEF layer, and com_finder (Joomla's native search engine) powering full-text search over the article library.
Stack and structure
- CMS: Joomla core (articles, categories, menu system,
com_findersearch), no page-builder plugin, no third-party template. - Template: hand-written PHP template overrides plus a CSS codebase organised in strict ITCSS layers (settings, generic, elements, objects, components, utilities), so a token change in
00-settings.csscascades predictably instead of fighting specificity elsewhere. - Frontend JS: no framework. Around 15 independent, single-purpose vanilla modules (
theme.js,reveal-on-scroll.js,product-slider.js,mobile-menu.js,responsive-tables.js,cookies.js,functions-explorer.js,article-gallery.js,article-share.js,article-scroll.js,news-view-toggle.js,mod-finder-clear.js) loaded separately rather than bundled, plus Lucide for iconography. - SEO/structured data: Schema.org JSON-LD (
BreadcrumbListand page-level markup) generated per page, Open Graph tags per article, SEF URLs throughout.
How it's built
Rather than let Joomla's default output drive the design, every template chunk is overridden and the visual system is authored from scratch on top of the CMS's content model. Article categories map directly to the site's "Product / Updates / Events" filters, Joomla's native search indexes the article body directly, and each blog post automatically inherits reading time, an image gallery, a share widget, and a scroll-progress indicator from the template, none of that is per-article markup. Interaction behaviour (dark/light theme, scroll reveals, the product screenshot slider, mobile nav) is split into small dependency-free scripts specifically so a change to one doesn't risk a regression in another.
The visual tokens (palette, spacing scale, typography) are shared with the MobiSkan Android app and the WMS admin panel, so the CSS layer effectively encodes the same design system across three otherwise unrelated codebases (Joomla/PHP, Android/Java, React).
