data-enhanced

Create list of tag names from classes

replacing "tag-tagname" with "tag name"

A Pen by David Cochran on CodePen.

License.

data-enhanced

<svg width="96" height="96">
  <image xlink:href="svg.svg" src="svg.png" width="96" height="96" />
</svg>

<!--

  by Alexey Ten
  http://lynn.ru/examples/svg/en.html
  
  Exploits the way browsers render the image tag. Widely supported, including all major browsers.

data-enhanced

<?php if ( !empty( $post->post_excerpt ) ) : // if the excerpt field is not empty
	the_excerpt(); // do the excerpt
else : // if the excerpt field is empty
	false; // no excerpt
endif; ?>

<!-- see: https://wordpress.org/support/topic/if-the_excerpt-is-blank -->

data-enhanced

<!--
* Basic structural tags for the body of an html5 document
* Based on HTML5 Bones http://html5bones.com/
-->

<header role="banner">
  <h1>Main Title</h1>
  <nav role="navigation">
    <ul>
      <li><a href="index.html">Home</a></li>

data-enhanced

// Box Shadows
// ------------------------

@box-shadow-lighter:   						0 0 2px hsla(0, 0%, 50%, 0.2);
@box-shadow-normal:								0 0 2px hsla(0, 0%, 50%, 0.3);
@box-shadow-darker:								0 0 2px hsla(0, 0%, 50%, 0.3);
@box-shadow-darkest:							0 0 2px hsla(0, 0%, 50%, 0.3);

// Down
@box-shadow-down-lighter: 				0 1px 1px hsla(0, 0%, 50%, 0.2);

data-enhanced

// Gradient Mixins
// ==============================

// HSLa Gradients
// Lays an HSLa alpha-transparency layer over top of any background color
// http://www.w3.org/TR/2003/CR-css3-color-20030514/#hsl-color
// http://css-tricks.com/yay-for-hsla/
// Be sure to use background-image NOT background,
//    to specify the gradient as the image ONLY, atop the underlying color
//

data-enhanced

// Social Icons with round backgrounds, using Font Awesome plus gradient and shadow variables I've setup and shared in other gists.

// Works with this markup:
<ul class="social">
  <li><a class="twitter" href="#" title="Twitter Profile"><i class="icon-twitter"></i></a></li>
  <li><a class="facebook" href="#" title="Facebook Page"><i class="icon-facebook"></i></a></li>
  <li><a class="linkedin" href="#" title="LinkedIn Profile"><i class="icon-linkedin"></i></a></li>
  <li><a class="googleplus" href="#" title="Google+ Profile"><i class="icon-google-plus"></i></a></li>
  <li><a class="github" href="#" title="GitHub Profile"><i class="icon-github-alt"></i></a></li>
</ul>

data-enhanced

  <aside class="related-stories">

    <h3>Related Stories</h3>
  <?php

    // wp_reset_query(); // running into strange problems
  	// remove_all_filters('posts_orderby'); // http://www.reinaris.nl/wp/wordpress-random-post-order-not-working-orderbyrand/
    // problem was that WP Engine dislikes random queries because it hits server hard
    // thus I decided to avoid random and chose another meaningful way of pulling related posts

data-enhanced

//
// Products Grid
// --------------------------------------------------

@media screen and (min-width: @tablet-min-width) {
  .products-grid {
		display: table;
		.product-item {
			display: inline-table;
			width: 46%;

data-enhanced

  .products-grid {
		display: table;
	}
	.product-item {
		display: inline-table;
		vertical-align: top; // needed by Safari
		width: 46%;
		margin-left: 2%;
	}