Presentation plone conference 2012

Patterns

A library that aims to bring design and development together

vrijdag 19 oktober 12

Developers and designers

http://www.ﬂickr.com/photos/a_ninjamonkey/3565672226/


Image: http://thebonehouse.ca

Pourquoi? Zergatik?
Waarom? Why?
Varfor?

?
Hoekom?

Warum?
Miks?
Por quê? Почему?
¿Por qué?
Miksi? 為什麼？ Hvorfor?
Perché? Mengapa?
De ce?

jQuery UI

- Quantity vs Quality
± Lots of freedom
+ Rich interaction patterns
+ Focus on interaction patterns
- Still need to program
+ Good for dev
- Not wel suited for prototyping


jQuery UI Twitter bootstrap

- Quantity vs Quality + Well deﬁned library of interaction
± Lots of freedom patterns
+ Rich interaction patterns - Lacks certain rich patterns
+ Focus on interaction patterns - Focus on layout
- Still need to program - Little need for programming
+ Good for dev - Less good for dev
- Not wel suited for prototyping + Great for prototyping


ery UI Patterns library Twitter bo

y vs Quality + Well deﬁned library of interaction + Well deﬁned libra
of freedom patterns patte
action patterns + Loved by designers & developers - Lacks certain
eraction patterns + No need for programming - Focus o
d to program + Focus on interaction patterns - Little need for
d for dev + Great for dev + Less goo
d for prototyping + Great for prototyping + Great for p


Patterns’ solution

• Only one predeﬁned tag to include in the <head> runs Patterns.
• Works directly in the markup with attributes.
• Uses a syntax that’s compact and not scary to anyone.
• Start rapidly with boilerplate CSS
• Extensible: add your own patterns.
• Can grow rapidly by selecting and integrating excelelnt jQuery
plugins if available.


http://leaverou.github.com/preﬁxfree/

background: rgb(252,234,187); /* Old browsers */
background: -moz-linear-gradient(top, rgba(252,234,187,1) 0%,
rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%); /*
FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-
stop(0%,rgba(252,234,187,1)), color-stop(50%,rgba(252,205,77,1)), color-
stop(51%,rgba(248,181,0,1)), color-stop(100%,rgba(251,223,147,1))); /*
Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(252,234,187,1)
0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /*
Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(252,234,187,1) 0%,rgba(252,205,77,1)
50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(252,234,187,1) 0%,rgba(252,205,77,1)
50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(252,234,187,1)
0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /*
W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb',
endColorstr='#fbdf93',GradientType=0 ); /* IE6-9 */


background: linear-gradient(to bottom, rgba(252,234,187,1)
0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1)
100%); /* W3C *


Modernizr
Modernizr is a JavaScript library
that detects HTML5 and CSS3
features in the user's browser.

http://modernizr.com

Markup example

<div class=”pat-collapsible”>
<h3>Click me!</h3>
<p>Lorem ipsum dolor sit amet</p>
</div>


Markup example

<div class=”pat-collapsible”> <div class=”pat-collapsible open”>
<h3>Click me!</h3> <h3>Click me!</h3>
<p>Lorem ipsum dolor sit amet</p> <div class=”panel-content”>
</div> <p>Lorem ipsum dolor sit amet</p>
</div>
</div>


Carousel

<ul class=”pat-carousel”>
<li><img src=”http://lorempixel.com/400/200” alt=”Random image” /></li>
</ul>


Carousel

<ul class=”pat-carousel” data-pat-carousel=”loop: false; control-arrows: true;”>
</ul>


Carousel

<ul class=”pat-carousel” data-pat-
carousel=”loop: false; control-
arrows: true;”>
<li><img src=”http://
lorempixel.com/400/200”
alt=”Random image” /></li>
</ul>


Markup example


Tooltip

<a class=”pat-tooltip” data-pat-tooltip="position: tm-rt-rm-rb-lt; method:
click"”>
Tooltip top middle, show on hover
</a>


Injection

<a href="my-page.html" class="pat-inject" data-pat-inject="#content">
My first AJAX
</a>

<div id="content">
This is going to be replaced by the entire content of my-page.html
</div>


Injection

<a href="my-page.html#content" class="pat-inject">
My first AJAX
</a>

<div id="content">
This is going to be replaced by the contents of #content of my-page.html
</div>


Injection

<a href="my-page.html#my-id" class="pat-inject" data-pat-inject="#content" >
My first AJAX
</a>

<div id="content">
This is going to be replaced by the contents of #my-id of my-page.html
</div>


Injection

<a href="my-page.html" class="pat-inject" data-pat-inject="#my-id #content &&
h1 .btn">
My first AJAX
</a>

<div id="content">
This is going to be replaced by the contents of #my-id of my-page.html
</div>

<a href=”#” class=”btn”>
This is going to be replaced by the H1 contents of my-page.html
</a>

<a href=”#” class=”btn”>
This is also going to be replaced by the H1 contents of my-page.html
</a>


Injection

<a href="my-page.html" class="pat-inject" data-pat-inject="method: modal">
My first AJAX
</a>


Injection

<a href="my-page.html" class="pat-inject" data-pat-inject="method: self-healing">
My first AJAX
</a>


Injection

<a href="foo.html" class="pat-inject" data-pat-inject="before-element: #content">
My first AJAX
</a>


<div id="content">
This content will stay here
</div>

Injection

<a href="foo.html" class="pat-inject" data-pat-inject="after-element: #content">
My first AJAX
</a>

<div id="content">
</div>


Injection

<a href="foo.html" class="pat-inject" data-pat-inject="before: #content">
My first AJAX
</a>

<div id="content">
</div>


Injection

<a href="foo.html" class="pat-inject" data-pat-inject="after: #content">
My first AJAX
</a>

<div id="content">
</div>


Toggle

<fieldset id="document-filters" class="closed fancy-select">
<p class="legend" data-pat-toggle="#document-filters; open closed; class">Filters</p>
<fieldset class="flyout">
<fieldset class="sorting radio-list">
<label><input name="sorting" type="radio" checked="checked" />Sort by date</label>
! ! ! <label><input name="sorting" type="radio" />Sort by author</label>
! ! ! <label><input name="sorting" type="radio" />Sort by type</label>
! ! </fieldset>
! ! <fieldset class="filter check-list">
! ! ! <label><input type="checkbox" />Show my documents only</label>
! ! </fieldset>
! ! <fieldset class="grouping radio-list">
! ! ! <label><input name="grouping" type="radio" checked="checked" />Group by Label</label>
! ! ! <label><input name="grouping" type="radio" />Group by author</label>
! ! ! <label><input name="grouping" type="radio" />Group by period</label>
! ! ! <label><input name="grouping" type="radio" />Group by type</label>
! ! ! <label><input name="grouping" type="radio" />No grouping</label>
! ! </fieldset>
! </fieldset>
</fieldset>


w w w. p a t t e r n s l i b . c o m


Presentation plone conference 2012

Recommended

Recommended

More Related Content

Similar to Presentation plone conference 2012

Similar to Presentation plone conference 2012 (20)

Recently uploaded

Recently uploaded (20)

Presentation plone conference 2012