Skip to content
This repository has been archived by the owner on Mar 20, 2024. It is now read-only.

Commit

Permalink
refactor: correct use of grid system on example pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@gillerr
gillerr committed Dec 20, 2017
1 parent 7fb74fb commit ae89e5e
Show file tree
Hide file tree
Showing 10 changed files with 1,291 additions and 1,159 deletions.
231 changes: 130 additions & 101 deletions src/example-pages/01.homepage-global-nav.twig
View file

Large diffs are not rendered by default.

196 changes: 101 additions & 95 deletions src/example-pages/02.home-without-nav.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,117 +53,123 @@
{% block sidebar_right %}{% endblock %}

{% block content %}
<div class="col-sm-12">

<div class="focus">

<!-- focus tabs -->
<ul class="nav nav-tabs nav-tabs-focus nav-justified">
<li class="active"><a href="#home" data-toggle="tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, similique</a></li>
<li><a href="#profile" data-toggle="tab">Nam voluptate minima</a></li>
<li><a href="#messages" data-toggle="tab">Lorem ipsum dolor sit amet</a></li>
<li><a href="#settings" data-toggle="tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></li>
</ul>
<div class="row">
<div class="col-sm-12">
<div class="focus">
<!-- focus tabs -->
<ul class="nav nav-tabs nav-tabs-focus nav-justified">
<li class="active"><a href="#home" data-toggle="tab">Lorem ipsum dolor sit amet, consectetur adipisicing
elit.
Nihil, similique</a></li>
<li><a href="#profile" data-toggle="tab">Nam voluptate minima</a></li>
<li><a href="#messages" data-toggle="tab">Lorem ipsum dolor sit amet</a></li>
<li><a href="#settings" data-toggle="tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></li>
</ul>

<div class="tab-content tab-border tab-focus">
<button class="tab-focus-control btn btn-sm"><span class="icon icon--pause"></span></button>
<div class="tab-content tab-border tab-focus">
<button class="tab-focus-control btn btn-sm"><span class="icon icon--pause"></span></button>

<!-- focus panes -->
<div class="tab-pane active in" id="home">
<div class="row">
<div class="col-sm-7"><img src="http://placehold.it/588x368/" alt="image description"></div>
<div class="col-sm-5">
<h4>Voluptates mollitia, consequuntur dignissimos maiores quasi?</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates mollitia, consequuntur dignissimos maiores quasi? Necessitatibus autem quisquam mollitia modi porro, libero totam. Vero ipsum iste labore, tempora optio, modi dolores.</p>
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
<!-- focus panes -->
<div class="tab-pane active in" id="home">
<div class="row">
<div class="col-sm-7"><img src="http://placehold.it/588x368/" alt="image description"></div>
<div class="col-sm-5">
<h4>Voluptates mollitia, consequuntur dignissimos maiores quasi?</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates mollitia, consequuntur
dignissimos maiores quasi? Necessitatibus autem quisquam mollitia modi porro, libero totam. Vero ipsum
iste labore, tempora optio, modi dolores.</p>
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="profile">
<div class="row">
<div class="col-sm-7"><img src="http://placehold.it/588x368/" alt="image description"></div>
<div class="col-sm-5">
<h4>Nam voluptate minima libero cumque.</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus quod id natus nesciunt atque tempore commodi fugiat dolorum porro.</p>
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
<div class="tab-pane" id="profile">
<div class="row">
<div class="col-sm-7"><img src="http://placehold.it/588x368/" alt="image description"></div>
<div class="col-sm-5">
<h4>Nam voluptate minima libero cumque.</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus quod id natus nesciunt atque tempore
commodi fugiat dolorum porro.</p>
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="messages">
<div class="row">
<div class="col-sm-7"><img src="http://placehold.it/588x368/" alt="image description"></div>
<div class="col-sm-5">
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque non asperiores itaque illo maxime, voluptatibus deserunt natus assumenda. In rem iste error cupiditate adipisci, qui quaerat! Magni quis reiciendis laborum dolores provident voluptatibus sequi, architecto necessitatibus assumenda delectus incidunt itaque expedita minima deserunt at, soluta ratione hic error ipsam fugit ducimus.</p>
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
<div class="tab-pane" id="messages">
<div class="row">
<div class="col-sm-7"><img src="http://placehold.it/588x368/" alt="image description"></div>
<div class="col-sm-5">
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque non asperiores itaque illo
maxime, voluptatibus deserunt natus assumenda. In rem iste error cupiditate adipisci, qui quaerat!
Magni quis reiciendis laborum dolores provident voluptatibus sequi, architecto necessitatibus
assumenda delectus incidunt itaque expedita minima deserunt at, soluta ratione hic error ipsam fugit
ducimus.</p>
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="settings">
<div class="row">
<div class="col-sm-7"><img src="http://placehold.it/588x368/" alt="image description"></div>
<div class="col-sm-5">
<h4>Lorem ipsum dolor sit.</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum saepe expedita reiciendis, aspernatur ad, fugit voluptate, officia possimus atque hic consequatur ut earum facilis omnis dolorem iusto! Reprehenderit, similique itaque, dolorem quam veritatis eaque ab consequatur tempore ullam deleniti explicabo.</p>
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
<div class="tab-pane" id="settings">
<div class="row">
<div class="col-sm-7"><img src="http://placehold.it/588x368/" alt="image description"></div>
<div class="col-sm-5">
<h4>Lorem ipsum dolor sit.</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum saepe expedita reiciendis, aspernatur
ad, fugit voluptate, officia possimus atque hic consequatur ut earum facilis omnis dolorem iusto!
Reprehenderit, similique itaque, dolorem quam veritatis eaque ab consequatur tempore ullam deleniti
explicabo.
</p>
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<br>

<div class="row">
<div class="col-sm-12">

<div class="list-group">

<div class="list-group-header">
<h2 class="pull-left">Themes</h2>
<a href="#" class="pull-right icon icon--before icon--list">all</a>
</div>
<div class="list-group">
<div class="list-group-header">
<h2 class="pull-left">Themes</h2>
<a href="#" class="pull-right icon icon--before icon--list">all</a>
</div>

<div class="row">
<div class="col-sm-4">
<p>
<img src="http://placehold.it/282x176" alt="Image description">
</p>
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc
loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse <a href="#">Metellum</a> quam Regulum.
</p>
<br>
<a href="#" class="icon icon--after icon--external">An external link</a>
</div>
<div class="col-sm-4">
<p>
<img src="http://placehold.it/282x176" alt="Image description">
</p>
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc
loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse <a href="#">Metellum</a> quam Regulum. Erit enim
mecum, si tecum erit. Ne amores quidem sanctos a sapiente alienos esse arbitrantur.
</p>
<br>
<a href="#" class="icon icon--after icon--external">An external link</a>
</div>
<div class="col-sm-4">
<p>
<img src="http://placehold.it/282x176" alt="Image description">
</p>
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc
loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse.
</p>
<br>
<a href="#" class="icon icon--after icon--external">An external link</a>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p>
<img src="http://placehold.it/282x176" alt="Image description">
</p>
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc
loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse <a href="#">Metellum</a> quam Regulum.
</p>
<br>
<a href="#" class="icon icon--after icon--external">An external link</a>
</div>
<div class="col-sm-4">
<p>
<img src="http://placehold.it/282x176" alt="Image description">
</p>
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc loco
Stoicos irridebat: Quid enim? Nihilo beatiorem esse <a href="#">Metellum</a> quam Regulum. Erit enim mecum, si
tecum erit. Ne amores quidem sanctos a sapiente alienos esse arbitrantur.
</p>
<br>
<a href="#" class="icon icon--after icon--external">An external link</a>
</div>
<div class="col-sm-4">
<p>
<img src="http://placehold.it/282x176" alt="Image description">
</p>
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc loco
Stoicos irridebat: Quid enim? Nihilo beatiorem esse.
</p>
<br>
<a href="#" class="icon icon--after icon--external">An external link</a>
</div>
</div>
</div>
Expand Down
102 changes: 59 additions & 43 deletions src/example-pages/03.preview.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,49 +10,65 @@
{% endblock %}

{% block content %}
<div class="col-sm-12">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
<div class="row">
<div class="col-sm-6">
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis, danda sunt omnia. Sed mehercule pergrata.
</p>
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis, danda sunt omnia. Sed mehercule pergrata.
</p>
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis, danda sunt omnia. Sed mehercule pergrata.
</p>
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis, danda sunt omnia. Sed mehercule pergrata.
</p>
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis, danda sunt omnia. Sed mehercule pergrata.
</p>
</div>
<div class="col-sm-6">
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis, danda sunt omnia. Sed mehercule pergrata.
</p>
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis, danda sunt omnia. Sed mehercule pergrata.
</p>
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis, danda sunt omnia. Sed mehercule pergrata.
</p>
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis, danda sunt omnia. Sed mehercule pergrata.
</p>
</div>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
<div class="row">
<div class="col-sm-6">
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui
fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis,
danda sunt omnia. Sed mehercule pergrata.
</p>
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui
fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis,
danda sunt omnia. Sed mehercule pergrata.
</p>
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui
fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis,
danda sunt omnia. Sed mehercule pergrata.
</p>
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui
fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis,
danda sunt omnia. Sed mehercule pergrata.
</p>
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui
fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis,
danda sunt omnia. Sed mehercule pergrata.
</p>
</div>
<div class="col-sm-6">
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui
fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis,
danda sunt omnia. Sed mehercule pergrata.
</p>
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui
fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis,
danda sunt omnia. Sed mehercule pergrata.
</p>
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui
fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis,
danda sunt omnia. Sed mehercule pergrata.
</p>
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui
fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis,
danda sunt omnia. Sed mehercule pergrata.
</p>
</div>
</div>
{% endblock %}
Loading

0 comments on commit ae89e5e

Please sign in to comment.