Skip to content

Commit

Permalink
Documentation Update for v0.3.6 .
Browse files Browse the repository at this point in the history 
Added docs for the new component: Thumbnail.
Some minor JS / CSS fixes.
  • Loading branch information
droidcoder committed Mar 28, 2014
1 parent 07e1a4f commit e551ebd
Show file tree
Hide file tree
Showing 4 changed files with 800 additions and 1 deletion.
2 changes: 1 addition & 1 deletion web/applayout/navbarbottom.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<h:body>
<ui:composition>
<b:navBar brand="&copy;2013-2014 TheCoder4Eu" brandHref="http://www.thecoder4.eu/" fixed="bottom">
<p class="navbar-text pull-right"><h:outputText value="BootsFaces v.0.3.5 on Mojarra 2.2.5" /></p>
<p class="navbar-text pull-right"><h:outputText value="BootsFaces v.0.3.6 on Mojarra 2.2.5" /></p>
</b:navBar>
</ui:composition>
</h:body>
Expand Down
1 change: 1 addition & 0 deletions web/applayout/navbartop.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
<b:navLink value="DropButton" outcome="/bootstrap/dropButton" />
<b:navLink value="Labels and Badges" outcome="/bootstrap/labelsbadge" icon="tag" />
<b:navLink value="Modals" outcome="/bootstrap/modal" />
<b:navLink value="Thumbnails" outcome="/bootstrap/thumbnails" icon="picture" />
<!--b:navLink value="Popover" /-->
</b:dropMenu>
<b:dropMenu value="jQuery UI Widgets">
Expand Down
140 changes: 140 additions & 0 deletions web/bootstrap/thumbnails.xhtml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:b="http://bootsfaces.net/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>BootsFaces: next-gen JSF Framework</title>
<meta name="author" content="Riccardo Massera"></meta>
</h:head>
<h:body style="padding-top: 60px">
<ui:composition template="/applayout/pageTemplate.xhtml">
<ui:define name="content">
<h:outputScript library="holder" name="holder.js" />
<h1>Thumbnails</h1>
<p>You can take advantage of BootsFaces's layout system with the thumbnail component to easily display grids of images, videos, text, and more.</p>

<h3 id="thumbnails-default">Default example</h3>
<p>By default, the BootsFaces <code>&lt;b:thumbnail&gt;</code> tag is designed to showcase linked images with minimal required markup.</p>
<b:panel>
<f:facet name="heading"><b>EXAMPLE</b></f:facet>
<b:row>
<b:column col-xs="6" col-md="3">
<b:thumbnail>
<img data-src="holder.js/100%x180/sky" alt="Generic placeholder thumbnail"/>
</b:thumbnail>
</b:column>
<b:column col-xs="6" col-md="3">
<b:thumbnail>
<img data-src="holder.js/100%x180/vine" alt="Generic placeholder thumbnail"/>
</b:thumbnail>
</b:column>
<b:column col-xs="6" col-md="3">
<b:thumbnail>
<img data-src="holder.js/100%x180/lava" alt="Generic placeholder thumbnail"/>
</b:thumbnail>
</b:column>
<b:column col-xs="6" col-md="3">
<b:thumbnail>
<img data-src="holder.js/100%x180/social" alt="Generic placeholder thumbnail"/>
</b:thumbnail>
</b:column>
</b:row>
<f:facet name="footer">
<strong>Markup:</strong><br/>

<script type="syntaxhighlighter" class="brush: xml; toolbar: false;first-line: 0">
<![CDATA[
<b:row>
<b:column col-xs="6" col-md="3">
<b:thumbnail>
<img data-src="holder.js/100%x180/sky" alt="Generic placeholder thumbnail"/>
</b:thumbnail>
</b:column>
...
</b:row>
]]></script>
</f:facet>
</b:panel>
<h3 id="thumbnails-custom-content">Custom content</h3>
<p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
<p>Just add a facet with <code>name="caption"</code> to the component and add your content inside.</p>
<b:panel>
<f:facet name="heading"><b>EXAMPLE - Thumbnail with custom content</b></f:facet>
<b:row>
<b:column col-sm="6" col-md="4">
<b:thumbnail>
<img data-src="holder.js/300x200/social" alt="Generic placeholder thumbnail"/>
<f:facet name="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
<b:button look="primary" value="Button"/>#{' '}
<b:button value="Button"/>
</p>
</f:facet>
</b:thumbnail>
</b:column>
<b:column col-sm="6" col-md="4">
<b:thumbnail>
<img data-src="holder.js/300x200/vine" alt="Generic placeholder thumbnail"/>
<f:facet name="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
<b:button look="primary" value="Button"/>#{' '}
<b:button value="Button"/>
</p>
</f:facet>
</b:thumbnail>
</b:column>
<b:column col-sm="6" col-md="4">
<b:thumbnail>
<img data-src="holder.js/300x200/lava" alt="Generic placeholder thumbnail"/>
<f:facet name="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
<b:button look="primary" value="Button"/>#{' '}
<b:button value="Button"/>
</p>
</f:facet>
</b:thumbnail>
</b:column>
</b:row>
<f:facet name="footer">
<strong>Markup:</strong><br/>

<script type="syntaxhighlighter" class="brush: xml; toolbar: false;first-line: 0">
<![CDATA[
<b:row>
<b:column col-sm="6" col-md="4">
<b:thumbnail>
<img data-src="holder.js/300x200/social" alt="Generic placeholder thumbnail"/>
<f:facet name="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
<b:button look="primary" value="Button"/>
<b:button value="Button"/>
</p>
</f:facet>
</b:thumbnail>
</b:column>
...
</b:row>
]]></script>
</f:facet>
</b:panel>

<script type="text/javascript">
SyntaxHighlighter.all();
</script>
<br/>
<br/>
</ui:define>
</ui:composition>
</h:body>
</html>
Loading

0 comments on commit e551ebd

Please sign in to comment.