forked from tetue/tinytypo
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·185 lines (167 loc) · 6.57 KB
/
index.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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!doctype html>
<html dir="ltr" lang="fr">
<head>
<meta charset="utf-8">
<title>Tiny Typo</title>
<meta name="description" content="Base CSS pour la typo web">
<meta name="author" content="romy.tetue.net">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/tinytypo.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
</head>
<body>
<div class="page">
<header role="banner">
<h1>Tiny Typo</h1>
</header>
<main role="main">
<section>
<p>Tiny Typo est une base CSS pour le <strong>contenu éditorial web</strong>. Elle fait le minimum typographique nécessaire à la rédaction de documents web. Ni perfectionniste, ni avant-gardiste, elle se veut simple et robuste. C'est pourquoi elle est en HTML et CSS, sans image, ni fonte, ni JavaScript, respectueuse des standards W3C, responsive, soucieuse d'accessibilité et facile à utiliser.<p>
<p>Pour faciliter la personnalisation, un minimum de couleurs et polices sont déclarées dans la base Tiny Typo. À vous de compléter dans votre propre feuille de style. Des sélecteurs CSS bien pratiques, complétant le HTML natif, sont mis à disposition pour vous faciliter la vie.</p>
</section>
<section id="download">
<h2 class="offscreen">Télécharger</h2>
<div class="lead text-center"><a href="https://github.com/tetue/tinytypo/archive/master.zip" class="btn big download">Télécharger Tiny Typo<br><small class="smaller">(.zip - 45 Ko)</small></a></p><br></div>
<div class="box">
<h3>Installation</h3>
<p>Téléchargez. Déposez le fichier <a href="css/tinytypo.css"><code>tinytypo.css</code></a> dans votre répertoire <code>css/</code>. Utilisez Tiny Typo dans vos pages :</p>
<pre class="text-center"><link rel="stylesheet" type="text/css" href="css/tinytypo.css"></pre>
<p class="text-right">C'est tout !</p>
</div>
<h3>Page de test</h3>
<p>Utilisez la page <a href="tinytypo.html"><code>tinytypo.html</code></a> pour tester votre style. Cette page affiche <strong>tous</strong> les éléments HTML natifs qui servent à rédiger sur le Web, tant HTML5, XHTML que HTML 4. Elle permet de prévisualiser les styles appliqués. Pour tester les styles en vigueur dans votre site, utilisez cette page seule — sans aucune des feuilles de style de Tiny Typo, mais avec les vôtres.</p>
<h3>Usage avancé</h3>
<p>Pour que vous puissiez choisir seulement ceux dont vous avez besoin, Tiny Typo est répartie en plusieurs fichiers, à appeler dans cet ordre :</p>
<dl>
<ol>
<li>
<dt><code>reset.css</code></dt>
<dd>Vous pouvez remplacer cette feuille par le reset de votre choix.</dd>
</li>
<li>
<dt><code>clear.css</code></dt>
<dd>Aides à la composition (alignements, espaceurs de blocs). Si vous utilisez un framework CSS, il est fort possible que cette feuille soit inutile.</dd>
</li>
<li>
<dt><code>font.css</code></dt>
<dd>Cette feuille est vierge. Elle sert à déclarer les polices de caractères que vous souhaitez utiliser.</dd>
</li>
<li>
<dt><code>typo.css</code></dt>
<dd>Base typographique définissant tous les éléments HTML ainsi que textes alignés, encadrés, etc. C'est la feuille principale de Tiny Typo.</dd>
</li>
<li>
<dt><code>links.css</code></dt>
<dd>Base signalétique des hyperliens.</dd>
</li>
<li>
<dt><code>media.css</code></dt>
<dd>Styles pour les médias, figures et albums.</dd>
</li>
<li>
<dt><code>custom.css</code></dt>
<dd>Cette feuille est vierge : elle est destinée à accueillir vos propres styles.</dd>
</li>
</ol>
</dl>
<h3>Variables LESS</h3>
<p>Tiny Typo est paramétrable en preprocessing <a href="http://lesscss.org" rel="external" class="external" hreflang="en">LESS</a>. Si vous souhaitez personnaliser davantage, redéfinissez ces variables, dans <code>var.less</code> :</p>
<table class="table" id="var">
<caption>Variables LESS</caption>
<thead>
<tr>
<th> </th>
<th>Variable</th>
<th>Usage</th>
<th>Valeur par défaut</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="4" class="text-right">Couleurs</th>
<td><code>@color-bg</code></td>
<td>Couleur du fond</td>
<td><var>#f8f8f8</var></td>
</tr>
<tr>
<td><code>@color-txt</code></td>
<td>Couleur du texte</td>
<td><var>#222</var></td>
</tr>
<tr>
<td><code>@color-mid</code></td>
<td>Couleur pour gris moyen et filets</td>
<td><var>#666</var></td>
</tr>
<tr>
<td><code>@color</code></td>
<td>Couleur principale du thème</td>
<td><var>#900</var></td>
</tr>
<tr>
<th rowspan="4" class="text-right">Fonts</th>
<td><code>@font1</code></td>
<td>Corps de texte principal</td>
<td><code>serif</code></td>
</tr>
<tr>
<td><code>@font2</code></td>
<td>Titraille</td>
<td><code>sans-serif</code></td>
</tr>
<tr>
<td><code>@font3</code></td>
<td>Code</td>
<td><code>monospace</code></td>
</tr>
<tr>
<td><code>@font4</code></td>
<td>Alternative, fantaisie (facultative)</td>
<td><code>fantasy</code></td>
</tr>
<tr>
<th rowspan="4" class="text-right">Typo</th>
<td><code>@font-size</code></td>
<td>Taille de texte de base</td>
<td><var>1em</var></td>
</tr>
<tr>
<td><code>@line-height</code></td>
<td>Interligne</td>
<td><var>1.5</var></td>
</tr>
<tr>
<td><code>@p</code></td>
<td>Marge basse des paragraphes</td>
<td><var>@line-height</var></td>
</tr>
<tr>
<td><code>@alinea</code></td>
<td>Alinea</td>
<td><var>@line-height</var></td>
</tr>
<tr>
<th rowspan="2" class="text-right">Liens</th>
<td><code>@color-link</code></td>
<td>Couleur des liens</td>
<td><var>@color-txt</var></td>
</tr>
<tr>
<td><code>@color-link-hover</code></td>
<td>Couleur des liens survolés</td>
<td><var>darken(@color-link, 15%)</var></td>
</tr>
</tbody>
</table>
<h3>Développement</h3>
<p>Tiny Typo est développée avec amour par <a href="http://romy.tetue.net" class="external">Romy Duhem-Verdière</a>, sur <a href="https://github.com/tetue/tinytypo" hreflang="en" class="external">Github</a>, et distribuée sous <a href="LICENSE" hreflang="en">licence MIT</a>.</p>
</section>
</main>
<footer role="contentinfo">
<hr>
<p><small>© 2010-2013 Tiny Typo v1.1 | <a href="http://tinytypo.tetue.net">tinytypo.tetue.net</a></small></p>
</footer>
</div><!--.page-->
</body>
</html>