2.1 components.aboutme About Me Page

Custom styling and layout for About Me page.

Example

Demonstration Content TBA

Markup: components/aboutme/aboutme.twig

<h2>Demonstration Content TBA</h2>

Source: sass/components/aboutme/_aboutme.scss, line 1

2.2 components.articledisplay Article Display

Main landing page for article displays.

Example

Demonstration Content TBA

Markup: components/articledisplay/articledisplay.twig

<h2>Demonstration Content TBA</h2>

Source: sass/components/articledisplay/_articledisplay.scss, line 1

2.3 components.block Sidebar Block

Sidebar block styling.

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: sass/components/_aside_blocks.scss, line 1

2.4 components.contact Contact

Custom styling and layout for the site contact form.

Example

Contact

Markup: components/contact/contact.twig

<body class="alias--contact">
	<div id="mainwrapper" class="contact-form group">
		<div id="main" class="clearfix">
			<div class="region region-content">
				<h1>Contact</h1>
				<form>
					<div id="edit-introduction">
						Interested in getting in touch? Use the form below, or contact me via the social media links below the form.
						<br>
						<em>*Denotes required field</em>
					</div>
						<label class="form-required" for="edit-name">
							Your Name
						</label>
						<input id="edit-name" type="text">
						<label class="form-required" for="edit-email">
							Your Email
						</label>
						<input id="edit-email" type="text">
						<label class="form-required" for="edit-subject">
							Subject
						</label>
						<input id="edit-subject" type="text">
						<label class="form-required" for="edit-message">
							Message
						</label>
						<textarea id="edit-message" rows="5" cols="60"></textarea>
						<input type="submit" class="webform-button--submit form-submit" name="op" value="Send Message">
				</form>
			</div>
		</div>
	</div>
</body>

Source: sass/components/contact/_contact.scss, line 1

2.5 components.contentbytopic Content by Topic

Styling and layout for Content by Topic Displays.

Example

Content by Topic

Topic (3)

Short and Succinct Title

Average Length Title Demonstration

This Is a Title That‘s a Bit Longer

Interminably Long Topic (2)

Short and Succinct Title

Article Title That Is Longer to Demonstrate How Longer Text Strings Will Be Treated

Markup: components/contentbytopic/contentbytopic.twig

<div id="block-views-block-content-by-topic-block-tn-content group">
	<h2>Content by Topic</h2>
	<div class="content-by-topic">
		<details>
			<summary>{{summary_01}}</summary>
			<div><a href="#">{{sample_title_01}}</a></div>
			<div><a href="#">{{sample_title_02}}</a></div>
			<div><a href="#">{{sample_title_03}}</a></div>
		</details>
		<details>
			<summary>{{summary_02}}</summary>
			<div><a href="#">{{sample_title_04}}</a></div>
			<div><a href="#">{{sample_title_05}}</a></div>
		</details>
	</div>
</div>

Source: sass/components/contentbytopic/_contentbytopic.scss, line 1

2.6 components.contentimages Main Content Area Images

Styling and placement for responsively served images in the main content area of the site.

Example

Demonstration Content TBA

RWD Infographic Branding and Header Treatment

Markup: components/contentimages/contentimages.twig

<h2>Demonstration Content TBA</h2>
<div alt="RWD Infographic Branding and Header Treatment" data-embed-button="image" data-entity-embed-display="image:responsive_image" data-entity-embed-display-settings="main_large_banner" data-entity-type="file" data-entity-uuid="71515e63-8cd5-4590-ae7d-c54bdfed93ba" data-langcode="en" class="embedded-entity">


  <picture><!--[if IE 9]><video style="display: none;"><![endif]--><source srcset="/sites/default/files/styles/main_large_banner_wide_1x/public/images/rwd-infographic_identity-headers-mlb.jpg 1x" media="screen and (min-width: 1220px)" type="image/jpeg"><source srcset="/sites/default/files/styles/main_large_banner_normal_1x/public/images/rwd-infographic_identity-headers-mlb.jpg 1x" media="all and (min-width: 980px)" type="image/jpeg"><source srcset="/sites/default/files/styles/main_large_banner_narrow_1x/public/images/rwd-infographic_identity-headers-mlb.jpg 1x" media="all and (min-width: 740px) and (max-device-width: 979px)" type="image/jpeg"><source srcset="/sites/default/files/styles/main_large_banner_mobile_1x/public/images/rwd-infographic_identity-headers-mlb.jpg 1x" type="image/jpeg"><!--[if IE 9]></video><![endif]--><img src="/sites/default/files/styles/main_large_banner_mobile_1x/public/images/rwd-infographic_identity-headers-mlb.jpg" alt="RWD Infographic Branding and Header Treatment" typeof="foaf:Image"></div>
</picture>
</div>

Source: sass/components/contentimages/_contentimages.scss, line 1

2.7 components.filedownloads File Downloads

Layout and styling of file download elments in organized content types

Example

Downloads

PDF for Download

Excel for Download

Word for Download

Powerpoint for Download

Keynote for Download

Generic File for Download

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: sass/components/filedownloads/_filedownloads.scss, line 1

2.8 components.footer Footer

Default global footer styling for site.

Example

Markup: components/footer/footer.twig

<div id="footerwrapper" class="group">
	<footer id="footer">
		<div class="cog--mq mq-footer">
			<div class="region region-footer">
				<div id="block-languageswitcher" role="navigation">
					<ul class="links">
						<li class="en is-active"><a class="language-link is-active" href="#">English</a></li><li><a class="language-link" href="#">Deutsch</a></li>
					</ul>
				</div>
				<div id="block-standardfooter">
					<!-- Add Content from Below Only! -->
					<div class="footer_main group">
						<div class="group" id="footerLeft">
							<p>&copy; 2014-[current-date:custom:Y] Karl Kaufmann</p>
						</div>
						<div class="group" id="footerRight"><p id="sm_icons">
							<a href="https://dribbble.com/karolus"><span class="icon-dribbble"> </span></a> <a href="http://be.net/karolus"><span class="icon-behance"> </span></a> <a href="http://linkedin.com/in/karlkaufmann"><span class="icon-linkedin"> </span></a> <a href="https://twitter.com/karolus"><span class="icon-twitter"> </span></a></span></a> <a href="https://instagram.com/karoluskaufmannis"><span class="icon-instagram"> </span></a></p>
						</div>
					</div>
					<div class="footer_lower">
						<p><a href="/" class="lower_icon_link"><img src="/themes/custom/kk_theme/images/KK_Logotype_Solid-Rev.svg" alt="KK Logotype"></a></p>
					</div> <!-- End Footer Lower -->
				<!-- End Content to Add -->
				</div> <!-- End block-standardfooter -->
			</div> <!-- End region region-footer -->
		</div> <!-- End cog--mq mq-footer -->
	</footer>
</div> <!-- End Footerwrapper -->

Source: sass/components/footer/_footer.scss, line 1

2.9 components.forbiddenpage Forbidden - 403

Custom Styling for 403/Access Denied Page

Example

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: sass/components/forbiddenpage/_forbiddenpage.scss, line 1

2.10 components.header Header Main Menu

Header menus styling for main nav

Example

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">Active Link</a></li>
      <li class="menu-item"><a href="/">Example Link</a></li>
      <li class="menu-item"><a href="/">Example Link</a></li>
      <li class="menu-item"><a href="/">Example Link</a></li>
    </ul>
  </nav>
</div>
</nav>
</div>

Source: sass/components/_header.scss, line 1

2.11 components.herobanner Hero Banner

Hero Banner Styling and Layout

Example

Demonstration Content TBA

Markup: components/herobanner/herobanner.twig

<h2>Demonstration Content TBA</h2>

Source: sass/components/herobanner/_herobanner.scss, line 1

2.12 components.homepage Home Page

Specific styling for homepage.

Example

Hello

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

Work

Writing

About

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: sass/components/homepage/_homepage.scss, line 1

2.13 components.mainimage Main Image

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: sass/components/mainimage/mainimage.scss, line 1

2.14 components.maintenancepage Maintenance Page

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

Example

Site Under Maintenance

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: sass/components/maintenancepage/_maintenancepage.scss, line 1

2.15 components.messages Messages

Styling for generated system messages.

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: sass/components/messages/_messages.scss, line 1

2.16 components.notfound Not Found - 404

Custom Styling for 404/Not Found Page

Example

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: sass/components/notfound/_notfound.scss, line 1

2.17 components.tabs Primary Tabs

Simple tabs styling.

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: sass/components/_tabs.scss, line 1

2.18 components.taxonomy Taxonomy

Displays of collected taxonomy content

Example

Taxonomy term definition.

Title of Content Item

Short, succint description to pique reader interest and give a clear synopsis of the long-form content.

Title of Content Item

Short, succint description to pique reader interest and give a clear synopsis of the long-form content.

Title of Content Item

Short, succint description to pique reader interest and give a clear synopsis of the long-form content.

Markup: components/taxonomy/taxonomy.twig

<div class="view-taxonomy-term">
	<div class="view-header">
		<p>{{ term_definition }}</p>
	</div>
	<div class="view-content">
		<div class="views-row">
			<header>
				<h2><a href="#">{{ item_title }}</a></h2>
			</header>
			<div class="content">
				{{ item_description }}
			</div>
		</div>
		<div class="views-row">
			<header>
				<h2><a href="#">{{ item_title }}</a></h2>
			</header>
			<div class="content">
				{{ item_description }}
			</div>
		</div>
		<div class="views-row">
			<header>
				<h2><a href="#">{{ item_title }}</a></h2>
			</header>
			<div class="content">
				{{ item_description }}
			</div>
		</div>
	</div>
</div>

Source: sass/components/taxonomy/_taxonomy.scss, line 1

2.19 components.technotes Tech Notes

Styling and layout for Tech Notes content type.

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: sass/components/technotes/_technotes.scss, line 1

2.20 components.termreference Term Reference

Layout and styling of taxonomy term references in organized content types

Example

Term Title

Term Reference One

Term Reference Two

Term Reference Three Really Long

Term Ref. Four

Term Reference Five

Term Reference Six

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: sass/components/termreference/_termreference.scss, line 1

2.21 components.unauthorizedpage Unauthorized - 401

Custom Styling for 401/Unauthorized Page

Example

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: sass/components/unauthorizedpage/_unauthorizedpage.scss, line 1

2.22 components.workdisplays Work Displays

Work Landing Page Layout and Components

Example

Demonstration Content TBA

Markup: components/workdisplays/workdisplays.twig

<div class="workdisplays"><h2>Demonstration Content TBA</h2></div>

Source: sass/components/workdisplays/_workdisplays.scss, line 1