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

Commit ae89e5e

Browse files
gillerrgillerr
committed
refactor: correct use of grid system on example pages
1 parent 7fb74fb commit ae89e5e

File tree

10 files changed

+1291
-1159
lines changed

10 files changed

+1291
-1159
lines changed

‎src/example-pages/01.homepage-global-nav.twig‎

Lines changed: 130 additions & 101 deletions
Large diffs are not rendered by default.

‎src/example-pages/02.home-without-nav.twig‎

Lines changed: 101 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -53,117 +53,123 @@
5353
{% block sidebar_right %}{% endblock %}
5454

5555
{% block content %}
56-
<div class="col-sm-12">
57-
58-
<div class="focus">
59-
60-
<!-- focus tabs -->
61-
<ul class="nav nav-tabs nav-tabs-focus nav-justified">
62-
<li class="active"><a href="#home" data-toggle="tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, similique</a></li>
63-
<li><a href="#profile" data-toggle="tab">Nam voluptate minima</a></li>
64-
<li><a href="#messages" data-toggle="tab">Lorem ipsum dolor sit amet</a></li>
65-
<li><a href="#settings" data-toggle="tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></li>
66-
</ul>
56+
<div class="row">
57+
<div class="col-sm-12">
58+
<div class="focus">
59+
<!-- focus tabs -->
60+
<ul class="nav nav-tabs nav-tabs-focus nav-justified">
61+
<li class="active"><a href="#home" data-toggle="tab">Lorem ipsum dolor sit amet, consectetur adipisicing
62+
elit.
63+
Nihil, similique</a></li>
64+
<li><a href="#profile" data-toggle="tab">Nam voluptate minima</a></li>
65+
<li><a href="#messages" data-toggle="tab">Lorem ipsum dolor sit amet</a></li>
66+
<li><a href="#settings" data-toggle="tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></li>
67+
</ul>
6768

68-
<div class="tab-content tab-border tab-focus">
69-
<button class="tab-focus-control btn btn-sm"><span class="icon icon--pause"></span></button>
69+
<div class="tab-content tab-border tab-focus">
70+
<button class="tab-focus-control btn btn-sm"><span class="icon icon--pause"></span></button>
7071

71-
<!-- focus panes -->
72-
<div class="tab-pane active in" id="home">
73-
<div class="row">
74-
<div class="col-sm-7"><img src="http://placehold.it/588x368/" alt="image description"></div>
75-
<div class="col-sm-5">
76-
<h4>Voluptates mollitia, consequuntur dignissimos maiores quasi?</h4>
77-
<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>
78-
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
72+
<!-- focus panes -->
73+
<div class="tab-pane active in" id="home">
74+
<div class="row">
75+
<div class="col-sm-7"><img src="http://placehold.it/588x368/" alt="image description"></div>
76+
<div class="col-sm-5">
77+
<h4>Voluptates mollitia, consequuntur dignissimos maiores quasi?</h4>
78+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates mollitia, consequuntur
79+
dignissimos maiores quasi? Necessitatibus autem quisquam mollitia modi porro, libero totam. Vero ipsum
80+
iste labore, tempora optio, modi dolores.</p>
81+
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
82+
</div>
7983
</div>
8084
</div>
81-
</div>
82-
<div class="tab-pane" id="profile">
83-
<div class="row">
84-
<div class="col-sm-7"><img src="http://placehold.it/588x368/" alt="image description"></div>
85-
<div class="col-sm-5">
86-
<h4>Nam voluptate minima libero cumque.</h4>
87-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus quod id natus nesciunt atque tempore commodi fugiat dolorum porro.</p>
88-
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
85+
<div class="tab-pane" id="profile">
86+
<div class="row">
87+
<div class="col-sm-7"><img src="http://placehold.it/588x368/" alt="image description"></div>
88+
<div class="col-sm-5">
89+
<h4>Nam voluptate minima libero cumque.</h4>
90+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus quod id natus nesciunt atque tempore
91+
commodi fugiat dolorum porro.</p>
92+
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
93+
</div>
8994
</div>
9095
</div>
91-
</div>
92-
<div class="tab-pane" id="messages">
93-
<div class="row">
94-
<div class="col-sm-7"><img src="http://placehold.it/588x368/" alt="image description"></div>
95-
<div class="col-sm-5">
96-
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
97-
<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>
98-
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
96+
<div class="tab-pane" id="messages">
97+
<div class="row">
98+
<div class="col-sm-7"><img src="http://placehold.it/588x368/" alt="image description"></div>
99+
<div class="col-sm-5">
100+
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
101+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque non asperiores itaque illo
102+
maxime, voluptatibus deserunt natus assumenda. In rem iste error cupiditate adipisci, qui quaerat!
103+
Magni quis reiciendis laborum dolores provident voluptatibus sequi, architecto necessitatibus
104+
assumenda delectus incidunt itaque expedita minima deserunt at, soluta ratione hic error ipsam fugit
105+
ducimus.</p>
106+
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
107+
</div>
99108
</div>
100109
</div>
101-
</div>
102-
<div class="tab-pane" id="settings">
103-
<div class="row">
104-
<div class="col-sm-7"><img src="http://placehold.it/588x368/" alt="image description"></div>
105-
<div class="col-sm-5">
106-
<h4>Lorem ipsum dolor sit.</h4>
107-
<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>
108-
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
110+
<div class="tab-pane" id="settings">
111+
<div class="row">
112+
<div class="col-sm-7"><img src="http://placehold.it/588x368/" alt="image description"></div>
113+
<div class="col-sm-5">
114+
<h4>Lorem ipsum dolor sit.</h4>
115+
<p>
116+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum saepe expedita reiciendis, aspernatur
117+
ad, fugit voluptate, officia possimus atque hic consequatur ut earum facilis omnis dolorem iusto!
118+
Reprehenderit, similique itaque, dolorem quam veritatis eaque ab consequatur tempore ullam deleniti
119+
explicabo.
120+
</p>
121+
<p><a href="#" class="icon icon--after icon--external">An external link</a></p>
122+
</div>
109123
</div>
110124
</div>
111125
</div>
112126
</div>
113127
</div>
114128
</div>
115129

116-
<br>
117-
118-
<div class="row">
119-
<div class="col-sm-12">
120-
121-
<div class="list-group">
122-
123-
<div class="list-group-header">
124-
<h2 class="pull-left">Themes</h2>
125-
<a href="#" class="pull-right icon icon--before icon--list">all</a>
126-
</div>
130+
<div class="list-group">
131+
<div class="list-group-header">
132+
<h2 class="pull-left">Themes</h2>
133+
<a href="#" class="pull-right icon icon--before icon--list">all</a>
134+
</div>
127135

128-
<div class="row">
129-
<div class="col-sm-4">
130-
<p>
131-
<img src="http://placehold.it/282x176" alt="Image description">
132-
</p>
133-
<h3><a href="#">Title in H3</a></h3>
134-
<p>
135-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc
136-
loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse <a href="#">Metellum</a> quam Regulum.
137-
</p>
138-
<br>
139-
<a href="#" class="icon icon--after icon--external">An external link</a>
140-
</div>
141-
<div class="col-sm-4">
142-
<p>
143-
<img src="http://placehold.it/282x176" alt="Image description">
144-
</p>
145-
<h3><a href="#">Title in H3</a></h3>
146-
<p>
147-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc
148-
loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse <a href="#">Metellum</a> quam Regulum. Erit enim
149-
mecum, si tecum erit. Ne amores quidem sanctos a sapiente alienos esse arbitrantur.
150-
</p>
151-
<br>
152-
<a href="#" class="icon icon--after icon--external">An external link</a>
153-
</div>
154-
<div class="col-sm-4">
155-
<p>
156-
<img src="http://placehold.it/282x176" alt="Image description">
157-
</p>
158-
<h3><a href="#">Title in H3</a></h3>
159-
<p>
160-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc
161-
loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse.
162-
</p>
163-
<br>
164-
<a href="#" class="icon icon--after icon--external">An external link</a>
165-
</div>
166-
</div>
136+
<div class="row">
137+
<div class="col-sm-4">
138+
<p>
139+
<img src="http://placehold.it/282x176" alt="Image description">
140+
</p>
141+
<h3><a href="#">Title in H3</a></h3>
142+
<p>
143+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc
144+
loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse <a href="#">Metellum</a> quam Regulum.
145+
</p>
146+
<br>
147+
<a href="#" class="icon icon--after icon--external">An external link</a>
148+
</div>
149+
<div class="col-sm-4">
150+
<p>
151+
<img src="http://placehold.it/282x176" alt="Image description">
152+
</p>
153+
<h3><a href="#">Title in H3</a></h3>
154+
<p>
155+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc loco
156+
Stoicos irridebat: Quid enim? Nihilo beatiorem esse <a href="#">Metellum</a> quam Regulum. Erit enim mecum, si
157+
tecum erit. Ne amores quidem sanctos a sapiente alienos esse arbitrantur.
158+
</p>
159+
<br>
160+
<a href="#" class="icon icon--after icon--external">An external link</a>
161+
</div>
162+
<div class="col-sm-4">
163+
<p>
164+
<img src="http://placehold.it/282x176" alt="Image description">
165+
</p>
166+
<h3><a href="#">Title in H3</a></h3>
167+
<p>
168+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc loco
169+
Stoicos irridebat: Quid enim? Nihilo beatiorem esse.
170+
</p>
171+
<br>
172+
<a href="#" class="icon icon--after icon--external">An external link</a>
167173
</div>
168174
</div>
169175
</div>

‎src/example-pages/03.preview.twig‎

Lines changed: 59 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -10,49 +10,65 @@
1010
{% endblock %}
1111

1212
{% block content %}
13-
<div class="col-sm-12">
14-
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
15-
<div class="row">
16-
<div class="col-sm-6">
17-
<h3><a href="#">Title in H3</a></h3>
18-
<p>
19-
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.
20-
</p>
21-
<h3><a href="#">Title in H3</a></h3>
22-
<p>
23-
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.
24-
</p>
25-
<h3><a href="#">Title in H3</a></h3>
26-
<p>
27-
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.
28-
</p>
29-
<h3><a href="#">Title in H3</a></h3>
30-
<p>
31-
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.
32-
</p>
33-
<h3><a href="#">Title in H3</a></h3>
34-
<p>
35-
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.
36-
</p>
37-
</div>
38-
<div class="col-sm-6">
39-
<h3><a href="#">Title in H3</a></h3>
40-
<p>
41-
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.
42-
</p>
43-
<h3><a href="#">Title in H3</a></h3>
44-
<p>
45-
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.
46-
</p>
47-
<h3><a href="#">Title in H3</a></h3>
48-
<p>
49-
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.
50-
</p>
51-
<h3><a href="#">Title in H3</a></h3>
52-
<p>
53-
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.
54-
</p>
55-
</div>
13+
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
14+
<div class="row">
15+
<div class="col-sm-6">
16+
<h3><a href="#">Title in H3</a></h3>
17+
<p>
18+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui
19+
fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis,
20+
danda sunt omnia. Sed mehercule pergrata.
21+
</p>
22+
<h3><a href="#">Title in H3</a></h3>
23+
<p>
24+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui
25+
fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis,
26+
danda sunt omnia. Sed mehercule pergrata.
27+
</p>
28+
<h3><a href="#">Title in H3</a></h3>
29+
<p>
30+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui
31+
fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis,
32+
danda sunt omnia. Sed mehercule pergrata.
33+
</p>
34+
<h3><a href="#">Title in H3</a></h3>
35+
<p>
36+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui
37+
fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis,
38+
danda sunt omnia. Sed mehercule pergrata.
39+
</p>
40+
<h3><a href="#">Title in H3</a></h3>
41+
<p>
42+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui
43+
fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis,
44+
danda sunt omnia. Sed mehercule pergrata.
45+
</p>
46+
</div>
47+
<div class="col-sm-6">
48+
<h3><a href="#">Title in H3</a></h3>
49+
<p>
50+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui
51+
fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis,
52+
danda sunt omnia. Sed mehercule pergrata.
53+
</p>
54+
<h3><a href="#">Title in H3</a></h3>
55+
<p>
56+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui
57+
fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis,
58+
danda sunt omnia. Sed mehercule pergrata.
59+
</p>
60+
<h3><a href="#">Title in H3</a></h3>
61+
<p>
62+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui
63+
fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis,
64+
danda sunt omnia. Sed mehercule pergrata.
65+
</p>
66+
<h3><a href="#">Title in H3</a></h3>
67+
<p>
68+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui
69+
fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis,
70+
danda sunt omnia. Sed mehercule pergrata.
71+
</p>
5672
</div>
5773
</div>
5874
{% endblock %}

0 commit comments

Comments
 (0)