mirror_php/patternlab-php
1
0
Fork 0
mirror of https://github.com/pattern-lab/patternlab-php.git synced 2025-01-17 06:08:23 +01:00
Code Issues Releases Wiki Activity

Added molecules: text, blocks, media, navigation

Browse Source
This commit is contained in:
Brad Frost 2013-06-23 18:53:33 -04:00
parent 50cfbb81ce
commit 079cf0f4ff
27 changed files with 134 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
source/patterns/a-text-emphasis-colors/a-text-emphasis-colors.mustache Normal file
View File

@ -0,0 +1,4 @@
<p class="error">This is what error text looks like</p>
<p class="valid">This is what valid text looks like</p>
<p class="warning">This is what warning text looks like</p>
<p class="information">This is what information text looks like.</p>

2
source/patterns/m-blocks-block-hero/data.json
View File

@ -1,4 +1,4 @@
{
"href": "#",
"headline": "'Walking Dead' finale: Best ratings yet"
"headline": "Headline Text Lorem Ipsum Dolar Samet"
}

6
source/patterns/m-blocks-headline-byline/m-blocks-headline-byline.mustache Normal file
View File

@ -0,0 +1,6 @@
<div class="block block-headline">
<a href="#">
<h2 class="headline">Headline: Lorem Ipsum Dolor Amet Sit</h2>
{{> a-text-time }}
</a>
</div>

5
source/patterns/m-blocks-headline-only/m-blocks-headline-only.mustache Normal file
View File

@ -0,0 +1,5 @@
<div class="block block-headline">
<a href="#">
<h2 class="headline">Headline: Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
</a>
</div>

10
source/patterns/m-blocks-inset-block/m-blocks-inset-block.mustache Normal file
View File

@ -0,0 +1,10 @@
<div class="block block-inset">
<a href="#" class="inner">
<div class="b-thumb">
{{> a-images-landscape-4x3 }}
</div>
<div class="b-text">
<h2 class="headline">Headline: Lorem ipsum dolor sit amet, consectetur adipisicing</h2>
</div>
</a>
</div>

0
source/patterns/m-blocks-block-thumb-headline/m-blocks-block-thumb-headline.mustache → source/patterns/m-blocks-media-block/m-blocks-media-block.mustache
View File

10
source/patterns/m-forms-newsletter/m-forms-newsletter.mustache Normal file
View File

@ -0,0 +1,10 @@
<form action="#" method="post" class="inline-form newsletter-form">
<fieldset>
<legend>Sign up for our newsletter</legend>
<label for="newsletter-scope">Sign up for our newsletter</label>
<div class="inline-container">
<input type="newsletter" placeholder="E-mail address" id="newsletter-field" class="newsletter-field" />
<button class="newsletter-submit">Sign Me Up</button>
</div>
</fieldset>
</form>

4
source/patterns/m-forms-search/m-forms-search.mustache
View File

@ -1,8 +1,8 @@
<form action="#" method="post" class="inline-form search-form">
<fieldset>
<legend>Search</legend>
<legend class="is-vishidden">Search</legend>
<label for="search-field" class="is-vishidden">Search</label>
<input type="search" placeholder="Search Pattern Lab" id="search-field" class="search-field" />
<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>

7
source/patterns/m-layout-1-up/m-layout-1-up.mustache Normal file
View File

@ -0,0 +1,7 @@
<div class="demo">
<!--Grid 1up-->
<div class="g g-1up">
<div class="gi">1/1</div>
</div>
<!--End Grid 1up-->
</div><!--end .demo-->

7
source/patterns/m-layout-2-up/m-layout-2-up.mustache Normal file
View File

@ -0,0 +1,7 @@
<div class="demo">
<!--Grid 2up-->
<div class="g g-2up">
<div class="gi">1/2</div>
<div class="gi">1/2</div>
</div>
</div>

8
source/patterns/m-layout-3-up/m-layout-3-up.mustache Normal file
View File

@ -0,0 +1,8 @@
<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>

9
source/patterns/m-layout-4-up/m-layout-4-up.mustache Normal file
View File

@ -0,0 +1,9 @@
<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>

4
source/patterns/m-media-figure-with-caption/m-media-figure-with-caption.mustache Normal file
View File

@ -0,0 +1,4 @@
<figure>
<?php inc('atom','landscape') ?>
<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>

1
source/patterns/m-media-map/m-media-map.mustache Normal file
View File

@ -0,0 +1 @@
<!--<iframe width=650 height=400 frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/?ie=UTF8&amp;hq=&amp;hnear=2903+Simkins+Ct,+Palo+Alto,+California+94303&amp;ll=37.44041,-122.117335&amp;spn=0.017412,0.019462&amp;t=m&amp;z=16&amp;output=embed"></iframe>-->

7
source/patterns/m-navigation-breadcrumbs/m-navigation-breadcrumbs.mustache Normal file
View File

@ -0,0 +1,7 @@
<ul class="breadcrumbs">
<li><a href="#">Grandparent</a></li>
<li><a href="#">Parent</a></li>
<li><a href="#">Child</a></li>
<li><a href="#">Grandchild</a></li>
<li><a href="#">Great-Grandchild</a></li>
</ul>

6
source/patterns/m-navigation-footer-nav/m-navigation-footer-nav.mustache Normal file
View File

@ -0,0 +1,6 @@
<ul class="nav-footer">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>

9
source/patterns/m-navigation-pagination/m-navigation-pagination.mustache Normal file
View File

@ -0,0 +1,9 @@
<ol class="pagination">
<li class="current"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
</ol>

53
source/patterns/m-navigation-primary-nav/m-navigation-primary-nav.mustache
View File

@ -1,51 +1,8 @@
<nav id="nav" class="nav">
<ul class="nav-categories">
<li><a href="#">TV</a></li>
<li><a href="#">Movies</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Movies</a></li>
<li><a href="#">Books</a></li>
<li><a href="#">Style</a></li>
<li><a href="#">Family</a></li>
<li><a href="#">CapeTown</a></li>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="nav-secondary">
<ul class="nav-overflow">
<li><a href="#">PLWatch</a></li>
<li><a href="#">Movies</a></li>
</ul>
<div class="nav-hot">
<h4>Hot on Pattern Lab</h4>
<ul class="nav-hot-list">
<li><a href="#">Game of Thrones</a></li>
<li><a href="#">American Idol</a></li>
<li><a href="#">Mad Men</a></li>
<li><a href="#">Celebrity Apprentice</a></li>
<li><a href="#">Smash</a></li>
<li><a href="#">Oz the Great and Powerful</a></li>
</ul>
</div>
</div><!--end .nav-secondary-->
<div class="nav-tertiary">
<div class="block block-inset">
<a href="#">
<img src="{{ atoms.images.landscape-16x9.src }}" alt="{{ atoms.images.landscape-16x9.alt }}" class="block-img">
<div class="block-title">Feature #1</div>
</a>
</div>
<div class="block block-inset">
<a href="#">
<img src="{{ atoms.images.landscape-16x9.src }}" alt="{{ atoms.images.landscape-16x9.alt }}" class="block-img">
<div class="block-title">Feature #2</div>
</a>
</div>
</div>
<div class="nav-subscribe">
<ul>
<li><a href="#" class="btn">Facebook</a></li>
<li><a href="#" class="btn">Twitter</a></li>
<li class="wide"><a href="#" class="btn">Subscribe</a></li>
</ul>
</div><!--end .nav-subscribe-->
</nav><!--end .nav-->

7
source/patterns/m-navigation-tabs/m-navigation-tabs.mustache Normal file
View File

@ -0,0 +1,7 @@
<div class="tabs">
<ul class="tab-list">
<li><a href="#" class="active">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
</div>

11
source/patterns/m-text-address/m-text-address.mustache Normal file
View File

@ -0,0 +1,11 @@
<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>

4
source/patterns/m-text-blockquote-with-citation/m-text-blockquote-with-citation.mustache Normal file
View File

@ -0,0 +1,4 @@
<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>

1
source/patterns/m-text-byline-author-only/m-text-byline-author-only.mustache Normal file
View File

@ -0,0 +1 @@
<div class="byline">by Author Name</div>

2
source/patterns/m-text-byline-author-time/m-text-byline-author-time.mustache
View File

@ -1 +1 @@
<div class="byline">by <a href="#">A Great Author</a> | April 6, 2013 - 12:32am ET</div>
<div class="byline">by Author Name on <time datetime="2013-04-06T12:32+00:00">June 3rd</time></div>

1
source/patterns/m-text-caption/m-text-caption.mustache Normal file
View File

@ -0,0 +1 @@
<p class="caption">A caption can be applied to an image, quote, form field, etc.</p>

4
source/patterns/m-text-heading-group/m-text-heading-group.mustache Normal file
View File

@ -0,0 +1,4 @@
<div class="hgroup">
<h2>This is the heading group's main heading</h2>
<h3>This is the heading group's subheading</h3>
</div>

1
source/patterns/m-text-intro-text/m-text-intro-text.mustache Normal file
View File

@ -0,0 +1 @@
<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>

3
source/patterns/m-text-pullquote/m-text-pullquote.mustache Normal file
View File

@ -0,0 +1,3 @@
<blockquote class="pullquote">
<p>A pull quote is a quotation or excerpt from an article</p>
</blockquote>