Skip to content

Instantly share code, notes, and snippets.

@wesrice

wesrice/_base.twig

Last active October 2, 2019 18:02
Show Gist options
  • Star 11 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save wesrice/e297c2e8b6be550fddb3 to your computer and use it in GitHub Desktop.
Save wesrice/e297c2e8b6be550fddb3 to your computer and use it in GitHub Desktop.
Download ZIP
Sample Modular Templating for Craft CMS - Inspired by principles from https://smacss.com/.
Raw
_base.twig
<!DOCTYPE html>
<head>
{# Base #}
{% includeCssFile 'layouts/base/css/base.css' %}
{% includeJsFile 'layouts/base/js/base.js' %}
{# Header #}
{% includeCssFile 'modules/header/css/header.css' %}
{% includeJsFile 'modules/header/js/header.js' %}
{# Footer #}
{% includeCssFile 'modules/footer/css/footer.css' %}
{{ getHeadHtml() }}
</head>
<body>
{% cache for 4 weeks %}
{% include 'modules/header/_header' %}
{% endcache %}
{% block content %}{% endblock %}
{% cache for 4 weeks %}
{% include 'modules/footer/_footer' %}
{% endcache %}
{{ getFootHtml() }}
</body>
Raw
about-us.twig
{#
About Us
#}
{% extends "layouts/base/_base" %}
{# Sliders #}
{% includeCssFile 'modules/sliders/css/sliders.css' %}
{% includeJsFile 'modules/sliders/js/sliders.js' %}
{# Content #}
{% includeCssFile 'modules/content/css/content.css' %}
{# Gallery #}
{% includeCssFile 'modules/gallery/css/gallery.css' %}
{% includeJsFile 'modules/gallery/js/gallery.js' %}
{# HTML #}
{% block content %}
{% cache for 4 weeks %}
{% include 'modules/sliders/_sliders' %}
{% include 'modules/content/_content' %}
{% include 'modules/gallery/_gallery' %}
{% endcache %}
{% endblock %}
Raw
template-directory
Sample Directory Structure
-layouts
- base
- css
base.css
- js
base.js
_base.twig
- modules
- content
- css
- content.css
_content.twig
- footer
- css
footer.css
_footer.twig
- gallery
- css
gallery.css
- js
gallery.js
_gallery.twig
- header
- css
header.css
- js
header.js
_header.twig
- sliders
- css
sliders.css
- js
sliders.js
_sliders.twig
- about.twig
@wesrice
Copy link
Author

wesrice commented Jun 17, 2014

This is definitely a work in progress, but a step towards a modular organization of templates and assets.

The idea is that all pages consist of modules. Modules are self contained parts of the webpage. A module consists of it's own html (twig), css, js, images, etc.

By assembling modules on a page, it makes it possible to mix/match modules on a page to build layouts. Also, if you want to completely replace a module or switch out a module, you don't end up having to strip out or replace a ton of CSS/JS from a page style sheet or script. You simply remove the reference to the module's css/js/twig.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment