[Logo for The C Shore Landing Page]
The C Shore

Guide to Layout

Guide to OldNew Mashup Layout

Table of Contents

HTML HEAD

PartDescription
TitlePage title
head/theme partialBaseURL, CSS, JS, and metadata for all pages in theme
head/site partialAllows to override / extend head-theme partial for a particular site

head/theme partial

PartDescription
rendering metadatacharset, viewport, etc
metadatadescription, keywords, etc
BaseURL(optional) BaseURL definition
CSS linksPull in templatized SCSS to generate site CSS
JS linksJavascript for site
Alternative outputNon-HTML output

HTML BODY

PartDescription
site-badgeThe site logo (if it exists) and title as a button that loads the landing page
menubarThe dropdown/flyout menu and the search box and results element (the results element is hidden by default)

Site Badge for Page

PartDescription
graphics-rowThe combined set of site-badge-graphic classed images and/or text (one row)
siteidThe short text acting as user-visible site identifier (e.g. OldNew Mashup)

Top Bar Menubar

PartDescription
menubar-site-menu-listThe list that gets styled as a dropdown / flyout menu
search-queryThe search form which contains the search input box and submit (‘Search’) button
search-resultsEmpty and not displayed by default; is made visible and populated by the onSubmit action of the search-query form

Main <main> block

  • Title as H1 heading with nice styling in ‘Main Article’ section
PartDescription
Main article (name of section varies)The main body not including sidebar, header, or footer
Section Contents / Lists (for list pages)The pages or list items that that this section/list page is associated with
SidebarOptional: sidebar if enough room on screen (otherwise after main body)
FooterFooter (Links and Colophon)

Main Article for Page

PartDescription
Article headingPage title as H1 heading; content H1 heading in content is suppressed (but used by Table of Contents)
Categories (if present in metadata)Page categories (taxonomies)
Table of Contents (on left)Page contents (floated left)
The actual articleVaries
Tags (if present in metadata)Page tags (taxonomies)

Page Sidebar

PartDescription
Local nav barOptional: on large screens – on small screens local nav bar is first after main menu
Section navigationOptional: navigation with the current section of pages
News itemsOptional: max 5
Recently modified pagesOptional: max 5
EventsOptional: max 5
PartDescription
footer-linksVarious links (see Reference Guide )
colophonVarious document information bits

Colophon for Document

PartDescription
licenseCopyright and license information; flattened (styling) unordered list of licenses for the and another for site as a whole
doc-dateA box that appears when hovered over (on large screens; on small screens it just appears at bottom of page) and show three relevant dates for the documents (created, modified, generated)

See Also