resources/views/docs/history.blade.php
@extends('layouts.app')
@section('head')
<style>
.timeline .timeline-item::after, .timeline .timeline-item::before {
clear:both;
content:'';
display:block;
width:100%;
}
.timeline {
margin:30px auto;
padding:0 10px;
position:relative;
transition:all 0.25s ease-in;
width:100%;
}
.timeline::before {
background:#222;
content:'';
height:100%;
left:50%;
position:absolute;
top:0;
width:3px;
}
.timeline::after {
clear:both;
content:'';
display:table;
width:100%;
}
.timeline a {
color:#222;
font-weight:bold;
transition:all 0.25s ease-in;
}
.timeline a:hover {
box-shadow:0 1px 0px 0px #222;
transition:all 0.25s ease-in;
}
.timeline .timeline-item {
margin-bottom:50px;
position:relative;
}
.timeline .timeline-item .timeline-icon {
background:#222;
border-radius:50%;
height:50px;
left:50%;
margin-left:-23px;
overflow:hidden;
position:absolute;
top:0;
width:50px;
}
.timeline .timeline-item .timeline-icon img,
.timeline .timeline-item .timeline-icon svg {
left:14px;
position:relative;
top:11px;
}
.timeline .timeline-item .timeline-icon svg {
top:14px;
}
.timeline .timeline-item .timeline-content {
padding:20px;
text-align:right;
transition:all 0.25s ease-in;
width:45%;
background:transparent;
}
.timeline .timeline-item .timeline-content p {
color:#222;
}
.timeline .timeline-item .timeline-content p {
font-size:16px;
line-height:1.4;
margin-bottom:0;
}
.timeline .timeline-item .timeline-content .timeline-content-date {
font-size:16px;
font-weight:bold;
margin-bottom:0;
}
.timeline .timeline-item .timeline-content .timeline-content-month {
font-size:0.875rem;
text-transform:uppercase;
font-weight:400;
}
.timeline .timeline-item .timeline-content.right {
float:right;
text-align:left;
}
@media screen and (max-width:39.9375em) {
.timeline {
margin:30px;
padding:0;
width:90%;
}
.timeline::before {left:0}
.timeline .timeline-item .timeline-content {float:right;text-align:left;width:90%}
.timeline .timeline-item .timeline-content::before, .timeline .timeline-item .timeline-content.right::before {
border-left:0;
border-right:7px solid #222;
left:10%;
margin-left:-6px;
}
.timeline .timeline-item .timeline-icon {
left:0;
}
}
</style>
@endsection
@section('content')
<div class="timeline">
<div class="timeline-item">
<div class="timeline-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="#FFF" width="24" height="24" fill-rule="evenodd" clip-rule="evenodd"><path d="M9 21h-9v-2h9v2zm6.695-2.88l-3.314-3.13-1.381 1.47 4.699 4.54 8.301-8.441-1.384-1.439-6.921 7zm-6.695-1.144h-9v-2h9v2zm8-3.976h-17v-2h17v2zm7-4h-24v-2h24v2zm0-4h-24v-2h24v2z"/></svg>
</div>
<div class="timeline-content">
<p class="timeline-content-date">2008</p>
<p>The ZURB Style Guide is created to help us speed up our work. It’s a handy collection of HTML, CSS and Javascript that we use on every client project. The ideas of ZURB Style Guide evolve over the years and form the basis for a new framework, Foundation.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="#FFF" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3 8h-1.35c-.538 0-.65.221-.65.778v1.222h2l-.209 2h-1.791v7h-3v-7h-2v-2h2v-2.308c0-1.769.931-2.692 3.029-2.692h1.971v3z"/></svg>
</div>
<div class="timeline-content right">
<p class="timeline-content-date">2010</p>
<p>ZURB style guide was solidified and named Foundation. It is being used internally on all client projects and ZURB sites and apps.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="#FFF" width="24" height="24" fill-rule="evenodd" clip-rule="evenodd"><path d="M17 24h-10l-2-14h14l-2 14zm-.592-10h-8.816l.571 4h7.674l.571-4zm1.631-8c0 .922 1.092 1.618 1.961 1.618v1.382h-16v-1.382c.87 0 2-.697 2-1.618h12.039zm-7.73-.691c2.819-2.143-.594-2.353.077-3.868-2.361 2.113.85 2.169-.077 3.868zm2.486-.001c4.236-3.238-.877-3.067.105-5.308-3.382 2.895 1.259 2.959-.105 5.308z"/></svg>
</div>
<div class="timeline-content">
<p class="timeline-content-date">2011</p>
<p>
<a href="http://foundation.zurb.com/sites/docs/v/2.2.1/" target="_blank">Foundation 2.0</a> is released to the public as an open source project! Foundation is the first responsive front-end framework and helps lead the charge for RWD across the web.
</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="#FFF" width="24" height="24" fill-rule="evenodd" clip-rule="evenodd"><path d="M24 11.5c0 3.613-2.951 6.5-6.475 6.5-2.154 0-4.101-1.214-5.338-3h-2.882l-1.046-1.013-1.302 1.019-1.362-1.075-1.407 1.081-4.188-3.448 3.346-3.564h8.841c1.145-1.683 3.104-3 5.339-3 3.497 0 6.474 2.866 6.474 6.5zm-10.691 1.5c.98 1.671 2.277 3 4.217 3 2.412 0 4.474-1.986 4.474-4.5 0-2.498-2.044-4.5-4.479-4.5-2.055 0-3.292 1.433-4.212 3h-9.097l-1.293 1.376 1.312 1.081 1.38-1.061 1.351 1.066 1.437-1.123 1.715 1.661h3.195zm5.691-3.125c.828 0 1.5.672 1.5 1.5s-.672 1.5-1.5 1.5-1.5-.672-1.5-1.5.672-1.5 1.5-1.5z"/></svg>
</div>
<div class="timeline-content right">
<p class="timeline-content-date">2012</p>
<p>
<a href="http://foundation.zurb.com/sites/docs/v/3.2.5/" target="_blank">Foundation 3.0</a> is released! This version comes with Sass and is the first framework to use mixins and Sass partials.
</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="#FFF" width="24" height="24" fill-rule="evenodd" clip-rule="evenodd"><path d="M7.467 0c1.102.018 5.555 2.549 6.386 8.558.905-.889 1.409-3.664 1.147-4.843 3.952 2.969 6 6.781 6 11.034 0 5.094-3.43 9.251-8.963 9.251-5.728 0-9.037-3.753-9.037-8.276 0-6.26 5.052-7.62 4.467-15.724zm3.262 19.743c-.749.848-.368 1.945.763 2.045 1.035.093 1.759-.812 2.032-1.792.273-.978.09-2.02-.369-2.893-.998 1.515-1.52 1.64-2.426 2.64zm4.42 1.608c2.49-1.146 3.852-3.683 3.852-6.58 0-2.358-.94-4.977-2.5-7.04-.743 2.867-2.924 3.978-4.501 4.269.05-3.219-.318-6.153-2.602-8.438-.296 4.732-4.321 7.63-4.398 12.114-.029 1.511.514 3.203 1.73 4.415.491.489 1.054.871 1.664 1.16-.121-.608-.062-1.254.195-1.848.911-2.106 3.333-2.321 4.202-5.754.952.749 3.275 3.503 2.778 6.358-.082.469-.224.923-.42 1.344z"/></svg>
</div>
<div class="timeline-content">
<p class="timeline-content-date">2013 - <span class="timeline-content-month">february</span></p>
<p>This year saw not one, but three releases to Foundation! <a href="http://foundation.zurb.com/sites/docs/v/4.3.2/index.html" target="_blank">Version 4</a> went <a href="http://zurb.com/word/mobile-first" target="_blank">mobile first</a>, added many new components, and came with a visual update. Our responsive image plugin called <a href="http://foundation.zurb.com/sites/docs/v/4.3.2/components/interchange.html" target="_blank">Interchange</a> was added to Foundation to make sites built with it load even faster.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-icon">
<img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2017/96/iconmonstr-candy-26.png" class="" height="21" width="21" alt="">
</div>
<div class="timeline-content right">
<p class="timeline-content-date">2013 - <span class="timeline-content-month">november</span></p>
<p>Foundation 5 is all about speed. It made learning, using and developing with the framework faster than ever! More new components like <a href="http://foundation.zurb.com/docs/components/equalizer.html" target="_blank">Equalizer</a>, <a href="http://foundation.zurb.com/docs/components/offcanvas.html" target="_blank">Off-canvas</a>, and Icon-bar make a more complete package. Our responsive content plugin, <a href="http://foundation.zurb.com/sites/docs/v/4.3.2/components/interchange.html" target="_blank">Interchange</a> can now swap in HTML content and images based on screen size.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-icon">
<img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2017/96/iconmonstr-fast-food-10.png" class="" height="21" width="21" alt="">
</div>
<div class="timeline-content">
<p class="timeline-content-date">2013 - <span class="timeline-content-month">november</span></p>
<p><a href="http://foundation.zurb.com/emails.html" target="_blank">Foundation for Emails (formerly Ink)</a>, our responsive email framework is launched at the end of the year and helps designers easily create beautiful, responsive emails.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-icon">
<img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2017/96/iconmonstr-fast-food-12.png" class="" height="21" width="21" alt="">
</div>
<div class="timeline-content right">
<p class="timeline-content-date">2014 - <span class="timeline-content-month">november</span></p>
<p>We launched <a href="http://zurb.com/article/1362/foundation-for-apps-is-here" target="_blank">Foundation for Apps</a>, the first front-end framework created for developing fully responsive web apps.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-icon">
<img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2017/96/iconmonstr-fast-food-5.png" class="" height="21" width="21" alt="">
</div>
<div class="timeline-content">
<p class="timeline-content-date">2015</p>
<p><a href="http://zurb.com/article/1416/foundation-6-is-here" target="_blank">Foundation for Sites 6 is released</a>. Faster, lighter, more versatile, more flexible and more powerful than ever before to get your projects from Prototype to Production.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-icon">
<img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2017/96/iconmonstr-check-mark-18.png" class="" height="21" width="21" alt="">
</div>
<div class="timeline-content right">
<p class="timeline-content-date">2016</p>
<p><a href="http://zurb.com/article/1432/foundation-for-emails-2-is-here" target="_blank">Foundation for Emails 2</a> is launched, revolutionizing email development through a workflow that uses the latest web technologies.</p>
</div>
</div>
</div>
@endsection