Skip to content

Instantly share code, notes, and snippets.

J. Hogue jhogue

Block or report user

Report or block jhogue

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@jhogue
jhogue / cut-out-the-middle.php
Created Nov 22, 2016
Truncate a string, leave beginning and end, dot dot dot the middle
View cut-out-the-middle.php
<?php
$content = "A long string of text with an important word at the end";
$posfront = strpos($content, ' ', 10);
$first = substr($content, 0, $posfront);
$posend = strrpos($content, ' ', -10);
$last = substr($content, $posend);
//echo $posfront . '<br>';
//echo $first . '<br>';
@jhogue
jhogue / fluid-aspect-ratio.scss
Last active Nov 22, 2016
Responsive image Aspect Ratio with calc()
View fluid-aspect-ratio.scss
// Intent:
// Create a calc() function that dynamically changes the padding-bottom
// value for a container than wraps an image to force an aspect ratio.
// For small viewports, the padding bottom value is 56.25% for a 16:9 ratio
// For larger, it goes down to 25% for a really wide, thin image
// This is the way I do it now:
@mixin maintain-ratio($ratio: 1 1) {
@if length($ratio) < 2 or length($ratio) > 2 {
@jhogue
jhogue / SassMeister-input.scss
Last active Jun 15, 2016
Calculate simple Type Scale using dependent calculations
View SassMeister-input.scss
// ----
// libsass (v3.3.2)
// ----
$base-font-size: 16px;
$line-height-ratio: 1.5;
$fontsize-ratio: 1.15;
$micro: floor($base-font-size/$fontsize-ratio);
$para: $base-font-size;
@jhogue
jhogue / gist:53967147ed89778c713d
Last active Nov 2, 2015
Responsive Typography
View gist:53967147ed89778c713d
/* The idea:
One list of breakpoints.
One list of type sizes/scales with a corresponding key name.
One function that can iterate and output all type sizes.
One function that can iterate over the breakpoints, find the
matching type size array, and output all breakpoint sizes for that element.
Try this in Sassmeister to see the results
*/
@jhogue
jhogue / SassMeister-input-HTML.html
Last active Aug 29, 2015
Generated by SassMeister.com.
View SassMeister-input-HTML.html
<div class="widget">
<h3 class="widget--title">Archives by Date</h3>
<ul class="widget--list">
<li><a class="widget--link" href="#">October 2014</a></li>
<li><a class="widget--link widget--link__selected" href="#">July 2014</a></li>
</ul>
</div>
<div class="widget widget__alt">
<h3 class="widget--title">Archives by Date Alt</h3>
<ul class="widget--list">
@jhogue
jhogue / gist:6370800
Last active Dec 21, 2015
Diagnostic CSS rules for finding poorly formed, non-semantic, inaccessible markup on links and buttons, mostly. For more diagnostics, check out http://www.tomato-root.com/sandbox/holmes/ and https://github.com/diagnosticss/diagnosticss
View gist:6370800
@mixin heydon_rules {
// Adapted from http://coding.smashingmagazine.com/2013/08/20/semantic-css-with-intelligent-selectors/
// I removed the Comic Sans font declaration because, well, I really can't stand it, even in this context
%uglystyle {
display: block !important;
background: pink !important;
padding: 0.5em !important;
color: #000 !important;
@jhogue
jhogue / SASS font-size-adjust
Created Dec 13, 2012
A SASS function to emulate what font-size-adjust is meant to do. Until it is widely supported, we can use a combination of math and Modernizr to meet the needs. ¶ The value for $font-size-adjust-value in this function is not calculated in the same way as a value for font-size-adjust. In my real-world example, font-size-adjust: .465; would be the…
View SASS font-size-adjust
/* Not widely supported, can't use this yet */
@mixin font-size-adjust {
-webkit-font-size-adjust: 0.465; /* No support yet */
font-size-adjust: 0.465; /* Firefox only */
}
/* Define these somewhere if you aren't already */
$font-size-adjust-value: 1.15;
$base-font-size: 16px;
You can’t perform that action at this time.