leolll

<label for="password">Plan</label>
<input name="plan" type="radio" id="pro" value="pro" x-bind:class="{'invalid':plan.errorMessage}" data-rules='["requiredChoice:plan"]' data-server-errors='[]'>
<input name="plan" type="radio" id="basic" value="basic" x-bind:class="{'invalid':plan.errorMessage}" data-rules='["requiredChoice:plan"]' data-server-errors='[]'>
<p class="error-message" x-show.transition.in="plan.errorMessage" x-text="plan.errorMessage"></p>

kevinweber

<alignment jcr:primaryType="nt:unstructured"
    name="./alignChildren"
    fieldLabel="Alignment of components"
    required="{Boolean}true"
    selectionMode="single"
    sling:resourceType="granite/ui/components/coral/foundation/form/buttongroup">

    <items jcr:primaryType="nt:unstructured">
        <default jcr:primaryType="nt:unstructured"
            name="./default"

wojteklu

Code is clean if it can be understood easily – by everyone on the team. Clean code can be read and enhanced by a developer other than its original author. With understandability comes readability, changeability, extensibility and maintainability.

---

General rules

1. Follow standard conventions.
2. Keep it simple stupid. Simpler is always better. Reduce complexity as much as possible.
3. Boy scout rule. Leave the campground cleaner than you found it.
4. Always find root cause. Always look for the root cause of a problem.

Design rules

vidaaudrey

IE6 Only
==================
_selector {...}

IE6 & IE7
==================
*html or { _property: }

IE7 Only
==================

besimhu

/**
* Pull Featured Image
*
* This method only pulls the featured image.
*
* the_post_thumbnail( $size, $attr );
* http://codex.wordpress.org/Function_Reference/the_post_thumbnail
*/

<?php

besimhu

/**
* Generate image markup through WP function.
*
* Requires ACF setting of ID.
* The crop can be custom, or one of WP default ones, or leave empty.
*
* This method does not work great with Media Query Sync. However, this method
* allows you to define custom settings, and the width, height, and alt tags will
* be auto generated for you. Which is great for semantics.
*

besimhu

// Markup
<img src="<?php echo $src; ?>" 
     alt="<?php echo $alt; ?>" 
     width="<?php echo $width; ?>" 
     height="<?php echo $height; ?>" /> 

besimhu

// Markup Sample
<img src="<?php echo $image[0]; ?>" 
     width="<?php echo $image[1]; ?>" 
     height="<?php echo $image[2]; ?>"
     alt="<?php echo $image_alt; ?>" />

// Markup Sample (Media Query Sync)
<figure>
  <img class="responsive"
       src="<?php echo $media_sml[0]; ?>"

besimhu

$brand_colors: (
  purple $color-purple,
  maroon $color-maroon,
  orange $color-orange,
  yellow $color-yellow,
);

.brand-color-bg {
  @each $color in $brand_colors {
    &.#{nth($color, 1)} {

besimhu

module.exports = function() {

  var $menu_trigger = $header.find('.menu-trigger');

  // Trigger mobile navigation
  $menu_trigger.on('click touch', function(e) {
    $('body').toggleClass('nav-open');
    e.preventDefault();
  });