jenter

# {{PROJECTNAME}} is name of project with standard machine naming conventions (ie. no spaces or uppercase) 
> composer create-project --no-interaction acquia/blt-project {{PROJECTNAME}}
> cd {{PROJECTNAME}}
> composer run-script blt-alias
> source ~/.bash_profile
> composer require acquia/headless_lightning:~1.1.0
# Edit blt/project.yml and change the project:profile:name key to 'headless_lightning'
> blt vm
# You may need to update the 'php_version' to match your local environment in box/config.yml 
> blt setup

jenter

// @license http://opensource.org/licenses/MIT
// copyright Paul Irish 2015


// Date.now() is supported everywhere except IE8. For IE8 we use the Date.now polyfill
//   github.com/Financial-Times/polyfill-service/blob/master/polyfills/Date.now/polyfill.js
// as Safari 6 doesn't have support for NavigationTiming, we use a Date.now() timestamp for relative values

// if you want values similar to what you'd get with real perf.now, place this towards the head of the page
// but in reality, you're just getting the delta between now() calls, so it's not terribly important where it's placed

jenter

(function ($, Drupal, window, document) {
  'use strict';

  // Example of Drupal behavior loaded.
  Drupal.behaviors.exampleJS = {
    attach: function (context, settings) {

     console.log('This is loaded');
      
    }

jenter

(function ($, Drupal, window, document) {
  'use strict';

  // Example of Drupal behavior loaded.
  Drupal.behaviors.exampleJS = {
    attach: function (context, settings) {
      if (typeof context['location'] !== 'undefined') { // Only fire on document load.

        console.log('This is loaded');

jenter

/**
 * Implements hook_preprocess_html().
 */
function MYTHEME_preprocess_html(&$variables) {

  // Body classes for auth roles.
  if ($variables['logged_in']) {
    $user_roles = user_role_names(TRUE);
    foreach ($user_roles as $role => $title) {
      $variables['attributes']['class'][] = Html::cleanCssIdentifier('role--' . $role);

jenter

use Drupal\Component\Utility\Html;
use Drupal\Core\Render\Markup;
use Drupal\Core\Render\Element;

/**
 * Implements hook_preprocess_region().
 */
function MYTHEME_preprocess_region(&$variables) {
  $elements = $variables['elements'];
  $region_children = Element::children($elements);

jenter

{
  "code": 200,
  "status": "Ok",
  "copyright": "© 2015 MARVEL",
  "attributionText": "Data provided by Marvel. © 2015 MARVEL",
  "attributionHTML": "<a href=\"http://marvel.com\">Data provided by Marvel. © 2015 MARVEL</a>",
  "etag": "80b85e668fead143ff1a94d1d43e6e766724831c",
  "data": {
    "offset": 0,
    "limit": 20,

jenter

  <!-- This will need to be put into the destination html -->
  <div id="circles_container"> </div>

  <!-- This is the example markup from the polls -->
  <span class="fake_info">
    <span class="group">
      <span class="percentage">55</span>
      <span class="text">Dude?</span>
    </span>
    <span class="group">

jenter

Moving from jQuery

Events

// jQuery
$(document).ready(function() {
  // code
})

jenter

// previous used... 
font-family: "Nanum Gothic", Gulim, Dotum, Arial Unicode MS, serif;
 
// now used as a variable font stack  
$nanum-font: "Nanum Gothic", Gulim, Dotum, Arial Unicode MS, serif;
.something { font-family: $nanum-font; }