Jason Featheringham ⊙ω⊙ JawsomeJason

jQuery Edge-to-Edge Plugin

It finds the optimum font size to fit a certain container width. Coolest thing: It does this by shrinking/growing the font by half of the last attempt until it finds the sweet spot [ O(log n): 154px font = max 8 checks ]. There might be a slight visual offset between two headers one on top of the other. This is due to no checking on letter-spacing. That might incur a greater performance hit, as we'd be getting into floating-point pixels.

A Pen by Jason Featheringham on CodePen.

License.

	"use strict";

	/* boilerplate from: http://stefangabos.ro/jquery/jquery-plugin-boilerplate/ */
	( function( $ ) {


	$.fn.pluginName = function( method ) {

	var methods = {
	// constructor

	/**
	* @fileOverview Stores inline JS/CSS into localStorage
	* @author "Jason T. Featheringham" <[email protected]>
	* @requires this.localStorage,
	* this.document,
	* this.JSON,
	* this.document.querySelectorAll,
	*
	* How It Works:
	* On your server, when you want some content stored locally instead of retrieved from the server. An example using a script file (script.js), but any DOM element will work.

	// grid layout
	@include with-grid-settings( $columns: 12, $width: 58px, $gutter: 24px, $padding: 24px ) {
	.pdp {
	@include susy-grid-background;
	@include container;

	> .breadcrumbs {
	@include span-columns( 12 );
	}
	}

	/* Angular directive for enabling a expandable/collapsible hover dropdown menu
	* May seem like a lot of code just for a dropdown, but normally, dropdowns
	* don't play nice on touch devices, because onmouseleave is not fired unless
	* the user touches another element that is clickable or focusable, such as
	* a link. This ensures that any touch outside the menu will be considered
	* the same as a mouseleave
	*
	* example menu:
	* <nav>
	* <ul class="menu" x-jf-menu x-ng-onmouseenter="open()" x-ng-onmouseleave="close()">

	/* resets box-model reset */
	.pd-foo {
	margin: 0;
	padding: 0;
	border-width: 0;
	background-color: #ddd;
	margin-left: 1em;
	}

	.pd-bar {

	$colors: (
	abbey: #4c4f56,
	acadia: #1b1404,
	acapulco: #7cb0a1,
	aero-blue: #c9ffe5,
	affair: #714693,
	akaroa: #d4c4a8,
	alabaster: #fafafa,
	albescent-white: #f5e9d3,
	algae-green: #93dfb8,

	// handoff mixin variables for use inside content
	$batons: () !default;

	/// get the last set of variables handed-off
	/// @param $baton=() map of variables
	/// @example calling from inside a handoff-enabled mixin with content block
	/// @mixin foo($foo, $free) {
	///
	/// // send handoff right before `@content`
	/// @include handoff((

	/// Helper for EQCSS Element Queries `@element`
	///
	/// @author Jason Featheringham
	/// @link https://gist.github.com/thejase/d2107285b6e10315dd6bc055115647fe Code source
	/// @link http://elementqueries.com/ Plugin to parse EQCSS
	/// @link https://gist.github.com/tomhodgins/6237039fa07c2e4b7acd1c8b0f9549a9 EQCSS syntax
	///
	/// @param {String} $scope (&) - Optional scope. Defaults to current context
	/// @param {List} $conditions (()) - 1+ of Maps of EQCSS conditions
	/// @content rules to enclose in element query

	// options
	// identifier for theme CSS custom properties (e.g. --theme__prop--theme-name)
	$__theme-custom-property-prefix: theme !default;
	// enable/disable CSS4 var(--custom-property) declarations
	$__theme-enable-css-variables: true !default;
	// enable/disable compatibility for legacy browsers.
	// Warning: If enabled, cascade will not function, so you must inherit down
	// the chain or re-declare themes where needed
	$__theme-enable-decorator-fallbacks: true !default;