jnowland

Templating in EE vs. Craft

Lots of people have asked, so here are a few common tasks you might do in your templates, as they would be written in ExpressionEngine vs. Craft.

Table of Contents

1. Comments
2. Conditionals
3. Loops

jnowland

var typkitID = 'XXXXXX';

CKEDITOR.on(
   'instanceReady',
   function(ev) {
      var $script = document.createElement('script'),
         $editor_instance = CKEDITOR.instances[ev.editor.name];

      $script.src = '//use.typekit.com/'+typkitID+'.js';
      $script.onload = function() {

jnowland

// Generated from spritesmith via gulp

$sprites: (
    arrow-right-blue-withShadow: (
        x: 0px,
        y: 114px,
        offset_x: 0px,
        offset_y: -114px,
        width: 13px,
        height: 19px,

jnowland

// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.18)
// ----

/* Note: The css selectors
The 'Grey' changes from UK to USA spelling
The Primary colours are all lowercae and not camelcase

This is because keys are don't have to be strings.

jnowland

Templating in EE vs. Craft

Lots of people have asked, so here are a few common tasks you might do in your templates, as they would be written in ExpressionEngine vs. Craft.

Table of Contents

1. Comments{{ cycle(['odd','even'], loop.index0 }}

2. Conditionals

jnowland

{# Open Search #}
<link rel="search" type="application/opensearchdescription+xml" href="/news/opensearch.xml" title="Search {{ siteName }}"/>

jnowland

<?php

return array(
    '*' => array(
        'tablePrefix' => 'craft',
    ),
    'dev' => array(
        'server' => 'localhost',
        'user' => 'root',
        'password' => '',

jnowland

Modernizr.addTest('retina', function(){
    if (window.matchMedia) {
        var mq = window.matchMedia("only screen and (-moz-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen  and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 1.3dppx)");
        if(mq && mq.matches) {
            return true;
        }
    }
});

jnowland

/*
Using silent class
*/
.Button, .Random {
  background: red;
}

div .Button {
  color: red;
}

jnowland

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----

/*
Using silent class
*/

%background {