#main の 直下には .page-section / .page-header / .page-footer がきます。
.page-section は .row / row-full などの親になります。
.各ページによるレイアウトの違いは .l-{layout_template_name} で区別します。

h1.page_title

.row / row-full などの子に .content-section / .content-header / .content-footer がきます。
各セクションによるレイアウトの違いは .s-{section_template_name} で区別します。

h2.section-title

content-section

    {% for i in [1,2,3,4,5,6,7,8,9,10,11,12] %}
  • m-{module-name}
    • {% endfor %}

content-section

gulp.js

Ubiquitous Social Icons!

{% include "includes/social-icons-font.html" %} {% include "includes/social-icons-svg.html" %}

An auto-loaded async module highlighted this!

footer-footer

row-full

content-section

row-large-up

content-section

.row / row-full などの子に .content-section / .content-header / .content-footer がきます。
各セクションによるレイアウトの違いは .s-{section_template_name} で区別します。

h2.section-title

content-section

content-section

content-section

content-section

footer-footer