Craig Tommola craigtommola

## flexbox-grid-with-responsive-and-grow-effect.markdown

      
              3 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                craigtommola
                / flexbox-grid-with-responsive-and-grow-effect.markdown
            
            
              Created
              April 9, 2020 16:36
            
              
                Flexbox Grid with Responsive and Grow Effect
              
          
    Flexbox Grid with Responsive and Grow Effect

Create a responsive flex-grid with a grow effect with minimal media queries required. Read the full tutorial here: https://blog.fullstackdigital.com/how-to-create-a-flawless-responsive-post-grid-with-flexbox-e5c7cc9d28e
A Pen by Fullstack Digital on CodePen.
License.

  
## ImBeingStopped.rtf
Hey Siri “I’m Being Stopped”
Instructions to setup iOS Siri Shortcut

1.	Make sure your iPhone has the Shortcuts app installed
	⁃	https://apps.apple.com/us/app/shortcuts/id915249334
2.	Make sure the person you want to notify is saved as a contact on your phone, using their cell number, and they can receive MMS (i.e. video via text message)
3.	Open the Shortcuts app and tap “Create Shortcut”
4.	Tap the blue circle (with three dots) to the right of “New Shortcut” to rename the Shortcut to whatever you wish your Siri command to be. For this example, we’ll use “I’m being stopped”. Tap “Done”
5.	Our Message Action:
	⁃	Tap “Add Action”

## pre-expanded-accordion.js
$(function() {
	if(window.location.hash) {
		var target = $(window.location.hash);
		var accordion = $(target).parent().prev("dt");
		$(accordion).addClass("expanded");
		$(accordion).next("dd").slideDown();
		$('html, body').animate({scrollTop: target.offset().top - 200},
								500);
	}
});

## entry-header-snippet.php
<!-- /template-parts/header/entry-header.php
Create ACF field for posts with text field named Custom Byline / custom_byline
Replace entry-header.php:16 with the below code
 -->
	<?php if (get_field('custom_byline') === '') { twentynineteen_posted_by(); } else { $custom_author = get_field('custom_byline'); echo '<span class="byline">
	<svg class="svg-icon" width="16" height="16" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
		<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path>
		<path d="M0 0h24v24H0z" fill="none"></path>
	</svg>
	<span class="screen-reader-text">Authored by</span><span class="author vcard">'.$custom_author.'</span>

## conditionalOutputCSS.xsl
<!-- This is an example, based on the use of the Hope College "Expand All Accordions" Asset -->
<!-- The concept is "If the PCF file contains specific content, then output a link to CSS file on publish." -->

<!-- This is the asset content -->
<div class="expand-button-wrapper">
	<button id="expandAll" class="expand-all"><span class="expand-all-button-icon">&nbsp;</span> <span class="expand-button-text">Expand All</span></button>
</div>

<!-- Add to your /_resources/xsl/common.xsl or equivalent file, just before the closing </head> tag -->
<xsl:if test="/document/ouc:div[@label='maincontent']/descendant::button[@id='expandAll']”>

## radiohead-feed.xsl
	<xsl:template match="loadRadioheadFeed" name="loadRadioheadFeed">
		<xsl:variable name="feed-path"><xsl:text>/_showcase/craigdev/outc19demo/radiohead.xml</xsl:text></xsl:variable>
		<xsl:if test="unparsed-text-available(concat($domain, $feed-path))">
			<xsl:variable name="radioheadFeed" select="document(concat($domain, $feed-path))"/>
			<h2>Radiohead Discography</h2>
			<xsl:for-each select="$radioheadFeed/RADIOHEAD/ALBUM">
				<img class="album-art">
					<xsl:attribute name="src">
						<xsl:value-of select="ALBUM_ART/node()" />
					</xsl:attribute>

## nirvana-feed.xsl
<!-- I put this in my template-matches-outc.xsl file -->
<xsl:template name="loadNirvanaFeed">
	<xsl:variable name="feed-path" select="ouc:properties[@label='config']/parameter[@name='xml-feed']"/>
		<xsl:if test="unparsed-text-available(concat($domain, $feed-path))">
			<xsl:variable name="nirvanaFeed" select="document(concat($domain, $feed-path))"/>
			<h2>Ten Essential Nirvana Songs</h2>
			<xsl:for-each select="$nirvanaFeed/NIRVANA_TOP_TEN/TRACK">
				<h4><xsl:copy-of select="TRACK_NAME/node()" /></h4>
				<p><em><xsl:copy-of select="ALBUM_NAME/node()" /></em>, <xsl:copy-of select="ALBUM_YEAR/node()" /></p>
				<p><xsl:copy-of select="RRHOF_DESC/node()" /></p>

## beastie-boys.xml
<?xml version="1.0"?>
<BB_TOP_TEN>
<TRACK>
<TRACK_NAME>(You gotta) Fight for Your Right (to Party)</TRACK_NAME>
<ALBUM_NAME>License to Ill</ALBUM_NAME>
<ALBUM_YEAR>1986</ALBUM_YEAR>
<RRHOF_DESC>After years performing as a hardcore punk act, the Beastie Boys – ADROCK, MCA and Mike D – recast themselves as rap innovators. It was an especially unlikely move for three middle-class white kids from New York City, but it was a sonic shift that created a stir. Leading the charge was "(You Gotta) Fight For Your Right (To Party!)" from 1986's Licensed To Ill. Produced by friend and label head Rick Rubin, the song combined heavy metal swagger, rap brio and the Beastie Boys' ill-bred humor.</RRHOF_DESC>
</TRACK>
<TRACK>
<TRACK_NAME>Brass Monkey</TRACK_NAME>

## OU Publish Trigger
<parameter name="s-tag" prompt="Publish Trigger" type="filechooser" dependency="s-tag"> </parameter>

## config.xml
<?xml version="1.0" encoding="UTF-8" ?>
<config>
	<entry key="title">Page Accessibility</entry>
	<entry key="icon" private="true">page-accessibility-report.png</entry>
	<entry key="description">View page accessibility errors.</entry>
	<entry key="types" private="true">sidebar</entry>
	<entry key="initial_height" private="true">600</entry>
	<entry key="support_email" label="Support Email" overwritable="true">web@college.edu</entry>
</config>
	Hey Siri “I’m Being Stopped”
	Instructions to setup iOS Siri Shortcut

	1. Make sure your iPhone has the Shortcuts app installed
	⁃ https://apps.apple.com/us/app/shortcuts/id915249334
	2. Make sure the person you want to notify is saved as a contact on your phone, using their cell number, and they can receive MMS (i.e. video via text message)
	3. Open the Shortcuts app and tap “Create Shortcut”
	4. Tap the blue circle (with three dots) to the right of “New Shortcut” to rename the Shortcut to whatever you wish your Siri command to be. For this example, we’ll use “I’m being stopped”. Tap “Done”
	5. Our Message Action:
	⁃ Tap “Add Action”
	$(function() {
	if(window.location.hash) {
	var target = $(window.location.hash);
	var accordion = $(target).parent().prev("dt");
	$(accordion).addClass("expanded");
	$(accordion).next("dd").slideDown();
	$('html, body').animate({scrollTop: target.offset().top - 200},
	500);
	}
	});
	<!-- This is an example, based on the use of the Hope College "Expand All Accordions" Asset -->
	<!-- The concept is "If the PCF file contains specific content, then output a link to CSS file on publish." -->

	<!-- This is the asset content -->
	<div class="expand-button-wrapper">
	<button id="expandAll" class="expand-all"><span class="expand-all-button-icon"> </span> <span class="expand-button-text">Expand All</span></button>
	</div>

	<!-- Add to your /_resources/xsl/common.xsl or equivalent file, just before the closing </head> tag -->
	<xsl:if test="/document/ouc:div[@label='maincontent']/descendant::button[@id='expandAll']”>
	<xsl:template match="loadRadioheadFeed" name="loadRadioheadFeed">
	<xsl:variable name="feed-path"><xsl:text>/_showcase/craigdev/outc19demo/radiohead.xml</xsl:text></xsl:variable>
	<xsl:if test="unparsed-text-available(concat($domain, $feed-path))">
	<xsl:variable name="radioheadFeed" select="document(concat($domain, $feed-path))"/>
	<h2>Radiohead Discography</h2>
	<xsl:for-each select="$radioheadFeed/RADIOHEAD/ALBUM">
	<img class="album-art">
	<xsl:attribute name="src">
	<xsl:value-of select="ALBUM_ART/node()" />
	</xsl:attribute>
	<!-- I put this in my template-matches-outc.xsl file -->
	<xsl:template name="loadNirvanaFeed">
	<xsl:variable name="feed-path" select="ouc:properties[@label='config']/parameter[@name='xml-feed']"/>
	<xsl:if test="unparsed-text-available(concat($domain, $feed-path))">
	<xsl:variable name="nirvanaFeed" select="document(concat($domain, $feed-path))"/>
	<h2>Ten Essential Nirvana Songs</h2>
	<xsl:for-each select="$nirvanaFeed/NIRVANA_TOP_TEN/TRACK">
	<h4><xsl:copy-of select="TRACK_NAME/node()" /></h4>
	<p><em><xsl:copy-of select="ALBUM_NAME/node()" /></em>, <xsl:copy-of select="ALBUM_YEAR/node()" /></p>
	<p><xsl:copy-of select="RRHOF_DESC/node()" /></p>
	<?xml version="1.0"?>
	<BB_TOP_TEN>
	<TRACK>
	<TRACK_NAME>(You gotta) Fight for Your Right (to Party)</TRACK_NAME>
	<ALBUM_NAME>License to Ill</ALBUM_NAME>
	<ALBUM_YEAR>1986</ALBUM_YEAR>
	<RRHOF_DESC>After years performing as a hardcore punk act, the Beastie Boys – ADROCK, MCA and Mike D – recast themselves as rap innovators. It was an especially unlikely move for three middle-class white kids from New York City, but it was a sonic shift that created a stir. Leading the charge was "(You Gotta) Fight For Your Right (To Party!)" from 1986's Licensed To Ill. Produced by friend and label head Rick Rubin, the song combined heavy metal swagger, rap brio and the Beastie Boys' ill-bred humor.</RRHOF_DESC>
	</TRACK>
	<TRACK>
	<TRACK_NAME>Brass Monkey</TRACK_NAME>
	<?xml version="1.0" encoding="UTF-8" ?>
	<config>
	<entry key="title">Page Accessibility</entry>
	<entry key="icon" private="true">page-accessibility-report.png</entry>
	<entry key="description">View page accessibility errors.</entry>
	<entry key="types" private="true">sidebar</entry>
	<entry key="initial_height" private="true">600</entry>
	<entry key="support_email" label="Support Email" overwritable="true">web@college.edu</entry>
	</config>