Skip to content

Instantly share code, notes, and snippets.

Avatar

David Cochran davidcochran

View GitHub Profile
@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 / mixins-multiple-transitions.less
Created Feb 25, 2013
LESS mixin to handle multiple CSS transitions together
View mixins-multiple-transitions.less
// Handling Multiple Transitions
// http://stackoverflow.com/questions/5510568/multiple-properties-are-getting-treated-as-separate-arguments-in-mixins
.bitbr-transition(@value1,@value2:X,...)
{
@value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
-webkit-transition: @value;
-moz-transition: @value;
-ms-transition: @value;
-o-transition: @value;
@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 / trello-user-css-safari.css
Last active Sep 12, 2019
Custom Trello Styles - in Mac Safari - using User CSS Extension
View trello-user-css-safari.css
/*
* Subtler, clearer colors and edges
* Emphsasize first two lists
* -- can be modified in CSS to include fewer or more lists
*/
* {
border-radius: 0 !important;
}
@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%;
}
@davidcochran
davidcochran / hide-mobile-safari-chrome.js
Created Jul 14, 2013
Quick fix to hide browser address bar in mobile safari -- Credit David Walsh -- http://davidwalsh.name/hide-address-bar
View hide-mobile-safari-chrome.js
// Credit David Walsh
// http://davidwalsh.name/hide-address-bar
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});
You can’t perform that action at this time.