Skip to content

Instantly share code, notes, and snippets.

Avatar

David Cochran davidcochran

View GitHub Profile
View Create-list-of-tag-names-from-classes.markdown
@davidcochran
davidcochran / gist:a2f804576dbc253700fb
Created Sep 29, 2014
SVG with PNG fallback -- from Alexey Ten and CSS Tricks
View gist:a2f804576dbc253700fb
<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.
@davidcochran
davidcochran / gist:3a7c980bec460c8139a2
Created Jun 9, 2015
WP Post Excerpt -- only if an excerpt is entered
View gist:3a7c980bec460c8139a2
<?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 -->
@davidcochran
davidcochran / html5-body-structure.html
Last active Dec 14, 2015
Basic structural tags for the body of an html5 document Includes the new <main> tag! Based on HTML5 Bones http://html5bones.com/
View html5-body-structure.html
<!--
* 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>
@davidcochran
davidcochran / shadows.less
Last active Dec 14, 2015
Box and Text-Shadow -- Some Favorite LESS Variables
View shadows.less
// 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);
@davidcochran
davidcochran / mixins-gradients-hsla.less
Created Feb 25, 2013
Uses HSLa background-image to place a semi-transparent gradient over the top of any background color.
View mixins-gradients-hsla.less
// 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
//
@davidcochran
davidcochran / social-icons.less
Created Feb 26, 2013
Markup and LESS styles for social icons with round backgrounds, using Font Awesome plus gradient and shadow variables I've setup and shared in other gists.
View social-icons.less
// 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>
@davidcochran
davidcochran / wp-related-stories.php
Created Feb 28, 2013
WP Query Related Posts - Custom Post Type
View wp-related-stories.php
@davidcochran
davidcochran / grid-inline-table.less
Created May 2, 2013
LESS to display a products grid that can dynamically adjust the number of products per row, while keeping each row the height of the tallest product div. Using CSS 2 display: inline-table. Compatible with IE8 and better browsers.
View grid-inline-table.less
//
// Products Grid
// --------------------------------------------------
@media screen and (min-width: @tablet-min-width) {
.products-grid {
display: table;
.product-item {
display: inline-table;
width: 46%;
@davidcochran
davidcochran / inline-table.css
Created May 15, 2013
Grid of items using inline-table to handle items of various heights by keeping each row the height of the tallest item
View inline-table.css
.products-grid {
display: table;
}
.product-item {
display: inline-table;
vertical-align: top; // needed by Safari
width: 46%;
margin-left: 2%;
}
You can’t perform that action at this time.