Commit 8167d71a authored by alexandre's avatar alexandre

Moving existing pl sources to the new pl project

parent eea49fe6
......@@ -2,92 +2,17 @@
"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" : [
{ },
{ },
{ },
{ },
{ }
]
"routes": {
"homepage": "link.pages-homepage",
"login": "link.pages-login",
"padCreate": "link.pages-pad_create",
"padDelete": "link.pages-pad_delete",
"padManage": "link.pages-pad_manage",
"padPrint": "link.pages-pad_print",
"padPublish": "link.pages-pad_publish",
"padRead": "link.pages-pad_read",
"padRename": "link.pages-pad_rename",
"padSlide": "link.pages-pad_slide",
"padWrite": "link.pages-pad_write"
}
}
This diff is collapsed.
......@@ -5,6 +5,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="../../css/reset.css" media="all" />
<link rel="stylesheet" href="../../css/style.css?{{ cacheBuster }}" media="all" />
<link rel="stylesheet" href="../../css/pattern-scaffolding.css?{{ cacheBuster }}" media="all" />
......
<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">
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</optgroup>
</select>
</div>
</fieldset>
\ No newline at end of file
<form action="#">
<fieldset class="options">
<legend>Checkbox <abbr title="Required">*</abbr></legend>
<ul>
<li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
<li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
<li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
</ul>
</fieldset>
</form>
\ No newline at end of file
<form action="#">
<fieldset class="options">
<legend>Radio</legend>
<ul>
<li><label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label></li>
<li><label for="radio2"><input id="radio2" name="radio" type="radio" class="radio"> Option 2</label></li>
<li><label for="radio3"><input id="radio3" name="radio" type="radio" class="radio"> Option 3</label></li>
</ul>
</fieldset>
</form>
\ No newline at end of file
<fieldset>
<div class="field-container"><label for="ic">Color input</label> <input type="color" id="ic" value="#000000"></div>
<div class="field-container"><label for="in">Number input</label> <input type="number" id="in" min="0" max="10" value="5"></div>
<div class="field-container"><label for="ir">Range input</label> <input type="range" id="ir" value="10"></div>
<div class="field-container"><label for="idd">Date input</label> <input type="date" id="idd" value="1970-01-01"></div>
<div class="field-container"><label for="idm">Month input</label> <input type="month" id="idm" value="1970-01"></div>
<div class="field-container"><label for="idw">Week input</label> <input type="week" id="idw" value="1970-W01"></div>
<div class="field-container"><label for="idt">Datetime input</label> <input type="datetime" id="idt" value="1970-01-01T00:00:00Z"></div>
<div class="field-container"><label for="idtl">Datetime-local input</label> <input type="datetime-local" id="idtl" value="1970-01-01T00:00"></div>
</fieldset>
\ No newline at end of file
<p><a href="#" class="btn">Button</a></p>
<p><a href="#" class="btn alt">Alternate Button</a></p>
<p><a href="#" class="btn disabled">Disabled Button</a></p>
<p><a href="#" class="text-btn">Text Button</a></p>
\ No newline at end of file
<table>
<thead>
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
<th>Table Heading 3</th>
<th>Table Heading 4</th>
<th>Table Heading 5</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Table Footer 1</th>
<th>Table Footer 2</th>
<th>Table Footer 3</th>
<th>Table Footer 4</th>
<th>Table Footer 5</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
</tbody>
</table>
\ No newline at end of file
<video width="640" height="360" controls="">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
<source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm">
<source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg">
<img src="" width="640" height="360" alt="Big Buck Bunny" title="No video playback capabilities, please download">
</video>
\ No newline at end of file
<audio controls="controls">
<source src="#" />
<source src="#" />
</audio>
\ No newline at end of file
<div class="byline">by {{ author.first_name }} {{ author.last_name }}</div>
<div class="vcard">
<div class="org">Company Name</div>
<div class="adr">
<div class="street-address">1234 Main St.</div>
<span class="locality">Anywhere</span>,
<span class="postal-code">101010</span>,
<abbr class="region" title="California">CA</abbr>
<div class="country-name">U.S.A</div>
</div>
<div class="tel">+1.888.123.4567</div>
</div>
\ No newline at end of file
<div class="hgroup">
<h2>This is the heading group's main heading</h2>
<h3>This is the heading group's subheading</h3>
</div>
\ 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>
<cite class="citation">Quote Source</cite>
</blockquote>
\ No newline at end of file
<p class="intro">The intro text may be a lead-in to the passage of text, or it may just be used to create a visual distinction between the rest of the passage of text.</p>
\ No newline at end of file
<div class="demo">
<!--Grid 1up-->
<div class="g g-1up">
<div class="gi">1/1</div>
</div>
<!--End Grid 1up-->
</div><!--end .demo-->
\ No newline at end of file
<div class="demo">
<!--Grid 2up-->
<div class="g g-2up">
<div class="gi">1/2</div>
<div class="gi">1/2</div>
</div>
</div>
\ No newline at end of file
<div class="demo">
<!--Grid 3up-->
<div class="g g-3up">
<div class="gi">1/3</div>
<div class="gi">1/3</div>
<div class="gi">1/3</div>
</div>
</div>
\ No newline at end of file
<div class="demo">
<!--Grid 4up-->
<div class="g g-4up">
<div class="gi">1/4</div>
<div class="gi">1/4</div>
<div class="gi">1/4</div>
<div class="gi">1/4</div>
</div>
</div>
\ No newline at end of file
<div class="block block-thumb">
<a href="{{ url }}" class="b-inner">
<div class="b-thumb">
{% include "@atoms/04-images/03-square.twig" %}
</div>
<div class="b-text">
<h2 class="b-title">{{ headline.short }}</h2>
<p>{{ excerpt.medium }}</p>
</div>
</a>
</div>
<div class="block block-headline">
<a href="{{ url }}" class="b-inner">
<h2 class="b-title">{{ headline.short }}</h2>
<p class="b-timestamp"></p>
</a>
</div>
\ No newline at end of file
<div class="block block-hero">
<a href="{{ url }}" class="b-inner">
<div class="b-thumb">
{% include "@atoms/04-images/02-landscape-16x9.twig" %}
</div>
<div class="b-text">
<h2 class="b-title">{{ headline.medium }}</h2>
</div>
</a>
</div>
<div class="block block-thumb">
<a href="{{ url }}" class="b-inner">
<div class="b-thumb">
{% include "@atoms/04-images/03-square.twig" %}
</div>
<div class="b-text">
<h2 class="b-title">{{ title }}</h2>
</div>
</a>
</div>
<div class="block block-headline">
<a href="{{ url }}">
<h2 class="headline">Headline: Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
</a>
</div>
\ No newline at end of file
<div class="block block-inset">
<a href="{{ url }}" class="inner">
<div class="b-thumb">
{% include "@atoms/04-images/01-landscape-4x3.twig" %}
</div>
<div class="b-text">
<h2 class="headline">{{ headline.short }}</h2>
</div>
</a>
</div>
<figure>
{% include "@atoms/04-images/01-landscape-4x3.twig" %}
<figcaption>This is an example of an image with a caption. Photo captions, also known as cutlines, are a few lines of text used to explain or elaborate on published photographs.</figcaption>
</figure>
<form action="{{ url }}" method="post" class="inline-form search-form">
<fieldset>
<legend class="is-vishidden">Search</legend>
<label for="search-field" class="is-vishidden">Search</label>
<input type="search" placeholder="Search" id="search-field" class="search-field" />
<button class="search-submit">
<span class="icon-search" aria-hidden="true"></span>
<span class="is-vishidden">Search</span>
</button>
</fieldset>
</form>
\ No newline at end of file
<form method="post" action="{{ url }}" class="comment-form">
<fieldset>
<div class="field-container">
<label for="comment-name">Name</label>
<input id="comment-name" type="text" placeholder="Enter Your Name" />
</div>
<div class="field-container">
<label for="comment-email">Email</label>
<input id="comment-email" type="email" placeholder="Your email address" />
</div>
<div class="field-container">
<label for="comment-url">URL</label>
<input id="comment-url" type="url" placeholder="Website if you got one" />
</div>
<div class="field-container">