Skip to content

Instantly share code, notes, and snippets.

@umkasanki
Forked from wesrice/_base.twig
Created September 3, 2018 06:13
Show Gist options
  • Save umkasanki/d5007dbd1aa386e3b5ea8846e9df120c to your computer and use it in GitHub Desktop.
Save umkasanki/d5007dbd1aa386e3b5ea8846e9df120c to your computer and use it in GitHub Desktop.
Sample Modular Templating for Craft CMS - Inspired by principles from https://smacss.com/.
<!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>
{#
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 %}
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment