Commit eea49fe6 authored by ludi's avatar ludi

testing a new patternlab project

parent 49654670
<?php
/**
* @param Twig_Environment $env - The Twig Environment - https://twig.symfony.com/api/1.x/Twig_Environment.html
* @param $config - Config of `@basalt/twig-renderer`
*/
function addCustomExtension(\Twig_Environment &$env, $config) {
/**
* @example `<h1>Hello {{ customTwigFunctionThatSaysWorld() }}!</h1>` => `<h1>Hello Custom World</h1>`
*/
// $env->addFunction(new \Twig_SimpleFunction('customTwigFunctionThatSaysWorld', function () {
// return 'Custom World';
// }));
/*
* Reverse a string
* @param string $theString
* @example `<p>{{ reverse('abc') }}</p>` => `<p>cba</p>`
*/
// $env->addFunction(new \Twig_SimpleFunction('reverse', function ($theString) {
// return strrev($theString);
// }));
// $env->addExtension(new \My\CustomExtension());
// `{{ foo }}` => `bar`
// $env->addGlobal('foo', 'bar');
// example of enabling the Twig debug mode extension (ex. {{ dump(my_variable) }} to check out the template's available data) -- comment out to disable
// $env->addExtension(new \Twig_Extension_Debug());
}
This diff is collapsed.
{
"name": "new-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "patternlab build --config ./patternlab-config.json",
"build:uikit": "npm run build --prefix node_modules/@pattern-lab/uikit-workshop -- --patternlabrc $INIT_CWD/.patternlabrc.js",
"help": "patternlab --help",
"install": "patternlab install --config ./patternlab-config.json",
"serve": "patternlab serve --config ./patternlab-config.json",
"start": "npm run serve",
"version": "patternlab --version"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@pattern-lab/cli": "^1.0.1",
"@pattern-lab/core": "^3.0.3",
"@pattern-lab/engine-twig-php": "^3.0.3",
"@pattern-lab/starterkit-twig-demo": "^4.1.1",
"@pattern-lab/uikit-workshop": "^1.0.4"
}
}
{
"cacheBust": true,
"cleanPublic": true,
"defaultPattern": "all",
"defaultShowPatternInfo": false,
"ishControlsHide": {
"s": false,
"m": false,
"l": false,
"full": false,
"random": false,
"disco": false,
"hay": true,
"mqs": false,
"find": false,
"views-all": false,
"views-annotations": false,
"views-code": false,
"views-new": false,
"tools-all": false,
"tools-docs": false
},
"ishViewportRange": {
"s": [
240,
500
],
"m": [
500,
800
],
"l": [
800,
2600
]
},
"logLevel": "info",
"outputFileSuffixes": {
"rendered": ".rendered",
"rawTemplate": "",
"markupOnly": ".markup-only"
},
"paths": {
"source": {
"root": "./source/",
"patterns": "./source/_patterns/",
"data": "./source/_data/",
"meta": "./source/_meta/",
"annotations": "./source/_annotations/",
"styleguide": "dist/",
"patternlabFiles": {
"general-header": "views/partials/general-header.mustache",
"general-footer": "views/partials/general-footer.mustache",
"patternSection": "views/partials/patternSection.mustache",
"patternSectionSubtype": "views/partials/patternSectionSubtype.mustache",
"viewall": "views/viewall.mustache"
},
"js": "./source/js",
"images": "./source/images",
"fonts": "./source/fonts",
"css": "./source/css"
},
"public": {
"root": "public/",
"patterns": "public/patterns/",
"data": "public/styleguide/data/",
"annotations": "public/annotations/",
"styleguide": "public/styleguide/",
"js": "public/js",
"images": "public/images",
"fonts": "public/fonts",
"css": "public/css"
}
},
"patternExtension": "twig",
"patternStateCascade": [
"inprogress",
"inreview",
"complete"
],
"patternExportDirectory": "./pattern_exports/",
"patternExportPatternPartials": [],
"serverOptions": {
"wait": 1000
},
"starterkitSubDir": "dist",
"styleGuideExcludes": [],
"theme": {
"color": "light",
"density": "compact",
"layout": "horizontal"
},
"uikits": [
{
"name": "uikit-workshop",
"outputDir": "",
"enabled": true,
"excludedPatternStates": [],
"excludedTags": []
}
],
"engines": {
"twig": {
"namespaces": [
{
"id": "atoms",
"recursive": true,
"paths": [
"source/_patterns/00-atoms"
]
},
{
"id": "molecules",
"recursive": true,
"paths": [
"source/_patterns/01-molecules"
]
},
{
"id": "organisms",
"recursive": true,
"paths": [
"source/_patterns/02-organisms"
]
},
{
"id": "templates",
"recursive": true,
"paths": [
"source/_patterns/03-templates"
]
},
{
"id": "pages",
"recursive": true,
"paths": [
"source/_patterns/04-pages"
]
},
{
"id": "macros",
"recursive": true,
"paths": [
"source/_macros"
]
}
],
"alterTwigEnv": [
{
"file": "alter-twig.php",
"functions": [
"addCustomExtension"
]
}
]
}
}
}
{
"comments" : [
{
"el": "header[role=banner]",
"title" : "Masthead",
"comment": "The main header of the site doesn't take up too much screen real estate in order to keep the focus on the core content. It's using a linear CSS gradient instead of a background image to give greater design flexibility and reduce HTTP requests."
}
]
}
{
"title" : "Pattern Lab",
"htmlClass": "pl",
"bodyClass": "body",
"img": {
"landscape_4x3": {
"src": "../../images/fpo_4x3.png",
"alt": "4x3 Image"
},
"landscape_16x9": {
"src": "../../images/fpo_16x9.png",
"alt": "16x9 Image"
},
"square": {
"src": "../../images/fpo_square.png",
"alt": "Square Thumbnail"
},
"avatar" : {
"src" : "../../images/fpo_avatar.png",
"alt" : "Person Name"
},
"rectangle": {
"src": "http://placeimg.com/400/300/tech",
"alt": "Rectangle"
}
},
"headline" : {
"short" : "Lorem ipsum dolor sit (37 characters)",
"medium" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)"
},
"excerpt" : {
"short" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
"medium" : "Lorem ipsum dolor sit amet, consectetur adipisicing 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.",
"long" : "Lorem ipsum dolor sit amet, consectetur adipisicing 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 velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
},
"description" : "So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.",
"url" : "#",
"name" : {
"first": "Lacy",
"firsti": "L",
"middle": "Tommie",
"middlei": "T",
"last": "Way",
"lasti": "W"
},
"year" : {
"long": "2013",
"short": "13"
},
"month" : {
"long": "February",
"short": "Feb",
"digit": "02"
},
"dayofweek" : {
"long": "Monday",
"short": "Mon"
},
"day" : {
"long": "10",
"short": "10",
"ordinal": "th"
},
"hour" : {
"long": "01",
"short": "1",
"military": "13",
"ampm": "pm"
},
"minute" : {
"long": "20",
"short": "20"
},
"seconds" : "31",
"author" : {
"first_name": "Author",
"last_name": "Name"
},
"hero": true,
"emergency" : false,
"touts" : [
{ },
{ },
{ }
],
"latest_posts" : [
{ },
{ },
{ },
{ },
{ }
]
}
This diff is collapsed.
keeping this directory
\ No newline at end of file
keeping this directory
\ No newline at end of file
{% macro input(name, type, classes, label, placeholder, value, size, required) %}
{% set show_label = label|default(true) %}
<div class="field-container {{ classes }}">
{% if show_label %}
<label class="{{ classes }}">{{ label|default(name|title) }}{% if required %}<abbr title="Required">*</abbr>{% endif %}
{% endif %}
<input type="{{ type|default('text') }}" name="{{ name }}" placeholder="{{ placeholder|default(name|title) }}" value="{{ value|e }}" size="{{ size|default(20) }}"{% if required %} required{% endif %} />
{% if show_label %}</label>{% endif %}
</div>
{% endmacro %}
{% macro textarea(label, placeholder, rows, classes) %}
{% set show_label = label|default(true) %}
<div class="field-container {{ classes }}">
{% if show_label %}
<label class="{{ classes }}">{{ label|default(name|title) }}{% if required %}<abbr title="Required">*</abbr>{% endif %}
{% endif %}
<textarea placeholder="{{ placeholder|default(name|title) }}" rows="{{ rows|default(8) }}"{% if required %} required{% endif %}></textarea>
{% if show_label %}</label>{% endif %}
</div>
{% endmacro %}
<!DOCTYPE html>
<html class="{{ htmlClass }}">
<head>
<title>{{ title }}</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="../../css/style.css?{{ cacheBuster }}" media="all" />
<link rel="stylesheet" href="../../css/pattern-scaffolding.css?{{ cacheBuster }}" media="all" />
<!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
{{{ patternLabHead }}}
<!-- End Pattern Lab -->
</head>
<body class="{{ bodyClass }}">
<!DOCTYPE html>
<html class="{{ htmlClass }}">
<head>
<title>{{ title }}</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="../../css/style.css?{{ cacheBuster }}" media="all" />
<link rel="stylesheet" href="../../css/pattern-scaffolding.css?{{ cacheBuster }}" media="all" />
<!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
{{ patternLabHead | raw }}
<!-- End Pattern Lab -->
</head>
<body class="{{ bodyClass }}">
<!--DO NOT REMOVE-->
{{{ patternLabFoot }}}
</body>
</html>
<!--DO NOT REMOVE-->
{{ patternLabFoot | raw }}
</body>
</html>
<ul class="sg-colors">
<li>
<span class="sg-swatch" style="background: #ff0000;"></span>
<span class="sg-label">#ff0000</span>
</li>
<li>
<span class="sg-swatch" style="background: #00ff00;"></span>
<span class="sg-label">#00ff00</span>
</li>
<li>
<span class="sg-swatch" style="background: #0000ff;"></span>
<span class="sg-label">#0000ff</span>
</li>
<li>
<span class="sg-swatch" style="background: #ffff00;"></span>
<span class="sg-label">#ffff00</span>
</li>
<li>
<span class="sg-swatch" style="background: #00ffff;"></span>
<span class="sg-label">#00ffff</span>
</li>
<li>
<span class="sg-swatch" style="background: #ff00ff;"></span>
<span class="sg-label">#ff00ff</span>
</li>
<li>
<span class="sg-swatch" style="background: #ffffff;"></span>
<span class="sg-label">#ffffff</span>
</li>
<li>
<span class="sg-swatch" style="background: #808080;"></span>
<span class="sg-label">#808080</span>
</li>
<li>
<span class="sg-swatch" style="background: #000000;"></span>
<span class="sg-label">#000000</span>
</li>
</ul>
\ No newline at end of file
<p>Primary font: "HelveticaNeue", "Helvetica", "Arial", sans-serif;</p>
<p><em>Primary font italic: "HelveticaNeue", "Helvetica", "Arial", sans-serif;</em></p>
<p><strong>Primary font bold: "HelveticaNeue", "Helvetica", "Arial", sans-serif;</strong></p>
<p class="font-secondary">Secondary font: Georgia, Times, "Times New Roman", serif;</p>
<p class="font-secondary"><em>Secondary font italic: Georgia, Times, "Times New Roman", serif;</em></p>
<p class="font-secondary"><strong>Secondary font bold; Georgia, Times, "Times New Roman", serif;</strong></p>
\ No newline at end of file
<div class="demo-animate animate-fade"><strong>Fade:</strong> Duration: 0.3s Easing: ease-out (Hover to see effect)</div>
<div class="demo-animate animate-move"><div class="demo-shape"></div><strong>Movement:</strong> Duration: 0.8s Easing: ease-in-out; (Hover to see effect)</div>
\ No newline at end of file
<p class="hide-small">This text is hidden on smaller screens</p>
<p class="hide-med hide-large"><em>This text is only visible on smaller screens</em></p>
<p class="hide-med">This text is hidden on medium screens only</p>
<p class="hide-small hide-large"><em>This text is only visible on medium screens</em></p>
<p class="hide-large">This text is hidden on large screens</p>
<p class="hide-small hide-med"><em>This text is only visible on large screens</em></p>
\ No newline at end of file
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
\ No newline at end of file
<p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
\ No newline at end of file
<blockquote>
<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.</p>
</blockquote>
\ No newline at end of file
<div class="text">
<p><a href="#">This is a text link</a>.</p>
<p><strong>Strong is used to indicate strong importance</strong>.</p>
<p><em>This text has added emphasis</em>.</p>
<p>The <b>b element</b> is stylistically different text from normal text, without any special importance.</p>
<p>The <i>i element</i> is text that is set off from the normal text.</p>
<p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation.</p>
<p><del>This text is deleted</del> and <ins>This text is inserted</ins>.</p>
<p><s>This text has a strikethrough</s>.</p>
<p>Superscript<sup>®</sup>.</p>
<p>Subscript for things like H<sub>2</sub>O.</p>
<p><small>This small text is small for for fine print, etc.</small>.</p>
<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr>.</p>
<p>Keyboard input: <kbd>Cmd</kbd>.</p>
<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q>.</p>
<p><cite>This is a citation</cite>
</p><p>The <dfn>dfn element</dfn> indicates a definition.</p>
<p>The <mark>mark element</mark> indicates a highlight.</p>
<p><code>This is what inline code looks like.</code></p>
<p><samp>This is sample output from a computer program</samp>.</p>
<p>The <var>variable element</var>, such as <var>x</var> = <var>y</var>.</p>
</div><!--end .text-->
<time datetime="2013-04-06T12:32+00:00">2 weeks ago</time>
\ No newline at end of file
<pre>
P R E F O R M A T T E D T E X T
! " # $ % &amp; ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
</pre>
\ No newline at end of file
<div class="text">
<ul>
<li>This is a list item in an unordered list</li>
<li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
<li>
Lists can be nested inside of each other
<ul>
<li>This is a nested list item</li>
<li>This is another nested list item in an unordered list</li>
</ul>
</li>
<li>This is the last list item</li>
</ul>
</div>
\ No newline at end of file
<div class="text">
<ol>
<li>This is a list item in an ordered list</li>
<li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
<li>
Lists can be nested inside of each other
<ol>
<li>This is a nested list item</li>
<li>This is another nested list item in an ordered list</li>
</ol>
</li>
<li>This is the last list item</li>
</ol>
</div>
\ No newline at end of file
<dl>
<dt>Definition List</dt>
<dd>A number of connected items or names written or printed consecutively, typically one below the other.</dd>
<dt>This is a term.</dt>
<dd>This is the definition of that term, which both live in a <code>dl</code>.</dd>
<dt>Here is another term.</dt>
<dd>And it gets a definition too, which is this line.</dd>
<dt>Here is term that shares a definition with the term below.</dt>
<dd>And it gets a definition too, which is this line.</dd>
</dl>
\ No newline at end of file
<a href="{{ link.pages-homepage }}"><img src="../../images/logo.png" class="logo" alt="Logo Alt Text" /></a>
\ No newline at end of file
<img src="{{ img.landscape_4x3.src }}" alt="{{ img.landscape_4x3.alt }}" />
\ No newline at end of file
<img src="{{ img.landscape_16x9.src }}" alt="{{ img.landscape_16x9.alt }}" />
\ No newline at end of file
<img src="{{ img.square.src }}" alt="{{ img.square.alt }}" />
\ No newline at end of file
<img src="{{img.avatar.src}}" alt="Avatar" />
\ No newline at end of file
<ul class="icons inline-list">
<li class="icon-twitter"></li>
<li class="icon-facebook"></li>
<li class="icon-stumbleupon"></li>
<li class="icon-linkedin"></li>
<li class="icon-pinterest"></li>
<li class="icon-google-plus"></li>
<li class="icon-youtube"></li>
<li class="icon-feed"></li>
<li class="icon-search"></li>
<li class="icon-play"></li>
</ul>
\ No newline at end of file
<img src="../../images/ajax-loader.gif" alt="Loading" />
\ No newline at end of file
<img src="../../images/favicon_32x32.jpg" />
\ No newline at end of file
{% import "@macros/forms.twig" as forms %}
<fieldset>
{{ forms.input('Text Input') }}
{{ forms.input('Password', 'password') }}
{{ forms.input('Web Address', 'url') }}
{{ forms.input('Email', 'email') }}
{{ forms.input('Search', 'search') }}
{{ forms.input('Number', 'number') }}
{{ forms.input('Number', 'number') }}
{{ forms.textarea('Textarea', 'Enter your message here') }}
{{ forms.input('Error Input', 'text', 'error') }}
{{ forms.input('Valid Input', 'text', 'valid') }}
</fieldset>
<fieldset>
<div class="field-container">
<label for="select">Select</label>
<select id="select">
<optgroup label="Option Group">