o-layout

A layout component for internal products and tools

active

Documentation Layout

Documentation Layout

<div class="o-layout" data-o-component="o-layout">
<header class="o-header-services o-layout__header" data-o-component="o-header">
	<div class="o-header-services__top o-header-services__container">

			<div class="o-header-services__hamburger">
				<a class="o-header-services__hamburger-icon" href="#o-header-drawer" aria-controls="o-header-drawer"><span class="o-header__visually-hidden">Menu</span></a>
			</div>

			<div class="o-header-services__ftlogo"></div>
			<div class="o-header-services__title">
				<h1 class="o-header-services__product-name">
					<a href="/">Layout Demos</a>
				</h1>
				<span class="o-header-subrand__product-tagline">how we lay it out</span>
			</div>
	</div>

	<nav class="o-header-services__primary-nav">
		<div class="o-header-services__container">
			<ul class="o-layout__primary-nav o-header-services__nav-list">
					<li class="o-header-services__nav-item">
						<a class="o-header-services__nav-link o-header-services__nav-link--selected" href="documentation-layout.html">
							Documentation
						</a>
					</li>
					<li class="o-header-services__nav-item">
						<a class="o-header-services__nav-link " href="lists-tables-layout.html">
							Lists &amp; Tables
						</a>
					</li>
			</ul>
		</div>
	</nav>

		<nav class="o-header__subnav" role="navigation" aria-label="Sub navigation" data-o-header-subnav="">
			<div class="o-header-services__container">
				<div class="o-header__subnav-wrap-outside">
					<div class="o-header__subnav-wrap-inside" data-o-header-subnav-wrapper="">
						<div class="o-header__subnav-content">
							<ol class="o-header__subnav-list o-header__subnav-list--breadcrumb" aria-label="Breadcrumb">
									<li class="o-header__subnav-item">
										<a class="o-header__subnav-link" href="#">
											Documentation
										</a>
									</li>
									<li class="o-header__subnav-item">
										<a class="o-header__subnav-link" href="#">
											Tutorials
										</a>
									</li>
							</ol>

							<ul class="o-header__subnav-list o-header__subnav-list--children" aria-label="Subsections">
								<li class="o-header__subnav-item">
									<a class="o-header__subnav-link" href="#" aria-current="">
										Quickstart
									</a>
								</li>
								<li class="o-header__subnav-item">
									<a class="o-header__subnav-link" href="#">
										The Build Service
									</a>
								</li>
								<li class="o-header__subnav-item">
									<a class="o-header__subnav-link" href="#">
										Manual Build Process
									</a>
								</li>
							</ul>
						</div>
					</div>
					<button class="o-header__subnav-button o-header__subnav-button--left" title="scroll left" aria-hidden="true" disabled></button>
					<button class="o-header__subnav-button o-header__subnav-button--right" title="scroll right" aria-hidden="true" disabled></button>
				</div>
			</div>
		</nav>
</header>

	<div class="o-layout__sidebar"></div>

	<div class="o-layout__main" data-o-component="o-syntax-highlight">
<h2 id="origami-modules-quick-start">Origami modules quick start</h2>

	<p>
		This tutorial is the quickest way to get started with Origami. By the end of it
		you should know enough to create disposable prototypes using Origami&apos;s ui modules.
		If you want to know how to use Origami in production websites, you&apos;ll need a bit
		more information than this tutorial includes.
	</p>
	<p>
		We have a more detailed set of tutorials if you want a proper introduction.
		<a href="#">Take me to the proper guide</a>.
	</p>


	<h3 id="set-up-your-page">1. Set up your page</h3>

	<p>
		We&apos;re going to use <a href="http://codepen.io/pen/?editors=1000">Codepen.io</a>
		for this demo. You could also use <a href="http://jsbin.com/?html,output">JS Bin</a>
		or serve the demo from a local server.
	</p>

	<p>
		First, let&apos;s put some minimum viable HTML onto the page. This is not the HTML you
		would use in production, but for prototyping with the Build Service it&apos;s fine.
	</p>

	<pre>
		<code class="o-syntax-highlight--html">
&lt;html&gt;
	&lt;head&gt;
		&lt;!-- build service links and scripts here --&gt;
	&lt;/head&gt;
	&lt;body&gt;
		Hello!
		&lt;button&gt;Here&apos;s a button&lt;/button&gt;
	&lt;/body&gt;
&lt;/html&gt;</code>
	</pre>


<div>
	<h3 id="include-css"> 2. Include the CSS</h3>

	<p>
		OK, we&apos;ve got a button there, but it&apos;s completely unstyled. Let&apos;s use the
		<code>o-buttons</code> Origami module to style it.
	</p>

	<p>
		We&apos;re going to use the Build Service to provide the styles.
	</p>

	<p>
		To do that we need to request the <code>o-buttons</code> CSS from the Build Service:
	</p>


	<pre>
		<code class="o-syntax-highlight--html">
https://www.ft.com/__origami/service/build/v2/bundles/css?modules=o-buttons</code>
	</pre>

	<p>This request says &quot;give me the CSS for o-buttons at the latest version&quot;</p>

	<p>Let&apos;s add that to our page in the <code>&lt;head&gt;</code> as a <code>&lt;link...&gt;</code> tag</p>


	<pre>
		<code class="o-syntax-highlight--html">
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://www.ft.com/__origami/service/build/v2/bundles/css?modules=o-buttons&quot;/&gt;</code>
	</pre>
</div>
<aside>
	<h6>Read more about component versioning</h6>
	<p>This example only uses the component tag (o-buttons). To use Origami modules in production code safely, you should also use a version number with your Build Service request.</p>
	<a href="#">Find out more about component versioning</a>
</aside>

	<h3 id="add-the-classes"> 3. Add the classes</h3>

	<p>
		Next add the right classes to your HTML. Some Origami components are more complicated than <code>o-buttons</code>.
		To help with this we provide example HTML already marked up with the right classes that you can copy into your project.
	</p>

	<p>For this tutorial though, you need to add the class <code>o-buttons</code> to the <code>&lt;button&gt;</code> tag.</p>

	<p>o-buttons has some design variations. Let&apos;s apply the <code>standout</code> variation by the adding <code>o-buttons--standout</code> class.</p>

	<pre>
		<code class="o-syntax-highlight--html">
&lt;button class=&quot;o-buttons o-buttons--secondary&quot;&gt;Here&apos;s a button&lt;/button&gt;</code>
	</pre>


	<h3 id="include-the-javascript"> 4. Include the JavaScript</h3>

	<p>
		<code>o-buttons</code> also has some JavaScript to make buttons work better on touch devices like phones.
		Getting JavaScript from the build service is as easy as getting the CSS.
	</p>

	<pre>
		<code class="o-syntax-highlight--html">
https://www.ft.com/__origami/service/build/v2/bundles/js?modules=o-buttons</code>
	</pre>

	<p>Instead of using a <code>&lt;link ...&gt;</code> tag, use a <code>&lt;script ...&gt;</code> tag.</p>

	<pre>
		<code class="o-syntax-highlight--html">
&lt;script async type=&quot;javascript&quot; src=&quot;https://www.ft.com/__origami/service/build/v2/bundles/js?modules=o-buttons&quot;&gt;&lt;/script&gt;</code>
	</pre>


	<h3 id="putting-it-all-together"> 5. Putting it all together</h3>

	<pre>
		<code class="o-syntax-highlight--html">
&lt;html&gt;
	&lt;head&gt;
		&lt;!-- build service links and scripts here --&gt;
		&lt;script async type=&quot;javascript&quot; src=&quot;https://www.ft.com/__origami/service/build/v2/bundles/js?modules=o-buttons&quot;&gt;&lt;/script&gt;
		&lt;link rel=&quot;stylesheet&quot; href=&quot;https://www.ft.com/__origami/service/build/v2/bundles/css?modules=o-buttons&quot; /&gt;
	&lt;/head&gt;
	&lt;body&gt;
		Hello!
		&lt;button class=&quot;o-buttons o-buttons--secondary&quot;&gt;Here&apos;s a button&lt;/button&gt;
	&lt;/body&gt;
&lt;/html&gt;</code>
	</pre>


<h3 id="whats-next"> What&apos;s next?</h3>

<p>
	Well done! you&apos;ve used an o-button on a page. Adding more components is very similar:
</p>
<ol>
	<li>Add the names of other components to you want to the build service requests</li>
	<li>Add the HTML and classes</li>
</ol>
<p>
	Some components, like <code>o-header</code> have much more complicated HTML than <code>o-buttons</code>. Where this is the case, you should copy and paste the HTML for those elements from the <a href="#">Origami Registry</a>.
</p>

<h3 id="find-out-more"> Find out more</h3>

<div>
	<p>
		This tutorial is a very quick guide to Origami.
		It skipped over a few important concepts that you&apos;ll need to know for using Origami modules in a live
		service. The next tutorial will take you through using Origami in more detail.
	</p>
	<a href="#">Let&apos;s do this the proper way</a>
</div>
	</div>

<footer class="o-layout__footer o-footer-services o-footer-services--wide">
	<div class="o-footer-services__container">
			<div class="o-footer-services__info">
				<span class="o-footer-services__logo">Origami</span>
				<p class="o-footer-services__contact-email">Help or advice can be found here <a href="mailto:an.email@someplace.com">an.email@someplace.com</a> and there are other places, <a href="/somewhere">like this one</a> where you can find help, too.</p>
				<p class="o-footer-services__contact-slack"><a href="https://slack.com/messages/[id]/">#slack-channel</a></p>
			</div>
			<div class="o-footer-services__base">
				<p class="o-footer-services__source-code"><a href="http://github.com/financial-times/o-footer-services">View project on GitHub</a></p>
				<p class="o-footer-services__copyright">&#xA9; THE FINANCIAL TIMES LTD. FT and &apos;Financial Times&apos; are trademarks of The Financial Times Ltd.</p>
			</div>
	</div>
</footer>
</div>

Lists & Tables Layout

Lists & Tables Layout

<div class="o-layout" data-o-component="o-layout">
<header class="o-header-services o-layout__header" data-o-component="o-header">
	<div class="o-header-services__top o-header-services__container">

			<div class="o-header-services__hamburger">
				<a class="o-header-services__hamburger-icon" href="#o-header-drawer" aria-controls="o-header-drawer"><span class="o-header__visually-hidden">Menu</span></a>
			</div>

			<div class="o-header-services__ftlogo"></div>
			<div class="o-header-services__title">
				<h1 class="o-header-services__product-name">
					<a href="/">Layout Demos</a>
				</h1>
				<span class="o-header-subrand__product-tagline">how we lay it out</span>
			</div>
	</div>

	<nav class="o-header-services__primary-nav">
		<div class="o-header-services__container">
			<ul class="o-layout__primary-nav o-header-services__nav-list">
					<li class="o-header-services__nav-item">
						<a class="o-header-services__nav-link " href="documentation-layout.html">
							Documentation
						</a>
					</li>
					<li class="o-header-services__nav-item">
						<a class="o-header-services__nav-link o-header-services__nav-link--selected" href="lists-tables-layout.html">
							Lists &amp; Tables
						</a>
					</li>
			</ul>
		</div>
	</nav>

		<nav class="o-header__subnav" role="navigation" aria-label="Sub navigation" data-o-header-subnav="">
			<div class="o-header-services__container">
				<div class="o-header__subnav-wrap-outside">
					<div class="o-header__subnav-wrap-inside" data-o-header-subnav-wrapper="">
						<div class="o-header__subnav-content">
							<ol class="o-header__subnav-list o-header__subnav-list--breadcrumb" aria-label="Breadcrumb">
									<li class="o-header__subnav-item">
										<a class="o-header__subnav-link" href="#">
											Lists &amp; Tables
										</a>
									</li>
							</ol>

							<ul class="o-header__subnav-list o-header__subnav-list--children" aria-label="Subsections">
								<li class="o-header__subnav-item">
									<a class="o-header__subnav-link" href="#">
										Lists
									</a>
								</li>
								<li class="o-header__subnav-item">
									<a class="o-header__subnav-link" href="#" aria-current="">
										Tables
									</a>
								</li>
							</ul>
						</div>
					</div>
					<button class="o-header__subnav-button o-header__subnav-button--left" title="scroll left" aria-hidden="true" disabled></button>
					<button class="o-header__subnav-button o-header__subnav-button--right" title="scroll right" aria-hidden="true" disabled></button>
				</div>
			</div>
		</nav>
</header>

	<div class="o-layout__sidebar"></div>

	<div class="o-layout__main" data-o-component="o-syntax-highlight">
<h3 id="third-party-components">Third party components: the A list</h3>
<p>Origami components may have dependencies (via Bower) on third party components.  This page documents which third party libraries are preferred where there may be multiple libraries that achieve the same goal.</p>
<p>Like the rest of the Origami spec (except for the developer guide) these guidelines do not apply to products, only to components.</p>

<h2 id="this-is-a-list">This is a list</h2>
<ol>
	<li>This is a list item! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut porta augue. Etiam mollis feugiat risus, non rutrum velit pharetra vitae. </li>
	<li>This is a list item! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut porta augue. Etiam mollis feugiat risus, non rutrum velit pharetra vitae.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut porta augue. Etiam mollis feugiat risus, non rutrum velit pharetra vitae. </li>
	<li>This is a list item! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut porta augue. Etiam mollis feugiat risus, non rutrum velit pharetra vitae. </li>
	<li>This is a list item! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut porta augue. Etiam mollis feugiat risus, non rutrum velit pharetra vitae. </li>
	<li>This is a list item! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut porta augue. Etiam mollis feugiat risus, non rutrum velit pharetra vitae. </li>
	<li>This is a list item! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut porta augue. Etiam mollis feugiat risus, non rutrum velit pharetra vitae. </li>
</ol>

<h2 id="this-is-a-table">This is a table</h2>
<table class="o-table o-table o-table--row-stripes" data-o-component="o-table">
	<thead>
		<tr><th>For this</th><th>Use this</th><th>Not these</th><th>Because</th></tr>
	</thead>
	<tbody>
		<tr>
			<td>DOM manipulation</td>
			<td>o-dom (TBC)</td>
			<td>jQuery<br>Mootools<br>Dojo<br>Prototype<br>YUI</td>
			<td>A general purpose DOM manipulation library is invariably a common request, but large DOM libraries should be avoided since they contain numerous other features beyond simple DOM manipulation.  See also <a href="#why-not-jquery">Why not jQuery</a></td>
		</tr><tr>
			<td>AJAX</td>
			<td><a href="https://github.com/whatwg/fetch">fetch</a></td>
			<td>jQuery, superagent</td>
			<td>Components should <a href="#">not use jQuery</a>, fetch is better and will be supported natively by browsers.  In the meantime a <a href="https://github.com/github/fetch">polyfill exists</a> and is <a href="https://cdn.polyfill.io/">available through the Polyfill Service</a>.</td>
		</tr><tr>
			<td>Event delegation</td>
			<td><a href="https://github.com/ftlabs/ftdomdelegate">ftdomdelegate</a></td>
			<td>jQuery</td>
			<td>Components should <a href="#">not use jQuery</a>.</td>
		</tr><tr>
	 		<td>JavaScript utils</td>
	 		<td><a href="https://github.com/lodash/lodash">Lodash</a></td>
	 		<td>Underscore, lodash-node</td>
	 		<td>Lodash V3 allows each method to be individually requireable e.g. <code>require(&apos;lodash/function/defer&apos;)</code>, which is more preferable than requiring the whole library. Lodash is roughly functionally equivalent to Underscore, but generally delivers faster performance, and includes some useful things not available in Underscore. Lodash-node was deprecated with the release of Lodash V3.</td>
	 	</tr><tr>
	 		<td>Throttle/debounce</td>
	 		<td><a href="https://github.com/Financial-Times/o-utils">o-utils</a></td>
	 		<td>Lodash</td>
	 		<td>o-utils has its own throttle and debounce functions.</td>
	 	</tr><tr>
			<td>Template engine</td>
			<td><a href="https://github.com/twitter/hogan.js">Hogan</a></td>
			<td>Mustache<br>Handlebars</td>
			<td>
				It&apos;s compatible with Mustache templates, but offers additional features on top of Mustache&apos;s syntax. Origami has no opinion on how product developers should build applications, so when a component&apos;s purpose is to offer a raw template to the developer, it must use only fully Mustache-compatible syntax (but these components would also not actually require the template engine themselves).
				<p>Components that contain templates but only use them internally in order to render a UI element, may use the more advanced template syntax offered by Hogan, and prefer Hogan as the template engine.</p>
			</td>
		</tr><tr>
			<td>Touch interactions</td>
			<td><a href="http://hammerjs.github.io/">Hammer.JS</a></td>
			<td></td>
			<td>
				<p>It offers a highly extensible, well tested and lightweight way to interact with touch events, including both single- and multi-touch gestures.</p>
			</td>
		</tr>
	</tbody>
</table>
	</div>

<footer class="o-layout__footer o-footer-services o-footer-services--wide">
	<div class="o-footer-services__container">
			<div class="o-footer-services__info">
				<span class="o-footer-services__logo">Origami</span>
				<p class="o-footer-services__contact-email">Help or advice can be found here <a href="mailto:an.email@someplace.com">an.email@someplace.com</a> and there are other places, <a href="/somewhere">like this one</a> where you can find help, too.</p>
				<p class="o-footer-services__contact-slack"><a href="https://slack.com/messages/[id]/">#slack-channel</a></p>
			</div>
			<div class="o-footer-services__base">
				<p class="o-footer-services__source-code"><a href="http://github.com/financial-times/o-footer-services">View project on GitHub</a></p>
				<p class="o-footer-services__copyright">&#xA9; THE FINANCIAL TIMES LTD. FT and &apos;Financial Times&apos; are trademarks of The Financial Times Ltd.</p>
			</div>
	</div>
</footer>
</div>
Bower Dependencies
sass-mq ^5.0.0
o-header-services ^2.3.0
o-footer-services ^1.0.2
o-typography ^5.7.5
o-fonts ^3.0.4
GitHub Repository

Quickstart

Build Service

Add the following to your <script> and <link> tags.

o-layout@^1.0.1&brand=internal

How do I do that?

For more information see the Origami build service.

Manual Build Process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-layout"@"^1.0.1"

For more information see the Origami build process.