Styling 

The contact list renders its markup with the class system of the academic extensions and ships no styling for it. The system, the classes of Bootstrap it keeps and how a site package styles the markup are described once, in the chapter Styling of academic_base. This chapter shows how the markup of this extension is built up.

The outermost element 

Plugin Content element type Outermost element
Contact list academiccontacts4pages_list academic-contacts4pages-list

The contact list 

Every contact is rendered as the profile item of EXT:academic_persons, inside a grid column of an item list:

<div class="academic-contacts4pages-list">
    <!-- the header of the content element, when the plugin renders it -->
    <div class="ace-content">
        <div class="ace-itemlist">
            <div class="row">
                <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                    <p class="ace-role">Role of the contact</p>
                    <!-- the profile item of EXT:academic_persons -->
                    <article class="ace-item">…</article>
                </div>
            </div>
        </div>
    </div>
</div>
Copied!
  • With Group by role, every role renders an ace-itemlist of its own. Its row starts with the heading of the role, a <header class="ace-header"> around an ace-title, before the grid columns. The contacts without a role follow in a last ace-itemlist without a heading. A grouped contact does not repeat its role in an ace-role.
  • The profile item is built up as described in the chapter Styling of academic_persons. The grid column is the cell of the contact list and the <article class="ace-item"> is the profile. In the list that is not grouped, the role is a <p class="ace-role"> in that column, in front of the article.

An example 

Rules in the stylesheet of the site package, scoped by the outermost element:

.academic-contacts4pages-list .ace-role {
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.academic-contacts4pages-list .ace-itemlist + .ace-itemlist {
    margin-top: 2rem;
}
Copied!

The development instances style the contacts with the partial _academic-persons-list.scss, which styles the profile lists of academic_persons as well, since a contact renders the same item markup, together with the shared rules of _academic-base.scss, both of the site package academics_dev_site, a complete example to copy from.

Every contact is rendered through the partial Contacts/Item.html, so a project that needs other markup for a contact overrides that one partial rather than the list template.