josephbergdoll

// Empty Global Styleguide (SG)

// Define ONLY type styles in the silent clases, that way they can be reused.
// Get specific with colors, alignment, etc, in the actual declarations below where these silent classes are extended.

a {
}

%sg-h1 {
}

josephbergdoll

// Aritst Card Hover Thumb Interval
  $('.artist-card.more-thumbs').each(function() {
    var
      thumb = '.image-thumb',
      $thumb = $(this).find('.image-thumb'),
      activeClass = 'thumb-active',
      activeSelector = '.thumb-active';
    $(this).mouseenter(function() {
      var $this = $(this);
      if ($this.find(activeSelector).next(thumb).length) {

josephbergdoll

// Breakpoints
$small: new-breakpoint(max-width 767px 6);
$medium-only: new-breakpoint(min-width 768px max-width 1023px 12);
$medium-up: new-breakpoint(min-width 768px 12);
$large-only: new-breakpoint(min-width 1024px max-width 1279px 12);
$large-up: new-breakpoint(min-width 1024px 12);
$xlarge-only: new-breakpoint(min-width 1280px max-width 1799px 12);
$xlarge-up: new-breakpoint(min-width 1280px 12);
$xxlarge: new-breakpoint(min-width 1800px 12);

josephbergdoll

// 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:

josephbergdoll

// 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:

josephbergdoll

// 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);

josephbergdoll

<?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">&nbsp;</span>', $lastSpace, 1);

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.

josephbergdoll

<!--
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 %}

josephbergdoll

<?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;