Skip to content

Instantly share code, notes, and snippets.

@jonesmac
jonesmac / config.json
Created September 11, 2015 14:20 — forked from anonymous/config.json
Bootstrap Customizer Config
{
"vars": {
"@gray-base": "#000",
"@gray-darker": "lighten(@gray-base, 13.5%)",
"@gray-dark": "lighten(@gray-base, 20%)",
"@gray": "lighten(@gray-base, 33.5%)",
"@gray-light": "lighten(@gray-base, 46.7%)",
"@gray-lighter": "lighten(@gray-base, 93.5%)",
"@brand-primary": "darken(#428bca, 6.5%)",
"@brand-success": "#5cb85c",
@jonesmac
jonesmac / gist:4747127
Created February 9, 2013 21:09
HTML: Horizontally Centered CSS
<div id="menu">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">This is long...</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">http://www.upshots.org/</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
@jonesmac
jonesmac / gist:4747137
Created February 9, 2013 21:10
CSS: Horizontally Centered Menu CSS
#menu {
float: right;
position: relative;
left: -50%;
}
#menu ul {
position: relative;
left: 50%;
}
#menu li {
@jonesmac
jonesmac / gist:4747144
Last active December 12, 2015 08:49
Javascript: Single Page Site Waypoint Script
<script type="text/javascript">
$(document).ready(function() {
// The same for all waypoints
$('body').delegate('section > div.page-section', 'waypoint.reached', function(event, direction) {
var $active = $(this);
if (direction === "up") {
$active = $active.prev();
}
@jonesmac
jonesmac / gist:4747169
Last active December 12, 2015 08:49
HTML: Single Page Site Waypoint Markup
<section id="main" class="nameof-page">
<nav id="page-menu-wrapper">
<ul id="page-menu">
<li><a href="#"></a></li>
<li><a href="#" class="last"></a></li>
</ul>
</nav>
<div id="sectionname" class="page-section">
@jonesmac
jonesmac / gist:4747173
Last active December 12, 2015 08:49
CSS: Single Page Site Waypoint CSS
.sticky nav {
position:fixed;
top:0;
left:0;
width:100%;
z-index: 999;
}
.sticky nav ul {
margin:0 auto;
@jonesmac
jonesmac / CSS: Tabs Basic CSS
Created March 2, 2013 19:40
Basic CSS for tabs through Jquerytools
/* root element for tabs */
ul.tabs {
list-style:none;
border-bottom:1px solid #666;
height:30px;
}
/* single tab */
ul.tabs li {
@jonesmac
jonesmac / HTML: Tabs Basic HTML
Created March 2, 2013 19:33
Basic HTML Structure for Jquerytools tabs
<!-- the tabs -->
<ul class="tabs">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<!-- tab "panes" -->
<div class="panes">
<div>First tab content. Tab contents are called "panes"</div>
@jonesmac
jonesmac / JS: Tabs Basic Script
Created March 2, 2013 19:33
Basic Script Call for Jquery Tools Tabs
$(function() {
// setup ul.tabs to work as tabs for each div directly under div.panes
$("ul.tabs").tabs("div.panes > div");
});
@jonesmac
jonesmac / mobileMenuTouchHelper.js
Created May 16, 2016 14:18
Touch Friendly Drop Down Menu
function mobileMenuTouchHelper () {
$(document).on('page:change', function () {
var topLevelMenuItems = $('.menu__list > a');
menuTouches(topLevelMenuItems);
$(window).on('orientationchange', function () {
unbindTouches(topLevelMenuItems);
menuTouches(topLevelMenuItems);
});
});
}