Joseph Bergdoll josephbergdoll

Web fonts are pretty much all the rage. Using a CDN for font libraries, like TypeKit or Google Fonts, will be a great solution for many projects. For others, this is not an option. Especially when you are creating a custom icon library for your project.

Rails and the asset pipeline are great tools, but Rails has yet to get caught up in the custom web font craze.

As with all things Rails, there is more then one way to skin this cat. There is the recommended way, and then there are the other ways.

The recommended way

Here I will show how to update your Rails project so that you can use the asset pipeline appropriately and resource your files using the common Rails convention.

	@mixin reset-input {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	cursor: pointer;
	background: transparent;
	border: none;
	border-radius: 0;
	width: auto;

	// $property: the property of the element that you would like to scale/lock
	// $min-size: minimum element $property size in $unit specified
	// $max-size: maximum element $property size in $unit specified
	// $min-width: the screen width in $units where you want to lock in the $min-size
	// $max-width: the screen width in $units where you want to lock in the $max-size
	// $unit: the units which all measurements are taken in
	// $vunit: the viewport unit which all measurements are taken in

	@mixin css-lock($property: font-size, $min-size: 1, $max-size: 1.4, $min-width: 20, $max-width: 100, $unit: px, $vunit: vw) {
	#{$property}: calc(#{$min-size}#{$unit} + (#{$max-size} - #{$min-size}) * ((100#{$vunit} - #{$min-width}#{$unit}) / (#{$max-width} - #{$min-width})));

	<!--
	* Liquid Snippet for generating responsive image srcsets based on Shopify's native image transforms.
	* Published June 17, 2016 by Joseph Bergdoll
	* www.extendedplay.nyc
	*
	* Full list of Shopify's generated image transforms:
	* https://ecommerce.shopify.com/c/ecommerce-design/t/very-important-please-read-new-image-sizes-supported-up-to-2048x2048-for-retina-support-110766
	*
	* Simply include it within your image element, define the `image`, and the maximum size.
	* Product Images and Theme Asset Images should have either `product: 'true'` or `asset: 'true'` declared, respectively.

	<?php
	// LiveReload script injection for those using grunt-watch
	// This way you don't have to go to the localhost port
	// Call this function once in the <head> of your layout.twig via {{ liveReload }}
	// You can disable it by either removing or passing {{ liveReload(false) }}
	// Add the local domain you are developing from by passing it as the second argument:
	// {{ liveReload(true, 'example.dev') }}

	namespace Craft;

	<!--
	RESPONSIVE IMAGE SNIPPET
	Based on https://gist.github.com/zacwasielewski/6140785cf500d63fcb26
	Works with both product and blog images.

	I usually include this, like so for products:
	{% for image in product.images %}
	<img src="#" data-srcset="{% include 'responsive-image', image: image, product: 'true' %}">
	{% endfor %}

	<?php
	// What are orphans?
	// http://www.fonts.com/content/learning/fontology/level-2/text-typography/rags-widows-orphans
	function noOrphans($str) {
	$nbspStr = null;
	if (strpos($str, '<p>') !== false) {
	$paragraphs = explode('</p>', $str);
	foreach($paragraphs as &$paragraph) {
	$lastSpace = strrpos($paragraph, ' ');
	$nbspParagraph = substr_replace($paragraph, '<span class="nbsp"> </span>', $lastSpace, 1);

-// Disable <a> tags around images by default
-function no_imagelinks_content() {
-  $image_set = get_option( 'image_default_link_type' );
-  if ($image_set !== 'none') {
-    update_option('image_default_link_type', 'none');
-  }
-}
-add_action('admin_init', 'no_imagelinks_content', 10);

	// Assumes all of your images are wrapped in a container with the class .js-image-container
	// I use separate "js-" prepended classes so that way interactivity couplings are separate from
	// visual style changes. => https://coderwall.com/p/qktuzw/decouple-javascript-classes-from-css-ones-by-using-prefix
	//
	// this is written with the notion that you are using markup as follows:
	// <div class="img-container js-img-container">
	// <img src="../path/to/image.jpeg" data-width="[width of jpeg without px]" data-height="[height of jpeg without px]">
	// </div>

	// somewhere in your CSS, you want the following:

	@include transform\((.+?(?=\);))\);
	transform: ${1};