Branding & Style Guide

2 components Components

Design components are reusable styling that can be applied using just the CSS class names specified in the component. Also known as design 'modules'.

Source: styles.scss, line 37
Example

Demonstration Content TBA

Markup: components/aboutme/aboutme.twig
<h2>Demonstration Content TBA</h2>
Source: components/aboutme/_aboutme.scss, line 1
Example

Demonstration Content TBA

Markup: components/articledisplay/articledisplay.twig
<h2>Demonstration Content TBA</h2>
Source: components/articledisplay/_articledisplay.scss, line 1
Example
Markup: components/block.twig
<aside>
  <div class="block">
    <h2>Example title</h2>
    Simple block: Liquorice fruitcake lollipop. Sesame snaps muffin gummies
    cake. Apple pie dessert sugar plum toffee marzipan bonbon sesame snaps
    halvah. Macaroon croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding
    halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw
    tootsie roll jujubes.
  </div>
</aside>
Source: components/_aside_blocks.scss, line 1
Example

Demonstration Content TBA

Markup: components/contentimages/contentimages.twig
<h2>Demonstration Content TBA</h2>
Source: components/contentimages/_contentimages.scss, line 1
Markup: components/filedownloads/filedownloads.twig
<div class="field--name-field-downloads field--type-entity-reference">
	<div class="field__label">{{file_reference_type}}</div>
	<div class="field__items">
		<div class="field__item"><span class="file--application-pdf"><a href="#">{{file_download_01}}</a></span></div>
		<div class="field__item"><span class="file--application-xls"><a href="#">{{file_download_02}}</a></span></div>
		<div class="field__item"><span class="file--application-doc"><a href="#">{{file_download_03}}</a></span></div>
		<div class="field__item"><span class="file--application-ppt"><a href="#">{{file_download_04}}</a></span></div>
		<div class="field__item"><span class="file--application-key"><a href="#">{{file_download_05}}</a></span></div>
		<div class="field__item"><span class="file--application-txt"><a href="#">{{file_download_06}}</a></span></div>
	</div>
</div>
Source: components/filedownloads/_filedownloads.scss, line 1
Example
Under Construction Icon

403-Forbidden

You are forbidden from accessing content in this area. Please contact the site administrators for more help.
Markup: components/forbiddenpage/forbiddenpage.twig
<div id="mainwrapper" class="system-status-page group">
	<main role="main">
		<div class="main_icon">
			<img src="../images/Icon-Forbidden.svg" alt="Under Construction Icon">
		</div>
		<div class="group">
            <h1>403-Forbidden</h1>
             You are forbidden from accessing content in this area. Please <a href="/contact">contact</a> the site administrators for more help.
         </div>
	</main>
</div> <!-- End Mainwrapper -->
Source: components/forbiddenpage/_forbiddenpage.scss, line 1
Markup: components/header.twig
<div style="background-color: rgba(0,0,0,0.85); background-blend-mode: multiply;">
<nav id="main_navigation">
	<div class="main_navigation">
  <nav class="block-system-menublock menu--main">
    <ul class="menu">
      <li class="menu-item"><a href="/" class="is-active">Example</a></li>
      <li class="menu-item"><a href="/">Example</a></li>
      <li class="menu-item"><a href="/">Example</a></li>
      <li class="menu-item"><a href="/">Example</a></li>
    </ul>
  </nav>
</div>
</nav>
</div>
Source: components/_header.scss, line 1
Example

Demonstration Content TBA

Markup: components/herobanner/herobanner.twig
<h2>Demonstration Content TBA</h2>
Source: components/herobanner/_herobanner.scss, line 1
Example

Hello

This is homepage intro text, with special typgraphic treatment for this area only.

Markup: components/homepage/homepage.twig
<body class="frontpage">
	<div id="content">
		<h1>Hello</h1>
		<p>This is homepage intro text, with <span class="leadin">special typgraphic treatment</span> for this area only.</p>
	</div>
</body>

<div class="homeicons clearfix"><div class="iconlink clearfix"><a href="/work"><img alt="Work" src="/themes/custom/kk_theme/images/Work_Icon.svg" /> </a><p><a href="/work">Work</a></p></div><div class="iconlink clearfix"><a href="/writing"><img alt="Writing" src="/themes/custom/kk_theme/images/Writing_Icon.svg" /> </a><p><a href="/writing">Writing</a></p></div><div class="iconlink clearfix"><a href="/about-me"><img alt="About Me" src="/themes/custom/kk_theme/images/About_Icon.svg" /> </a><p><a href="/about-me">About</a></p></div></div><!-- End homeicons div -->
Source: components/homepage/_homepage.scss, line 1

2.11 components.mainimage Main Image

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

This governs the styling and presentation of the main image at the header of certain content types, such as articles and work samples.

Example

Demonstration Content TBA

Markup: components/mainimage/mainimage.twig
<h2>Demonstration Content TBA</h2>
Source: components/mainimage/mainimage.scss, line 1

2.12 components.maintenancepage Maintenance Page

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Maintenance Page Styling and Layout. For consistency, this display utilizes the standard header and footer elements.

Example

Site Under Maintenance

Under Construction Icon

Karl Kaufmann Online is currently undergoing maintenance, and should be back online momentarily. In the meantime, feel free to check me out on social media via the links below.

Markup: components/maintenancepage/maintenancepage.twig
<div id="mainwrapper" class="mainteancepage group">
	<main role="main">
		<h1>{{ title }}</h1>
		<div class="main_icon">
			<img src="../images/UnderConstruction_Icon.svg" alt="Under Construction Icon">
		</div>
			<p>{{ page_content }}</p>
	</main>
</div> <!-- End Mainwrapper -->
Source: components/maintenancepage/_maintenancepage.scss, line 1
Example
Markup: components/messages/messages.twig
<div role="contentinfo" aria-label="Error message" class="messages drupal-messages messages--error">
	<div role="alert">
		<h2 class="visually-hidden">Error message</h2>
			<ul class="messages__list">
				<li class="messages__item">{{messages_item1}}</li>
				<li class="messages__item">{{messages_item2}}</li>
				<li class="messages__item"><em class="placeholder">{{messages_placeholder}}</em>{{messages_item3}}</li>
				<li class="messages__item">{{messages_item3}}</li>
				<li class="messages__item">{{messages_item3}}</li>
			</ul>
	</div>
</div>

<div role="contentinfo" aria-label="Error message" class="messages drupal-messages messages--warning">
	<div role="alert">
		<h2 class="visually-hidden">Warning message</h2>
			<ul class="messages__list">
				<li class="messages__item">{{messages_item1}}</li>
				<li class="messages__item">{{messages_item2}}</li>
				<li class="messages__item">{{messages_item3}}</li>
				<li class="messages__item">{{messages_item3}}</li>
				<li class="messages__item">{{messages_item3}}</li>
			</ul>
	</div>
</div>

<div role="contentinfo" aria-label="Error message" class="messages drupal-messages messages--status">
	<div role="alert">
		<h2 class="visually-hidden">Status message</h2>
			<ul class="messages__list">
				<li class="messages__item">{{messages_item1}}</li>
				<li class="messages__item">{{messages_item2}}</li>
				<li class="messages__item">{{messages_item3}}</li>
				<li class="messages__item">{{messages_item3}}</li>
				<li class="messages__item">{{messages_item3}}</li>
			</ul>
	</div>
</div>
Source: components/messages/_messages.scss, line 1
Example
Under Construction Icon

404-Page Not Found

Oops! The requested page could not be found. Please try again, or contact the site administrators for more help.
Markup: components/notfound/notfound.twig
<div id="mainwrapper" class="system-status-page group">
	<main role="main">
		<div class="main_icon">
			<img src="../images/Icon-NotFound.svg" alt="Under Construction Icon">
		</div>

		<div class="group">
            <h1>404-Page Not Found</h1>
            Oops! The requested page could not be found. Please try again, or <a href="/contact">contact</a> the site administrators for more help.
          </div>


	</main>
</div> <!-- End Mainwrapper -->
Source: components/notfound/_notfound.scss, line 1
Example
Markup: components/tabs.twig
<div class="block-tabs">
  <ul>
    <li><a href="#" class="is-active">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
  </ul>
</div>
Source: components/_tabs.scss, line 1
Example
Tech Notes
NOTICE: Time waits for no one, and doubly so for technical information. This was posted 3 years ago. Although best efforts are made to keep content current, it’s advised to verify that this is the case here.

Article Title

Markup: components/technotes/technotes.twig

	<div class="technotes contentbanner group">
		<div class="innerbanner">
			<div class="inner-text">
				{{ banner_text }}
			</div>
		</div>
	</div>
<div id="mainwrapper" class="technotes">	
	<div class="content-notice">
		{{ notice_text }}
	</div>
<h1>{{ note_title }}</h1>
</div>
Source: components/technotes/_technotes.scss, line 1
Markup: components/termreference/termreference.twig
<div class="field--name-field-topics">
	<div class="field__label">{{term_type_title}}</div>
	<div class="field__items">
		<div class="field__item"><a href="#">{{taxonomy_term_01}}</a></div>
		<div class="field__item"><a href="#">{{taxonomy_term_02}}</a></div>
		<div class="field__item"><a href="#">{{taxonomy_term_03}}</a></div>
		<div class="field__item"><a href="#">{{taxonomy_term_04}}</a></div>
		<div class="field__item"><a href="#">{{taxonomy_term_05}}</a></div>
		<div class="field__item"><a href="#">{{taxonomy_term_06}}</a></div>
	</div>
</div>
Source: components/termreference/_termreference.scss, line 1
Example
Under Construction Icon

401-Unauthorized

Access to this resource is denied. Please log in, or contact the site administrators for more help.
Markup: components/unauthorizedpage/unauthorizedpage.twig
<div id="mainwrapper" class="system-status-page group">
	<main role="main">
		<div class="main_icon">
			<img src="../images/Icon-Forbidden.svg" alt="Under Construction Icon">
		</div>
		<div class="group">
            <h1>401-Unauthorized</h1>
            Access to this resource is denied. Please log in, or <a href="/contact">contact</a> the site administrators for more help.
         </div>
	</main>
</div> <!-- End Mainwrapper -->
Source: components/unauthorizedpage/_unauthorizedpage.scss, line 1
Example

Demonstration Content TBA

Markup: components/workdisplays/workdisplays.twig
<div class="workdisplays"><h2>Demonstration Content TBA</h2></div>
Source: components/workdisplays/_workdisplays.scss, line 1