J. Hogue jhogue
-
Oomph, Inc.
- Providence RI
- Sign in to view email
- http://www.oomphinc.com
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>'; |
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 { |
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; |
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 | |
*/ |
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"> |
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; |
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; |