PHPackages thelia/frontoffice-modern-template - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. thelia/frontoffice-modern-template ActiveThelia-frontoffice-template[Templating & Views](/categories/templating) thelia/frontoffice-modern-template ================================== 2.6.0(7mo ago)06.4k↓33.3%11PHPCI passing Since Oct 25Pushed 5mo ago4 watchersCompare [ Source](https://github.com/thelia-templates/modernFront)[ Packagist](https://packagist.org/packages/thelia/frontoffice-modern-template)[ RSS](/packages/thelia-frontoffice-modern-template/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependencies (1)Versions (51)Used By (1) > ⚠ This is the repository of Thelia default frontoffice template. All the pull requests on this repo will be ignored. If you want to create a project, please take a look at [thelia/thelia-project](https://github.com/thelia/thelia-project)If you want to contribute to Thelia, please take a look at [thelia/thelia](https://github.com/thelia/thelia) About ===== [](#about) This Thelia template is based on [Symfony Encore](https://symfony.com/doc/current/frontend.html), it uses Smarty (Thelia default templating engine) for static content and [React](https://reactjs.org) for managing dynamic components (eg:cart). Styling is done with [Tailwind](https://tailwindcss.com) and PostCSS, but can be overrided or switched, to use any other css preprocessor/ css framework. Prerequisites ------------- [](#prerequisites) - [NodeJS](https://nodejs.org/) (^10) - [Yarn](https://yarnpkg.com/) Available commands ------------------ [](#available-commands) ``` $ yarn build ``` (compile & optimize assets for production) ``` $ yarn start ``` (development mode with live-reload) Manual Installation ------------------- [](#manual-installation) ``` $ yarn install && yarn build ``` Components ---------- [](#components) This template is based around pages templates (located at the `root` of this directory) and a components system (in the `components` directory). ### Components system [](#components-system) - Component should be reusable and the more agnostic possible to allow them to be composed freely. - Files relative to the component (html, css, js, images, ...) should all be inside the component directory to keep them organized and easy to move around. Retrieving compiled assets in pages ----------------------------------- [](#retrieving-compiled-assets-in-pages) Symfony Encore use entries to identify the different JS bundles composing the template, those entries can be modified in the `webpack.config.js` file. This pattern allow your js code to be split and used only on the relevant pages. You declare them like: ``` Encore.addEntry('app', './assets/js/app.js') .addEntry('home', './assets/js/routes/home') .addEntry('category', './assets/js/routes/category') .addEntry('product', './assets/js/routes/product') .addEntry('register', './assets/js/routes/register') .addEntry('address', './assets/js/routes/address') .addEntry('delivery', './assets/js/routes/delivery'); ``` and you use them like: ⚠️ **layout.tpl** ⚠️ (this is the main JS bundle, which is used for every pages of the website) ``` {block name="css"} {encore_entry_link_tags entry="app"} {/block} {block name="javascript"} {encore_entry_script_tags entry="app"} {/block} ``` **product.html** (note the use of the *append* keyword in the smarty block, allowing us to keep the main bundle instead of replacing it) ``` {block name="css" append} {encore_entry_link_tags entry="product"} {/block} {block name="javascript" append} {encore_entry_script_tags entry="product"} {/block} ``` ### Image & other assets [](#image--other-assets) You can use the smarty function `{encore_manifest_file file="key/of/your/asset/in/the/manifest"}` to retrieve any assets compiled by Symfony Encore, the `manifest.json` file can be found inside the `dist` directory ``` ``` Documentations -------------- [](#documentations) - [Thelia](http://doc.thelia.net) - [Smarty](https://www.smarty.net/) - [Symfony Encore](https://symfony.com/doc/current/frontend.html) - [Tailwind](https://tailwindcss.com) - [React](https://reactjs.org) Useful extensions for developping with VS Code ---------------------------------------------- [](#useful-extensions-for-developping-with-vs-code) - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - [ESlint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) - [Headwind](https://marketplace.visualstudio.com/items?itemName=heybourn.headwind) ### Health Score 50 — FairBetter than 95% of packages Maintenance68 Regular maintenance activity Popularity23 Limited adoption so far Community21 Small or concentrated contributor base Maturity76 Established project with proven stability Bus Factor1 Top contributor holds 52.5% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~99 days Recently: every ~201 days Total 45 Last Release 214d ago PHP version history (3 changes)2.0.0-beta1PHP >=5.4 2.4.0-alpha1PHP >=5.5 2.4.0PHP >=5.6 <7.4 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/2196919?v=4)[thelia](/maintainers/thelia)[@thelia](https://github.com/thelia) --- Top Contributors [![Lucanis](https://avatars.githubusercontent.com/u/6052481?v=4)](https://github.com/Lucanis "Lucanis (62 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (29 commits)")[![lopes-vincent](https://avatars.githubusercontent.com/u/6057206?v=4)](https://github.com/lopes-vincent "lopes-vincent (14 commits)")[![gillesbourgeat](https://avatars.githubusercontent.com/u/7335734?v=4)](https://github.com/gillesbourgeat "gillesbourgeat (3 commits)")[![robinallezard](https://avatars.githubusercontent.com/u/32717550?v=4)](https://github.com/robinallezard "robinallezard (3 commits)")[![ArthurLashermes](https://avatars.githubusercontent.com/u/76913541?v=4)](https://github.com/ArthurLashermes "ArthurLashermes (2 commits)")[![Jordy-Hermes](https://avatars.githubusercontent.com/u/56640527?v=4)](https://github.com/Jordy-Hermes "Jordy-Hermes (1 commits)")[![bvey](https://avatars.githubusercontent.com/u/6294106?v=4)](https://github.com/bvey "bvey (1 commits)")[![anonymze](https://avatars.githubusercontent.com/u/44375065?v=4)](https://github.com/anonymze "anonymze (1 commits)")[![Neox63](https://avatars.githubusercontent.com/u/60252816?v=4)](https://github.com/Neox63 "Neox63 (1 commits)")[![pierrebaguet](https://avatars.githubusercontent.com/u/31960082?v=4)](https://github.com/pierrebaguet "pierrebaguet (1 commits)") ### Embed Badge ![Health badge](/badges/thelia-frontoffice-modern-template/health.svg) ``` [![Health](https://phpackages.com/badges/thelia-frontoffice-modern-template/health.svg)](https://phpackages.com/packages/thelia-frontoffice-modern-template) ``` ### Alternatives [mustache/mustache A Mustache implementation in PHP. 3.3k44.6M291](/packages/mustache-mustache)[roots/acorn Framework for Roots WordPress projects built with Laravel components. 9682.1M97](/packages/roots-acorn)[mopa/bootstrap-bundle Easy integration of twitters bootstrap into symfony2 7042.9M33](/packages/mopa-bootstrap-bundle)[limenius/react-bundle Client and Server-side react rendering in a Symfony Bundle 3871.2M](/packages/limenius-react-bundle)[symfony/ux-icons Renders local and remote SVG icons in your Twig templates. 545.8M69](/packages/symfony-ux-icons)[nystudio107/craft-twigpack Twigpack is a bridge between Twig and webpack, with manifest.json & webpack-dev-server HMR support 97341.4k17](/packages/nystudio107-craft-twigpack) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)