PHPackages nystudio107/craft-twig-base-templates - 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. nystudio107/craft-twig-base-templates ActiveTwig-bundle[Templating & Views](/categories/templating) nystudio107/craft-twig-base-templates ===================================== Craft CMS Twig base templates 1.0.1(2y ago)5316MITTwig Since Dec 27Pushed 2y ago2 watchersCompare [ Source](https://github.com/nystudio107/craft-twig-base-templates)[ Packagist](https://packagist.org/packages/nystudio107/craft-twig-base-templates)[ Docs](https://nystudio107.com)[ GitHub Sponsors](https://github.com/khalwat)[ RSS](/packages/nystudio107-craft-twig-base-templates/feed)WikiDiscussions develop Synced 1mo ago READMEChangelog (2)Dependencies (2)Versions (4)Used By (0) Craft Twig Base Templates ========================= [](#craft-twig-base-templates) Craft CMS Twig base templates that provide flexible agnostic layout templates for any web-based Craft CMS project. They provide a base layout with baked-in blocks to structure the various sections of the `` and `` HTML tags. They also automatically handle both regular web requests and AJAX requests for the same page, returning only the content without the UX chrome for AJAX requests. These templates are installed automatically via the [Twig Bundle Installer](https://github.com/nystudio107/twig-bundle-installer) so they can be easily updated like any Composer dependency. Requirements ------------ [](#requirements) These templates Craft CMS 3 or later (fully compatible with Craft CMS 4 & 5). Installation ------------ [](#installation) To install the Craft Twig Base Templates, follow these steps: 1. Follow the instructions for installing the [Twig Bundle Installer](https://github.com/nystudio107/twig-bundle-installer?tab=readme-ov-file#adding-twig-bundles-to-your-project) Composer plugin into your project 2. Open your terminal and go to your Craft project: ``` cd /path/to/project ``` 3. Then tell Composer to require the Craft Twig Base Templates package: ``` composer require nystudio107/craft-twig-base-templates ``` The templates will then be installed into the git-ignored `vendor/` directory inside of your Twig `templates/` directory. Usage ----- [](#usage) The layouts are intentionally bare-bones, providing a sane structure on which any Craft CMS site can be built. The value provided is largely structural and organizational, at the expense of out of the box functionality. You can use the `html-page.twig` directly, or you can `extends` it with your own layout template that adds functionality you want available to all of your pages. ### Extending the `html-page.twig` base layout [](#extending-the-html-pagetwig-base-layout) In your layout or page templates, extend the `html-page.twig` as follows: ``` {% extends "vendor/nystudio107/craft-twig-base-templates/templates/_layouts/html-page.twig" %} ``` ### The base layout blocks [](#the-base-layout-blocks) The layout has the following blocks defined that you can override as you see fit: ``` ┌─────────────────────────────────────────────────────────────────────────────┐ │ ┌─────────────────────────────────────────────────────────────────────────┐ │ │ │ headMeta │ │ │ └─────────────────────────────────────────────────────────────────────────┘ │ │ ┌─────────────────────────────────────────────────────────────────────────┐ │ │ │ headLinks │ │ │ └─────────────────────────────────────────────────────────────────────────┘ │ │ ┌─────────────────────────────────────────────────────────────────────────┐ │ │ │ headScripts │ │ │ └─────────────────────────────────────────────────────────────────────────┘ │ │ ┌─────────────────────────────────────────────────────────────────────────┐ │ │ │ headStyles │ │ │ └─────────────────────────────────────────────────────────────────────────┘ │ │ headContent │ └─────────────────────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────────────────────┐ │ ┌─────────────────────────────────────────────────────────────────────────┐ │ │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ │ │ preContent │ │ │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ │ │ content │ │ │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │ │ │ postContent │ │ │ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │ │ bodyHtml │ │ │ └─────────────────────────────────────────────────────────────────────────┘ │ │ ┌─────────────────────────────────────────────────────────────────────────┐ │ │ │ bodyScripts │ │ │ └─────────────────────────────────────────────────────────────────────────┘ │ │ bodyContent │ └─────────────────────────────────────────────────────────────────────────────┘ ``` Here's a breakdown of the blocks, and intended uses for each: - **`headContent`** - Wrapper block for everything that appears inside of the `` tag - **`headMeta`** - For `` tags such as `` - **`headLinks`** - For `` tags such as `` - **`headScripts`** - For `` tags such as `` that should appear inside the `` tag - **`headStyles`** - For any inline (critical) CSS `` tags - **`bodyContent`** - Wrapper block for everything that appears inside of the `` tag - **`bodyHtml`** - Wrapper block for HTML content that appears inside of the `` tag - **`preContent`** - HTML content that appears before the primary `content` block (such as a navbar or a site header) - **`content`** - The primary HTML content for the page. This is the only block rendered for AJAX requests - **`postContent`** - HTML content that appears after the primary `content` block (such as links or a site footer) - **`bodyScripts`** - For `` tags such as `` that should appear before the `` tag As a rule of thumb, override only the most specific block you need to. For instance, to add content to your page in a template that extends the `html-page` layout, just override the `content` block: ``` {% block content %} Some title Some content {% endblock content %} ``` ...rather than overriding the `bodyHtml` block. However, if you need to provide HTML that wraps your `content` block, you're free to do so as well: ``` {% block bodyHtml %} {% block preContent %} Site header {% endblock preContent %} {% block content %} Content title Some content {% endblock content %} {% block postContent %} Site footer {% endblock postContent %} {% endblock bodyHtml %} ``` ### Rendering Parent Block Content [](#rendering-parent-block-content) You'll notice that even in these very basic base layout templates, some of the blocks have content in them, for example the `headMeta` block: ``` {# -- Any tags that should be included in the -- #} {% block headMeta %} {% endblock headMeta %} ``` This is provided as a convenience for you, because almost every website will want to have these tags on them. If you override a block in your own layout or page templates, your content will be displayed instead of the parent block's content. However, you can use `{{ parent() }}` to render the parent block's content, while also adding your own content to it: ``` {% block headMeta %} {{ parent() }} {% endblock headMeta %} ``` The above will render the content from the `html-page.twig`'s `headMeta` block, and then also output your content as well. ### The special `content` block for AJAX [](#the-special-content-block-for-ajax) The `content` block is handled specially, in that when the incoming request is a web request, it will render the page normally with all of the UX chrome from the various blocks specified above. When the incoming request is an AJAX request, instead **only** the `content` block is rendered and returned. This allows you to easily create full web pages for your content (great for SEO and indexing) while also providing that same content in a modal or other presentation via JavaScript and AJAX requests. ### Advanced customization [](#advanced-customization) In addition to the blocks provided by the `html-page.twig` layout, further customization of the rendered page is available to you by overriding the blocks in the `web.twig` layout template (which the `html-page.twig` layout extends from): ``` ┌─────────────────────────────────────────────────────────────────────────────┐ │ ┌─────────────────────────────────────────────────────────────────────────┐ │ │ │ htmlTag │ │ │ └─────────────────────────────────────────────────────────────────────────┘ │ │ ┌─────────────────────────────────────────────────────────────────────────┐ │ │ │ headTag │ │ │ └─────────────────────────────────────────────────────────────────────────┘ │ │ ┌─────────────────────────────────────────────────────────────────────────┐ │ │ │ headContent │ │ │ └─────────────────────────────────────────────────────────────────────────┘ │ │ ┌─────────────────────────────────────────────────────────────────────────┐ │ │ │ bodyTag │ │ │ └─────────────────────────────────────────────────────────────────────────┘ │ │ ┌─────────────────────────────────────────────────────────────────────────┐ │ │ │ bodyContent │ │ │ └─────────────────────────────────────────────────────────────────────────┘ │ │ htmlPage │ └─────────────────────────────────────────────────────────────────────────────┘ ``` So if you need a ``, `` or `` tag with specific attributes on it, you can do that easily: ``` {% block htmlTag %} {% endblock htmlTag %} ``` ``` {% block headTag %} {% endblock headTag %} ``` ``` {% block bodyTag %} {% endblock bodyTag %} ``` You can also entirely replace the content wrapped in the `` or `` tags with: ``` {% block headContent %} {# -- anything you like -- #} {% endblock headContent %} ``` ``` {% block bodyContent %} {# -- anything you like -- #} {% endblock bodyContent %} ``` You can even entirely replace everything rendered on the page by overriding `htmlPage` block that encompasses everything the page renders: ``` {% block htmlPage %} {# -- anything you like -- #} {% endblock htmlPage %} ``` Roadmap ------- [](#roadmap) Some things to do, and ideas for potential features: - Add more layouts that extend off of the `html-page.twig` to provide additional opinionated functionality Brought to you by [nystudio107](http://nystudio107.com) ### Health Score 24 — LowBetter than 32% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity16 Limited adoption so far Community8 Small or concentrated contributor base Maturity44 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% 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 ~117 days Total 2 Last Release 750d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/7570798?v=4)[Andrew Welch](/maintainers/khalwat)[@khalwat](https://github.com/khalwat) --- Top Contributors [![khalwat](https://avatars.githubusercontent.com/u/7570798?v=4)](https://github.com/khalwat "khalwat (31 commits)") --- Tags composerbundletwiginstallertwig-bundle ### Embed Badge ![Health badge](/badges/nystudio107-craft-twig-base-templates/health.svg) ``` [![Health](https://phpackages.com/badges/nystudio107-craft-twig-base-templates/health.svg)](https://phpackages.com/packages/nystudio107-craft-twig-base-templates) ``` ### Alternatives [twig/extra-bundle A Symfony bundle for extra Twig extensions 91292.0M315](/packages/twig-extra-bundle)[nystudio107/twig-bundle-installer Install, update, and manage Twig template bundles via Composer 361.1k1](/packages/nystudio107-twig-bundle-installer)[emanueleminotto/twig-cache-bundle Symfony 2 Bundle for twigphp/twig-cache-extension 59678.3k4](/packages/emanueleminotto-twig-cache-bundle)[yellowskies/qr-code-bundle Symfony Barcode & QR Code Generator Bundle with Twig extension 36682.9k](/packages/yellowskies-qr-code-bundle)[jbouzekri/phumbor-bundle A Symfony Bundle to use the minimal Thumbor PHP client from webfactory/phumbor 25740.0k1](/packages/jbouzekri-phumbor-bundle)[nucleos/antispam-bundle This bundle provides some basic features to reduce spam in symfony forms. 52105.1k](/packages/nucleos-antispam-bundle) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)