Skip to content

Instantly share code, notes, and snippets.

Working from home

William Dodson obxdesignworks

Working from home
View GitHub Profile
View Practical-Font-Sizing.markdown

Practical Font Sizing

A demo pen based on a blog post from Harry Roberts of CSS Wizardry about Practical Font Sizing.

A Pen by William Dodson on CodePen.


View _vertical-align.scss
* Vertically center anything via Z63:
* //////////////////////////////////////////////////
* Example:
* .element p {
* @include vertical-align;
* }
obxdesignworks /
Last active Jan 4, 2016
Git subtree instead of submodule
# Alternative to Git Submodules using Git Subtree:
# Remember to replace 'subtree-repo' with the repo name
# --prefix can be whatever you want to call your local copy
$ git remote add -f subtree-repo /path/to/subtree-repo
$ git merge --squash -s ours --no-commit subtree-repo/master
$ git read-tree --prefix=subtree-repo/ -u subtree-repo/master
$ git commit -m "Merge subtree-repo as a subtree."
# Then to update the external subtree repo:
$ git pull -s subtree subtree-repo master
obxdesignworks / _flash.scss
Last active Jan 4, 2016
Refactored _flash.scss mixin for Bitters to allow for customizable text darkening amounts on text and links
View _flash.scss
/* replaces /bitters/mixins/_flash.scss */
@mixin flash(
$darken-text-amount: 50,
$darken-link-text-amount: 60,
$darken-link-text-hover-amount: 70
) {
background: $color;
color: darken($color, $darken-text-amount);
font-weight: bold;
View wp-custom-query-pagination.php
* This module demonstrates pagination for a Custom Query in
* WordPress. It should work as a template in the default theme.
* Most of the formatting has been left out to make the core
* coding stand out.
* Author: Mac McDonald
* Contact using About->Contact Us at
obxdesignworks / placeholder.scss
Last active Dec 18, 2015
A Sass mixin to easily style placeholder text
View placeholder.scss
// placeholder styling (use: @include placeholder(#e5e5e5);)
@mixin placeholder($color){
&::-webkit-input-placeholder {
color: $color;
&:-moz-placeholder { /* Firefox < 18 */
color: $color;
opacity: 1;
&::-moz-placeholder { /* Firefox >= 19 */
obxdesignworks / functions.php
Last active Dec 12, 2015
My default functions.php for WordPress projects
View functions.php
// Get rid of those pesky HEAD links to prevent bots from sniffing for WP vulnerabilities (place in functions.php)
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
function remove_generator() {
return '';
add_filter('the_generator', 'remove_generator');
obxdesignworks / index.html
Created Aug 22, 2012
A pretty cool technique which allows to position elements side by side. Kind of absolute positioning but with rows which are aware of each other.
View index.html
<h1>Container-relative floats</h1>
<p><small>Forked from <a href="">this pen</a></small></p>
<p>The value of <code>margin-right: -100%</code> makes sure that every subsequent element starts right at the left edge of the container and isn't aware of its preceding sibling. This way the order of the elements within each row in the HTML code doesn't matter (try to move .item2 to the top or delete it). Furthermore you just need to assign <code>clear: left</code> to start a new row. Kind of absolute positioning but with rows which are aware of each other.</p>
<div class="wrapper">
<!-- first row -->
<div class="item item1">Element<br><br><br></div>
<div class="item item2">Element<br><br></div>