Skip to content

Instantly share code, notes, and snippets.

View jhogue's full-sized avatar

J. Hogue jhogue

View GitHub Profile
@jhogue
jhogue / cut-out-the-middle.php
Created November 22, 2016 20:54
Truncate a string, leave beginning and end, dot dot dot the middle
<?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 November 22, 2016 20:55
Responsive image Aspect Ratio with calc()
// 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 June 15, 2016 17:30
Calculate simple Type Scale using dependent calculations
// ----
// 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 November 2, 2015 03:23
Responsive Typography
/* 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 August 29, 2015 14:08
Generated by SassMeister.com.
<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 December 21, 2015 21:49
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
@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 December 13, 2012 20:34
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…
/* 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;