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
38
static-layouts/design-source/templates/carousel.hbs
Normal file
38
static-layouts/design-source/templates/carousel.hbs
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<div class='carousel'>
|
||||
<figure class="image">
|
||||
<img src="../assets/img/fpo-fic-home.png" alt="">
|
||||
<figcaption>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure class="image">
|
||||
<img src="../assets/img/fpo-fic-map.png" alt="">
|
||||
<figcaption>
|
||||
Ipsum dolor sit amet, consectetur adipisicing elit.
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure class="image">
|
||||
<img src="../assets/img/fpo-fic-page.png" alt="">
|
||||
<figcaption>
|
||||
Dolor sit amet, consectetur adipisicing elit.
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure class="image">
|
||||
<img src="../assets/img/fpo-fic-home.png" alt="">
|
||||
<figcaption>
|
||||
Sit amet, consectetur adipisicing elit.
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure class="image">
|
||||
<img src="../assets/img/fpo-fic-map.png" alt="">
|
||||
<figcaption>
|
||||
Ipsum dolor sit amet, consectetur adipisicing elit.
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure class="image">
|
||||
<img src="../assets/img/fpo-fic-page.png" alt="">
|
||||
<figcaption>
|
||||
Consectetur adipisicing elit.
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
62
static-layouts/design-source/templates/comments.hbs
Normal file
62
static-layouts/design-source/templates/comments.hbs
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
<section class="section related" data-headerbg="light">
|
||||
<div class="container">
|
||||
<div class="titlebar titlebar-bigborder content">
|
||||
<div class="titlebar_title">
|
||||
<h3 class="subtitle is-mono is-4">Comments</h3>
|
||||
</div>
|
||||
<div class="titlebar_links">
|
||||
<a href="#">Add new comment</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="media media-comment">
|
||||
<div class="media-left">
|
||||
<p>
|
||||
12/31/2017<br> 23:26
|
||||
<br> Brian Perry</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<h3 class="title is-5">Enjoyed The Recap</h3>
|
||||
<p>We had a good Nintendo chat at Drupal Camp Twin Cities. Did you get a chance to play the new Zelda or Mario games? If not, I hope that is part of your 2018 :)</p>
|
||||
<p><a href="#">Reply</a></p>
|
||||
<div class="media media-comment">
|
||||
<div class="media-left">
|
||||
<p>
|
||||
12/31/2017<br> 23:26
|
||||
<br> Brian Perry</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<h3 class="title is-5">Lorem ipsum dolor.</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit exercitationem provident quos, aut reprehenderit animi repellendus accusamus odio nisi? Quaerat doloremque nostrum cupiditate fuga quam, sit, sint harum ab excepturi.</p>
|
||||
<p><a href="#">Reply</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media media-comment">
|
||||
<div class="media-left">
|
||||
<p>
|
||||
12/31/2017<br> 23:26
|
||||
<br> Brian Perry</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<h3 class="title is-5">Lorem ipsum dolor sit amet.</h3>
|
||||
<p>Consectetur adipisicing elit. Quasi vel tempore error dicta labore nam repellat, facilis animi accusamus molestias aspernatur, modi, deleniti cupiditate ullam, similique mollitia blanditiis numquam magni.</p>
|
||||
<p><a href="#">Reply</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media media-comment">
|
||||
<div class="media-left">
|
||||
<p>
|
||||
12/31/2017<br> 23:26
|
||||
<br> Brian Perry</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<h3 class="title is-5">Dolor sit amet, consectetur</h3>
|
||||
<p>Sit amet, consectetur adipisicing elit. Cupiditate placeat perferendis totam optio quis laudantium, distinctio voluptas beatae hic temporibus error quibusdam, in at illo eligendi incidunt. Nostrum, nihil eum.</p>
|
||||
<p><a href="#">Reply</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
51
static-layouts/design-source/templates/default.hbs
Executable file
51
static-layouts/design-source/templates/default.hbs
Executable file
|
|
@ -0,0 +1,51 @@
|
|||
<!doctype html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<title>{{title}} | {{site.title}}</title>
|
||||
<link rel="stylesheet" href="../assets/css/agaric.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
{{> header }}
|
||||
|
||||
{{#block "precontent"}}
|
||||
{{/block}}
|
||||
|
||||
<section class="section" data-headerbg="light">
|
||||
<div class="container">
|
||||
{{#block "content"}}
|
||||
content default.
|
||||
{{/block}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{#block "postcontent"}}
|
||||
{{/block}}
|
||||
|
||||
{{> footer }}
|
||||
|
||||
{{!-- Temp links to navigate the design samples --}}
|
||||
<div class="section hero is-dark" data-headerbg="light">
|
||||
<div class="container">
|
||||
Design links:
|
||||
<a href="index.html">Home</a> |
|
||||
<a href="work.html">Work</a> |
|
||||
<a href="case_study.html">Case Study</a> |
|
||||
<a href="initiatives.html">Initiatives</a> |
|
||||
<a href="initiatives_initiative.html">Initiative</a> |
|
||||
<a href="about_team.html">Team</a> |
|
||||
<a href="about_team_member.html">Person</a> |
|
||||
<a href="about_events.html">Events</a> |
|
||||
<a href="about_events_event.html">Event</a> |
|
||||
<a href="insights.html">Insights</a> |
|
||||
<a href="insights_insight.html">Insight</a> |
|
||||
<a href="bulma.html">Bulma Elements</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../assets/js/jquery-3.2.1.min.js"></script>
|
||||
<script src="../assets/js/ScrollMagic.min.js"></script>
|
||||
<script src="../assets/js/slick.min.js"></script>
|
||||
<script src="../assets/js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
22
static-layouts/design-source/templates/footer.hbs
Executable file
22
static-layouts/design-source/templates/footer.hbs
Executable file
|
|
@ -0,0 +1,22 @@
|
|||
<footer class="footer" data-headerbg="light">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column footer-logo is-half">
|
||||
<a href="#"><span class="icon"><i class="agc agc-logo"></i></span></a>
|
||||
</div>
|
||||
<div class="column">
|
||||
Agaric, LLC 288 Norfolk Street Cambridge, MA 02139
|
||||
</div>
|
||||
<div class="column">
|
||||
S: <a href="#">Twitter</a>
|
||||
<a href="#">Facebook</a>
|
||||
<a href="#">RSS</a><br>
|
||||
T: <a href="#">+1 508 283 3557</a><br>
|
||||
E: <a href="#">Contact</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
Powered by <a href="#">Drupal</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
64
static-layouts/design-source/templates/header.hbs
Executable file
64
static-layouts/design-source/templates/header.hbs
Executable file
|
|
@ -0,0 +1,64 @@
|
|||
<div class="is-fixed">
|
||||
<nav class="navbar" id="navbar">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="index.html">
|
||||
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 95 37" style="enable-background:new 0 0 95 37;" xml:space="preserve">
|
||||
<path class="logo-color" d="M13,8.8c-0.7-0.8-1.5-1.3-2.4-1.7C9.7,6.7,8.8,6.5,7.8,6.5c-2.2,0-4,0.8-5.5,2.5C0.8,10.6,0,12.7,0,15.3
|
||||
c0,2.5,0.8,4.5,2.3,6.2c1.6,1.7,3.4,2.5,5.5,2.5c1,0,1.8-0.2,2.7-0.5c0.8-0.3,1.6-0.9,2.4-1.7v1.8h4.2V6.9H13V8.8z M11.9,18.8
|
||||
c-0.9,0.9-1.9,1.4-3.2,1.4c-1.3,0-2.3-0.5-3.2-1.4c-0.9-0.9-1.3-2.1-1.3-3.5c0-1.4,0.4-2.6,1.3-3.5c0.8-0.9,1.9-1.4,3.2-1.4
|
||||
c1.3,0,2.4,0.4,3.3,1.3c0.9,0.9,1.3,2.1,1.3,3.5C13.2,16.7,12.7,17.9,11.9,18.8z"/>
|
||||
<path class="logo-color" d="M55.5,23.5V6.9h-4.2v1.8c-0.7-0.8-1.5-1.3-2.4-1.7c-0.9-0.4-1.8-0.6-2.8-0.6c-2.2,0-4,0.8-5.5,2.5
|
||||
c-1.5,1.6-2.3,3.7-2.3,6.3c0,2.5,0.8,4.5,2.3,6.2c1.6,1.7,3.4,2.5,5.5,2.5c1,0,1.8-0.2,2.7-0.5c0.8-0.3,1.6-0.9,2.4-1.7v1.8H55.5z
|
||||
M50.2,18.8c-0.9,0.9-1.9,1.4-3.2,1.4c-1.3,0-2.3-0.5-3.2-1.4c-0.9-0.9-1.3-2.1-1.3-3.5c0-1.4,0.4-2.6,1.3-3.5
|
||||
c0.8-0.9,1.9-1.4,3.2-1.4c1.3,0,2.4,0.4,3.3,1.3c0.9,0.9,1.3,2.1,1.3,3.5C51.5,16.7,51.1,17.9,50.2,18.8z"/>
|
||||
<path class="logo-color" d="M86.8,20.1c-1.5,0-2.7-0.4-3.6-1.3c-0.9-0.9-1.4-2-1.4-3.4c0-1.4,0.5-2.6,1.4-3.6c1-0.9,2.2-1.4,3.8-1.4
|
||||
c0.9,0,1.6,0.1,2.2,0.4c0.6,0.3,1.3,0.7,1.9,1.4l3.5-1.9c-0.8-1.2-1.9-2.1-3.2-2.8c-1.3-0.7-2.8-1-4.4-1c-1.8,0-3.4,0.4-4.8,1.2
|
||||
c-1.4,0.8-2.6,1.8-3.4,3.2c-0.8,1.3-1.2,2.8-1.2,4.4c0,2.3,0.8,4.3,2.5,6.1c1.6,1.7,3.9,2.6,6.8,2.6c3.2,0,5.7-1.2,7.5-3.5
|
||||
l-3.3-2.2C90.1,19.5,88.6,20.1,86.8,20.1z"/>
|
||||
<path class="logo-color" d="M34.2,5.7l-1.7,1.7c-1.1-0.6-2.4-1-3.7-1c-7.6,0-9.1,5.6-9.1,8.7c0,1.6,0.4,3.9,1.9,5.7
|
||||
c-1.4,2.2-2.9,6.2-1.7,9.8c0.3,1.4,1.1,2.6,2.3,3.7c1.6,1.5,3.6,2.2,5.9,2.2c0,0,0,0,0,0c0,0,0,0,0,0c2.3,0,4.3-0.7,5.9-2.2
|
||||
c1.6-1.5,2.4-3.3,2.4-5.4c0-2.2-1.4-3.2-3.3-3.2h-9.7c0.3-1.1,0.7-2.1,1.1-2.7c1.2,0.5,2.6,0.8,4.3,0.8c2.2,0,4.1-0.8,5.6-2.5
|
||||
c1.5-1.6,2.3-3.7,2.3-6.2c0-2-0.5-3.7-1.4-5.1l1.7-1.7L34.2,5.7z M32.6,29.5c-0.1,0.9-0.5,1.6-1.2,2.2c-0.9,0.9-2,1.3-3.4,1.3
|
||||
c0,0,0,0-0.1,0l0,0l0,0c0,0,0,0-0.1,0c-1.4,0-2.4-0.4-3.4-1.3c-0.7-0.7-1.1-1.4-1.2-2.2H32.6z M31.2,18.7c-0.9,0.9-1.9,1.4-3.2,1.4
|
||||
c-1.3,0-2.4-0.5-3.2-1.4c-0.9-0.9-1.3-2.1-1.3-3.6c0-1.4,0.4-2.6,1.3-3.5c0.9-0.9,1.9-1.3,3.3-1.3c1.3,0,2.4,0.5,3.2,1.4
|
||||
c0.8,0.9,1.3,2.1,1.3,3.5C32.5,16.6,32.1,17.8,31.2,18.7z"/>
|
||||
<rect x="71.4" y="6.9" class="logo-color" width="4.2" height="16.6"/>
|
||||
<circle class="logo-color" cx="73.5" cy="2.7" r="2.7"/>
|
||||
<rect x="38.3" y="25.9" class="logo-color" width="55.6" height="3.6"/>
|
||||
<rect x="0.8" y="25.9" class="logo-color" width="16.4" height="3.6"/>
|
||||
<path class="logo-color" d="M58.3,6.9v16.6h4.1v-8.6c0-3.2,1-4.7,3.1-4.7c0.7,0,1.4,0.3,2.1,0.8l1.8-3.5c-1.1-0.7-2.2-1-3.2-1
|
||||
c-0.8,0-1.4,0.1-2,0.4c-0.5,0.3-1.2,0.8-1.9,1.5V6.9H58.3z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="navbar-burger burger" data-target="navMenuColorblack-example">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="navbar-menu" class="navbar-menu">
|
||||
<div class="navbar-end">
|
||||
{{#each nav.mainnav}}
|
||||
{{#if children}}
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link {{state}}" href="{{href}}" title="{{label}}">{{label}}</a>
|
||||
<div class="navbar-dropdown">
|
||||
{{#each children}}
|
||||
<a class="navbar-item {{state}}" href="{{href}}" title="{{label}}">{{label}}</a>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<a class="navbar-item {{state}}" href="{{href}}" title="{{label}}">{{label}}</a>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
<div class="navbar-item">
|
||||
<a href="search.html" title="Search" class="navbar-item">
|
||||
<span class="icon"><span class="agc agc-search"></span></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<section class="section related" data-headerbg="light">
|
||||
<div class="container">
|
||||
<div class="titlebar titlebar-bigborder content">
|
||||
<div class="titlebar_title">
|
||||
<h3 class="subtitle is-mono is-4">Recent Initiatives</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<a href="#" class="card card-project is-small is-berry">
|
||||
<div class="card-image" style="background-image:url(../assets/img/fpo-stretch.jpg)">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p class="title">Drupal Training</p>
|
||||
<p class="subtitle">Ut wisi enim ad minim veniam</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
<a href="#" class="card card-project is-small is-blue">
|
||||
<div class="card-image" style="background-image:url(../assets/img/fpo-mentor-laptop.jpg)">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p class="title">May First / People Link</p>
|
||||
<p class="subtitle">Ut wisi enim ad minim veniam</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
<a href="#" class="card card-project is-small is-cinnamon">
|
||||
<div class="card-image" style="background-image:url(../assets/img/fpo-education.jpg)">
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p class="title">Drupal 8 Migration</p>
|
||||
<p class="subtitle">Ut wisi enim ad minim veniam</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
29
static-layouts/design-source/templates/recent_posts.hbs
Normal file
29
static-layouts/design-source/templates/recent_posts.hbs
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<section class="section related" data-headerbg="light">
|
||||
<div class="container">
|
||||
<div class="titlebar titlebar-bigborder content">
|
||||
<div class="titlebar_title">
|
||||
<h3 class="subtitle is-mono is-4">Recent Posts</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<a href="#" class="teaser">
|
||||
<p class="title is-5">Lorem ipsum dolor sit amet, ibhdiam nonummy nibh</p>
|
||||
<p class="subtitle is-6">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
<a href="#" class="teaser">
|
||||
<p class="title is-5 ">Dolor sit amet, consectetuer adipiscing elit, sed diam ibh</p>
|
||||
<p class="subtitle is-6">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
<a href="#" class="teaser">
|
||||
<p class="title is-5">Suscipit lobortis nisl ut aliquip ex ea commodo consequat</p>
|
||||
<p class="subtitle is-6">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
41
static-layouts/design-source/templates/recent_projects.hbs
Normal file
41
static-layouts/design-source/templates/recent_projects.hbs
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<section class="section related" data-headerbg="light">
|
||||
<div class="container">
|
||||
<div class="titlebar titlebar-bigborder content">
|
||||
<div class="titlebar_title">
|
||||
<h3 class="subtitle is-mono is-4">Recent Projects</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<a href="#" class="card card-project is-small 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 tool</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
<a href="#" class="card card-project is-small 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">
|
||||
<a href="#" class="card card-project is-small 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">Multi-lingual global website</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
32
static-layouts/design-source/templates/recent_updates.hbs
Normal file
32
static-layouts/design-source/templates/recent_updates.hbs
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<section class="section related" data-headerbg="light">
|
||||
<div class="container">
|
||||
<div class="titlebar titlebar-bigborder content">
|
||||
<div class="titlebar_title">
|
||||
<h3 class="subtitle is-mono is-4">Updates</h3>
|
||||
</div>
|
||||
<div class="titlebar_links">
|
||||
<a href="#">More</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<a href="#" class="teaser">
|
||||
<p class="title is-5 is-spaced">Lorem ipsum dolor sit amet, ibhdiam nonummy nibh</p>
|
||||
<p class="subtitle is-6">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
<a href="#" class="teaser">
|
||||
<p class="title is-5 is-spaced">Dolor sit amet, consectetuer adipiscing elit, sed diam ibh</p>
|
||||
<p class="subtitle is-6">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
<a href="#" class="teaser">
|
||||
<p class="title is-5 is-spaced">Suscipit lobortis nisl ut aliquip ex ea commodo consequat</p>
|
||||
<p class="subtitle is-6">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
35
static-layouts/design-source/templates/related_events.hbs
Normal file
35
static-layouts/design-source/templates/related_events.hbs
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<section class="section related" data-headerbg="light">
|
||||
<div class="container">
|
||||
<div class="titlebar titlebar-bigborder content">
|
||||
<div class="titlebar_title">
|
||||
<h3 class="subtitle is-mono is-4">Upcoming Events</h3>
|
||||
</div>
|
||||
<div class="titlebar_links">
|
||||
<a href="#">More</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<a href="#" class="teaser">
|
||||
<p class="title is-4">Oct 4 2017</p>
|
||||
<p class="title is-5">Lorem ipsum dolor sit amet</p>
|
||||
<p class="subtitle is-6">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
<a href="#" class="teaser">
|
||||
<p class="title is-4">Oct 4 2017</p>
|
||||
<p class="title is-5">Lorem ipsum dolor sit amet</p>
|
||||
<p class="subtitle is-6">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
<a href="#" class="teaser">
|
||||
<p class="title is-4">Oct 4 2017</p>
|
||||
<p class="title is-5">Lorem ipsum dolor sit amet</p>
|
||||
<p class="subtitle is-6">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
37
static-layouts/design-source/templates/show_and_tell.hbs
Normal file
37
static-layouts/design-source/templates/show_and_tell.hbs
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<section class="section related">
|
||||
<div class="container">
|
||||
<div class="titlebar titlebar-bigborder content">
|
||||
<div class="titlebar_title">
|
||||
<h3 class="subtitle is-4 is-mono">Show and Tell</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<a href="#" class="media teaser">
|
||||
<div class="media-left">
|
||||
<img src="../assets/img/fpo-definitive-guide.png" alt="">
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5 is-spaced">Definitive Drupal</p>
|
||||
<p class="subtitle is-6">Ben Melanon and Stefan Freudenberg are among the authors of the Definitive Guide to Drupal 7, the leading book covering Drupal configuration, code, and community.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
<a href="#" class="media teaser">
|
||||
<div class="media-left">
|
||||
<img src="../assets/img/fpo-coop-book.png" alt="">
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5 is-spaced">Platform Cooperativism Handbook</p>
|
||||
<p class="subtitle is-6">Micky Metts contributed a chapter to Ours to Hack and to Own: The Rise of Platform Cooperativism</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="title is-5 is-spaced">Want to see more?</p>
|
||||
<p class="subtitle is-6">We value learning new things and sharing our knowledge, so we take time each week to share with one another what we've discovered or figured out. <a href="#">Join us on Fridays for Show and Tell</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
80
static-layouts/design-source/templates/work_tiles.hbs
Normal file
80
static-layouts/design-source/templates/work_tiles.hbs
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
<div class="titlebar content">
|
||||
<div class="titlebar_title">
|
||||
<h3 class="subtitle is-mono is-4">Work</h3>
|
||||
</div>
|
||||
<div class="titlebar_links">
|
||||
<a href="#">More</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-vertical is-4">
|
||||
<div class="tile">
|
||||
<div class="tile is-vertical">
|
||||
<div class="tile">
|
||||
<div class="tile is-parent">
|
||||
<a href="#" class="tile 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>
|
||||
<div class="tile is-parent">
|
||||
<a href="#" class="tile 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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent is-8">
|
||||
<a href="#" class="tile is-child card card-project is-large 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>
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<a href="#" class="tile 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="tile is-parent ">
|
||||
<a href="#" class="tile 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="tile is-parent">
|
||||
<a href="#" class="tile 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue