Reorganize styleguide (pattern library) to distinguish static layouts, styleguide from Sass powering it
This commit is contained in:
benjamin melançon
parent
b9040a7fde
commit
952af16725
235 changed files with 4 additions and 4 deletions
177
static-layouts/design-source/pages/work.hbs
Normal file
177
static-layouts/design-source/pages/work.hbs
Normal file
|
|
@ -0,0 +1,177 @@
|
|||
---
|
||||
title: "Work"
|
||||
---
|
||||
|
||||
|
||||
{{#extend "default"}}
|
||||
{{#content "precontent"}}
|
||||
<section class="hero is-dark">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="titlebar">
|
||||
<div class="titlebar_title">
|
||||
<h1 class="title is-2">Work</h1>
|
||||
</div>
|
||||
<div class="titlebar_links">
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label">Filter by:</label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<div class="select">
|
||||
<select>
|
||||
<option>Technology</option>
|
||||
<option>Drupal</option>
|
||||
<option>Python</option>
|
||||
<option>Mobile</option>
|
||||
</select>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<div class="select">
|
||||
<select>
|
||||
<option>Industry</option>
|
||||
<option>Education</option>
|
||||
<option>Health</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{/content}}
|
||||
{{#content "content"}}
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-one-third">
|
||||
<a href="#" class="is-child card card-project is-cinnamon">
|
||||
<div class="card-image" style="background-image:url(../assets/img/fpo-drtb-connamon.jpg)">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p class="title">DRTB Network</p>
|
||||
<p class="subtitle">Community directory</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column is-one-third">
|
||||
<a href="#" class="is-child card card-project is-berry">
|
||||
<div class="card-image" style="background-image:url(../assets/img/fpo-backupify-berry.jpg)">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p class="title">Backupify</p>
|
||||
<p class="subtitle">Secure cloud management portal</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column is-one-third">
|
||||
<a href="#" class="is-child card card-project is-blue">
|
||||
<div class="card-image" style="background-image:url(../assets/img/fpo-mass-blue.jpg)">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p class="title">MASS Design Group</p>
|
||||
<p class="subtitle">Global humainitarian architecture firm</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column is-one-third">
|
||||
<a href="#" class="is-child card card-project is-marine">
|
||||
<div class="card-image" style="background-image:url(../assets/img/fpo-mit-marine.jpg)">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p class="title">MIT</p>
|
||||
<p class="subtitle">Multi-faceted data migration</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column is-one-third">
|
||||
<a href="#" class="is-child card card-project is-dandelion">
|
||||
<div class="card-image" style="background-image:url(../assets/img/fpo-pih-dandelion.jpg)">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p class="title">Partners in Health</p>
|
||||
<p class="subtitle">Mluti-lingual global website</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column is-one-third">
|
||||
<a href="#" class="is-child card card-project is-cinnamon">
|
||||
<div class="card-image" style="background-image:url(../assets/img/fpo-findit-cinnamon.jpg)">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p class="title">Find It Cambridge</p>
|
||||
<p class="subtitle">Community directory</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column is-one-third">
|
||||
<a href="#" class="is-child card card-project is-cinnamon">
|
||||
<div class="card-image" style="background-image:url(../assets/img/fpo-drtb-connamon.jpg)">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p class="title">DRTB Network</p>
|
||||
<p class="subtitle">Community directory</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column is-one-third">
|
||||
<a href="#" class="is-child card card-project is-berry">
|
||||
<div class="card-image" style="background-image:url(../assets/img/fpo-backupify-berry.jpg)">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p class="title">Backupify</p>
|
||||
<p class="subtitle">Secure cloud management portal</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column is-one-third">
|
||||
<a href="#" class="is-child card card-project is-blue">
|
||||
<div class="card-image" style="background-image:url(../assets/img/fpo-mass-blue.jpg)">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p class="title">MASS Design Group</p>
|
||||
<p class="subtitle">Global humainitarian architecture firm</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column is-one-third">
|
||||
<a href="#" class="is-child card card-project is-marine">
|
||||
<div class="card-image" style="background-image:url(../assets/img/fpo-mit-marine.jpg)">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p class="title">MIT</p>
|
||||
<p class="subtitle">Multi-faceted data migration</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column is-one-third">
|
||||
<a href="#" class="is-child card card-project is-dandelion">
|
||||
<div class="card-image" style="background-image:url(../assets/img/fpo-pih-dandelion.jpg)">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p class="title">Partners in Health</p>
|
||||
<p class="subtitle">Mluti-lingual global website</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column is-one-third">
|
||||
<a href="#" class="is-child card card-project is-cinnamon">
|
||||
<div class="card-image" style="background-image:url(../assets/img/fpo-findit-cinnamon.jpg)">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p class="title">Find It Cambridge</p>
|
||||
<p class="subtitle">Community directory</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{{/content}}
|
||||
{{/extend}}
|
||||
Loading…
Add table
Add a link
Reference in a new issue