hongc-cc

Productivity

• MonitorTool - Control external monitor brightness / sound
• Rectangle - Snap screen

Branding & Design System

Color Tool

• Colorbox - For generating color palette transit from one to another

hongc-cc

<form method="post" action="" id="login-form" accept-charset="UTF-8">
      <input type="hidden" name="action" value="users/login">
      <input type="hidden" name="redirect" value="{{redirect}}">
      
      <div class="form-group">
         <label for="email">Email</label>
         <input id="email" type="text" name="loginName" class="form-control">
      </div>

      

hongc-cc

// collect productIds in the cart
{% set currentDiscount = craft.commerce.getDiscountByCode(order.couponCode) %} 
{% if currentDiscount %}
{% if not cartProductIds in currentDiscount.productIds %}You have no products in the cart that meet this discount{% endif %}
{% endif %}

hongc-cc

{# scenario
variants -> similar variants by variant's category -> variants group by product's "device" category field
#}

{# Similar Variants with eager loading #}
{% set similarVariants = craft.commerce.variants({
	relatedTo: someElements,
	with: ['product.device', 'product.url']
}).find() %}
{% set similarVariantsByProduct = similarVariants | group('product.device | last ') %} 

hongc-cc

// Custom transform and opacity modifier for Stellar.js
$.stellar.positionProperty.transfade = {
  setPosition: function(element, newLeft, originalLeft, newTop, originalTop) {
    var distance = newTop - originalTop;
    var rate = $(window).height() / 5;
    element.css('transform', 'translate3d(0, ' + distance + 'px, 0').css('opacity', 1 - (distance / rate));
  }
};

$.stellar({

hongc-cc

$placeholder: $black;
$aspect-ratio: ( '16to9': 9/16, '4to3': 3/4, '3to2': 2/3, '2to3': 3/2, '3to4': 4/3, '9to16': 16/9 );
@include object(figure) {
  @include element(container) {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    
    // picturefill positioning

hongc-cc

1