wesruv

$ npm test pfe-icon -- -p

> @patternfly/patternfly-elements@ test /home/wruvalca/dev/pfe/patternfly-elements-clone
> node scripts/test.js "pfe-icon" "-p"


> @patternfly/patternfly-elements@ prebuild /home/wruvalca/dev/pfe/patternfly-elements-clone
> npm run doc-listing-inject

wesruv

# Under Global

follow symlinks = yes
wide links = yes
unix extensions = no

# At the bottom

[USERNAME]
path = /home/USERNAME

wesruv

// Kyle says you don't need to what was here.

wesruv

body {
  font: 400 1.125rem/1.3 'Titillium Web', Arial, sans-serif;
  background: #888;
  margin: 0;
  padding: 0;
}

p {
  line-height: 1.5;
}

wesruv

D8 and D7 template file syntax

Below are examples of basic structures you need in templating shown in Twig (Drupal 8) and PHPTemplate (Drupal 7).

Code Comments

{# My code comment, won't appear in the HTML #}

<?php // My code comment, won't appear in the HTML ?>

wesruv

<?php
// Code that accesses entity data for a template with lots of good examples of how to get information


/**
 * Implements hook_preprocess_HOOK() for Paragraph templates.
 */
function THEMENAME_preprocess_paragraph(&$variables) {
  $paragraphy_type = $variables['paragraph']->getType();

wesruv

/**
 * Optimized scroll handler
 * @see https://developer.mozilla.org/en-US/docs/Web/Events/resize#requestAnimationFrame
 *
 * @example
 *     scroll.add(() => console.log('Resource conscious scroll callback!'));
 */
// eslint-disable-next-line no-unused-vars
export const scroll = (function() {
  let callbacks = [],

wesruv

// Defined globally in my project
$gutter: 18px;

/// Returns a CSS value to imitate a grid item when column widths are fluid with gutters are static
/// Is written to optimize CSS output, so Scss has to be a bit verbose
/// @require $gutter
///
/// @param {number} $column-span How many columns wide element should be
/// @param {number} $total-columns How many total columns are available
/// @param {number} $total What is the total width, will typically be 100%, but could be grid's max-width

wesruv

Scss Style Guide Starter

Special thanks to Carwin Young (Github @carwin) whose docs this is based on

This is a guide for formatting Sass stylesheets, it's goals are:

• To encourage consistency between developers in a repository.
• Styles applying to an element should be in one place
• Code should be easily find-able and legible by humans
• Classes are mostly explicitly named (pointing to specific elements, not functionality)

wesruv

---
layout: _includes/layout-basic.njk
title: Collapsible Box
tags:
  - component
  - component_medium
contentTitle: Collapsible Box
content: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate veli esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
---