forked from Dovyski/Waker
-
Notifications
You must be signed in to change notification settings - Fork 0
/
dossier-03.html
100 lines (73 loc) · 7.56 KB
/
dossier-03.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!--
This is an ordinary content page.
For more information, see dossier-01.html.
-->
<img src="./img/dossier-03/dossier-start-bg.jpg" class="media-headline" />
<h1>Columns and images</h1>
<div class="full-column float-left">
<p>Waker has a set of pre-configured css classes that can be used to organize texts, images and columns. You can create a column using the following structure:</p>
<p>
<pre>
<div class="large-column float-left">
<p> (...) </p>
</div>
</pre>
</p>
</div>
<div class="full-column">
<img src="./img/dossier-03/image-ant.png" class="media-right" />
<p>There are four classes of columns: <code>full-column</code> (fill the entire page width), <code>large-column</code>, <code>medium-column</code> and <code>small-column</code>. Excluding the <code>full-column</code> all other columns can float left or right in the page since they don't fill it completly. In order to make a column float left or right, add the <code>float-left</code> or <code>float-right</code> classes.</p>
<p>Images can be positioned using the <code>media-right</code>, <code>media-left</code>, <code>media-center</code> and <code>media-headline</code> classes. Those classes also resize the image to make it fit better into the page. If an image has no class, then it will be displayed as-is.</p>
<p>
<pre>
<img src="path/img.png" class="media-right" />
</pre>
</p>
<p>The following sections demonstrate the positioning classes.</p>
</div>
<div class="large-column new-line">
<h2>Image demonstration</h2>
</div>
<div class="full-column">
<img src="./img/dossier-03/image-ant.png" class="media-left" />
<p>The image at the beginning of this dossier (the big orange one) has the <code>media-headline</code> class in action. It makes the image fill completly the page, adjusting its size to fit the area.</p>
<p>The image of an ant featured above has the <code>media-right</code> class in action, so it will float to the right of the page. Its size will be adjusted to fit the page. The image on the left of this text has the <code>media-left</code> class.</p>
<p>The image below has the <code>media-center</code> class in action, which will make the image to adjust its size to fill almost all page content.</p>
<img src="./img/dossier-03/image-ant.png" class="media-center" />
</div>
<div class="large-column new-line">
<h2>Columns demonstration</h2>
</div>
<div class="full-column">
<p>Class: <code>"full-column"</code><br />Morbi semper ultrices porta. Aenean dignissim, sapien eget sodales mollis, massa urna malesuada elit, sit amet vulputate justo augue in massa. Praesent mattis accumsan blandit. Mauris nec enim ante. Sed fringilla interdum eros, nec lacinia turpis iaculis vel. Vestibulum leo ipsum, consequat a dignissim sit amet, egestas in urna. Donec nisl velit, pulvinar id ullamcorper vitae, imperdiet et leo. Donec ultricies cursus varius. Pellentesque elit arcu, pulvinar in fermentum non, faucibus eu quam. Suspendisse mollis aliquam sagittis. Vestibulum pellentesque accumsan arcu, vitae mattis tellus luctus id. Vivamus sed condimentum leo.</p>
</div>
<div class="large-column float-left">
<p>Class: <code>"large-column float-left"</code><br />Donec molestie dui et nisl posuere volutpat rhoncus mauris porta. Etiam blandit dui at leo rutrum sed tempus erat rutrum. Nunc ac mauris risus, sed sagittis elit. Nulla sed mi at neque aliquam rutrum. Donec sed est in justo commodo convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut tellus justo, scelerisque vitae accumsan tempus, volutpat vel risus. Pellentesque vitae elit et enim tristique porta porttitor at dolor. Suspendisse elementum mattis congue. Proin elementum, tellus sit amet ullamcorper cursus, augue libero hendrerit massa, placerat viverra velit tellus nec urna.</p>
</div>
<div class="medium-column float-left">
<p>Class: <code>"medium-column float-left"</code><br />Donec molestie dui et nisl posuere volutpat rhoncus mauris porta. Etiam blandit dui at leo rutrum sed tempus erat rutrum. Nunc ac mauris risus, sed sagittis elit. Nulla sed mi at neque aliquam rutrum. Donec sed est in justo commodo convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut tellus justo, scelerisque vitae accumsan tempus, volutpat vel risus. Pellentesque vitae elit et enim tristique porta porttitor at dolor. Suspendisse elementum mattis congue. Proin elementum, tellus sit amet ullamcorper cursus, augue libero hendrerit massa, placerat viverra velit tellus nec urna.</p>
</div>
<div class="medium-column float-right">
<p>Class: <code>"medium-column float-right"</code><br />Donec molestie dui et nisl posuere volutpat rhoncus mauris porta. Etiam blandit dui at leo rutrum sed tempus erat rutrum. Nunc ac mauris risus, sed sagittis elit. Nulla sed mi at neque aliquam rutrum. Donec sed est in justo commodo convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut tellus justo, scelerisque vitae accumsan tempus, volutpat vel risus. Pellentesque vitae elit et enim tristique porta porttitor at dolor. Suspendisse elementum mattis congue. Proin elementum, tellus sit amet ullamcorper cursus, augue libero hendrerit massa, placerat viverra velit tellus nec urna.</p>
</div>
<div class="large-column float-right">
<p>Class: <code>"large-column float-right"</code><br />Morbi semper ultrices porta. Aenean dignissim, sapien eget sodales mollis, massa urna malesuada elit, sit amet vulputate justo augue in massa. Praesent mattis accumsan blandit. Mauris nec enim ante. Sed fringilla interdum eros, nec lacinia turpis iaculis vel. Vestibulum leo ipsum, consequat a dignissim sit amet, egestas in urna. Donec nisl velit, pulvinar id ullamcorper vitae, imperdiet et leo. Donec ultricies cursus varius. Pellentesque elit arcu, pulvinar in fermentum non, faucibus eu quam. Suspendisse mollis aliquam sagittis. Vestibulum pellentesque accumsan arcu, vitae mattis tellus luctus id. Vivamus sed condimentum leo.</p>
</div>
<div class="small-column float-left">
<p>Class: <code>"small-column float-left"</code><br />Donec molestie dui et nisl posuere volutpat rhoncus mauris porta.</p>
</div>
<div class="medium-column float-left">
<p>Class: <code>"medium-column float-left"</code><br />Donec molestie dui et nisl posuere volutpat rhoncus mauris porta. Etiam blandit dui at leo rutrum sed tempus erat rutrum. Nunc ac mauris risus, sed sagittis elit. Nulla sed mi at neque aliquam rutrum. Donec sed est in justo commodo convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut tellus justo, scelerisque vitae accumsan tempus, volutpat vel risus. Pellentesque vitae elit et enim tristique porta porttitor at dolor. Suspendisse elementum mattis congue. Proin elementum, tellus sit amet ullamcorper cursus, augue libero hendrerit massa, placerat viverra velit tellus nec urna.</p>
</div>
<div class="small-column float-right">
<p>Class: <code>"small-column float-right"</code><br />Morbi semper ultrices porta. Aenean dignissim, sapien eget sodales mollis.</p>
</div>
<div class="small-column float-right">
<p>Class: <code>"small-column float-right"</code><br />Morbi semper ultrices porta. Aenean dignissim, sapien eget sodales mollis.</p>
</div>
<div class="small-column float-right">
<p>Class: <code>"small-column float-right"</code><br />Morbi semper ultrices porta. Aenean dignissim, sapien eget sodales mollis.</p>
</div>
<div class="small-column float-right">
<p>Class: <code>"small-column float-right"</code><br />Morbi semper ultrices porta. Aenean dignissim, sapien eget sodales mollis.</p>
</div>