This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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>'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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 | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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; |