CSS - typo

Justification du texte

4 classes permettent d'indiquer très rapidement la justification pour le texte.

  • tl pour text-align:left
  • tr pour right
  • tc pour center
  • tj pour justify

Taille police et hauteur de lignes

Les classes fs80, fs90, fs100, fs120, fs150, fs200, fs300, fs400, fs500 augmentent en pourcentage la taille de la police.
Ces classes sont responsives : fss80 pour mobile et fsm80 pour tablette.

  • fs80
  • fs90
  • fs100
  • fs1200
  • fs150
  • fs200
  • fs300
  • fs400
  • fs500
<ul class="list-inline-none">
  <li class="fs80">fs80</li>
  ...
  <li class="fs500  fsm200 fss100">fs500</li>
</ul>

Les classes lh80, lh90, lh100, lh110, lh120, lh150 gèrent l'interlignage.
Ces classes sont responsives : lhs80 pour mobile et lhm80 pour tablette.

lh80 - ligne 1
ligne 2

lh90 - ligne 1
ligne 2

lh100 - ligne 1
ligne 2

lh110 - ligne 1
ligne 2

lh120 - ligne 1
ligne 2

lh150 lhm100 lhs80 - ligne 1
ligne 2

<p class="lh120"><strong>lh120</strong> - ligne 1<br>ligne 2</p>
<p class="lh150 lhm100 lhs80"><strong>lh150 lhm100 lhs80</strong> - ligne 1<br>ligne 2</p>

Gestion des césures et débordements

Les classes cesure et nocesure gèrent les retours à la ligne. scrollx et nowrap définissent l'affichage quand le retour à la ligne n'est pas autorisé.

cesure
Ce texte a pour avantage d'utiliser des mots de longueur variable et même très long comme anticonstitutionnellement, pour essayer de simuler une occupation normale.

nocesure
Ce texte a pour avantage d'utiliser des mots de longueur variable et même très long comme anticonstitutionnellement, pour essayer de simuler une occupation normale.

scrollx
La classe scrollx va ajouter un ascenceur au bas de la zone pour voir ce texte trop long.

nowrap
Ce texte va déborder du cadre car nowrap empêche les retours à la ligne.

Les listes

Liste à puces (sans puce)

Liste avec ul.list-none:
  • item 001
  • item 002
  • item 003
  • item 004
<ul class="list-none">
	<li>item 001</li>
	...
    <li>item 004</li>
</ul>
Liste avec ul.list-inline:
  • item 001
  • item 002
  • item 003
  • item 004
<ul class="list-inline">
	<li>item 001</li>
	...
    <li>item 004</li>
</ul>
Liste avec ul.list-inline-sep:
  • item 001
  • item 002
  • item 003
  • item 004
<ul class="list-inline-sep">
	<li>item 001</li>
	...
    <li>item 004</li>
</ul>
Liste avec ul.list-inline-dash:
  • item 001
  • item 002
  • item 003
  • item 004
<ul class="list-inline-dash">
	<li>item 001</li>
	...
    <li>item 004</li>
</ul>

Liste de définition

La classe dl.horiz permet d'afficher une liste de définition avec 2 colonnes sur grand écran et une seule sur les écrans plus petits.

terme 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis enim redargueret? Quoniam, si dis placet, ab Epicuro loqui discimus. Nobis aliter videtur, recte secusne, postea; Duo Reges: constructio interrete. His similes sunt omnes, qui virtuti student levantur vitiis, levantur erroribus, nisi forte censes Ti. Inscite autem medicinae et gubernationis ultimum cum ultimo sapientiae comparatur. Ut nemo dubitet, eorum omnia officia quo spectare, quid sequi, quid fugere debeant? Atque haec ita iustitiae propria sunt, ut sint virtutum reliquarum communia. Ita multo sanguine profuso in laetitia et in victoria est mortuus.
terme 2 assez long pour tester
Eiuro, inquit adridens, iniquum, hac quidem de re; Tamen a proposito, inquam, aberramus. Iam id ipsum absurdum, maximum malum neglegi. Laboro autem non sine causa; Non enim iam stirpis bonum quaeret, sed animalis. In his igitur partibus duabus nihil erat, quod Zeno commutare gestiret.
terme 3
Et harum quidem rerum facilis est et expedita distinctio. Bona autem corporis huic sunt, quod posterius posui, similiora. Nihil opus est exemplis hoc facere longius. Deinde prima illa, quae in congressu solemus: Quid tu, inquit, huc?
<dl class="horiz">
  <dt>terme 1</dt>
  <dd>Lorem ipsum ... </dd>
  <dt>terme 2 assez long pour tester</dt>
  <dd>Eiuro, ...</dd>
  <dt>terme 3</dt>
  <dd>Et harum ...</dd>
</dl>

Texte sur plusieurs colonnes

Les 2 classes text-col-2 et text-col-3 affiche le texte sur 2 ou 3 colonnes sur les écrans larges.
text-col-no-break autour d'un bloc interne le maintient dans la même colonne.

Texte sur 3 colonnes

Thalassius vero ea tempestate praefectus praetorio praesens ipse quoque adrogantis ingenii, considerans incitationem eius ad multorum augeri discrimina, non maturitate vel consiliis mitigabat, ut aliquotiens celsae potestates iras principum molliverunt, sed adversando iurgandoque cum parum congrueret, eum ad rabiem potius evibrabat, Augustum actus eius exaggerando creberrime docens, idque, incertum qua mente, ne lateret adfectans. quibus mox Caesar acrius efferatus, velut contumaciae quoddam vexillum altius erigens, sine respectu salutis alienae vel suae ad vertenda opposita instar rapidi fluminis irrevocabili impetu ferebatur.

Ac ne quis a nobis hoc ita dici forte miretur, quod alia quaedam in hoc facultas sit ingeni, neque haec dicendi ratio aut disciplina, ne nos quidem huic uni studio penitus umquam dediti fuimus. Etenim omnes artes, quae ad humanitatem pertinent, habent quoddam commune vinculum, et quasi cognatione quadam inter se continentur.

Ardeo, mihi credite, Patres conscripti (id quod vosmet de me existimatis et facitis ipsi) incredibili quodam amore patriae, qui me amor et subvenire olim impendentibus periculis maximis cum dimicatione capitis, et rursum, cum omnia tela undique esse intenta in patriam viderem, subire coegit atque excipere unum pro universis. Hic me meus in rem publicam animus pristinus ac perennis cum C. Caesare reducit, reconciliat, restituit in gratiam.

Texte sur 3 colonnes

Thalassius vero ea tempestate praefectus praetorio praesens ipse quoque adrogantis ingenii, considerans incitationem eius ad multorum augeri discrimina, non maturitate vel consiliis mitigabat, ut aliquotiens celsae potestates iras principum molliverunt, sed adversando iurgandoque cum parum congrueret, eum ad rabiem potius evibrabat, Augustum actus eius exaggerando creberrime docens, idque, incertum qua mente, ne lateret adfectans. quibus mox Caesar acrius efferatus, velut contumaciae quoddam vexillum altius erigens, sine respectu salutis alienae vel suae ad vertenda opposita instar rapidi fluminis irrevocabili impetu ferebatur.

Ac ne quis a nobis hoc ita dici forte miretur, quod alia quaedam in hoc facultas sit ingeni, neque haec dicendi ratio aut disciplina, ne nos quidem huic uni studio penitus umquam dediti fuimus. Etenim omnes artes, quae ad humanitatem pertinent, habent quoddam commune vinculum, et quasi cognatione quadam inter se continentur.

Ardeo, mihi credite, Patres conscripti (id quod vosmet de me existimatis et facitis ipsi) incredibili quodam amore patriae, qui me amor et subvenire olim impendentibus periculis maximis cum dimicatione capitis, et rursum, cum omnia tela undique esse intenta in patriam viderem, subire coegit atque excipere unum pro universis. Hic me meus in rem publicam animus pristinus ac perennis cum C. Caesare reducit, reconciliat, restituit in gratiam.

<div class="text-col-2">
<p>Thalassius ....</p>
<div class="text-col-no-break"> <p>Ac ne quis ....</p>
</div>
<p>Ardeo, mihi ....</p>
</div>
<div class="text-col-3">
<p>Thalassius ....</p>
</div>

Famille de polices

Ces 2 classes appellent des polices déjà présentes sur le poste client.

<span class="ff-mono"> : 'Lucida Console', Monaco, monospace

<span class="ff-cursive"> : 'Comic Sans MS', cursive

Badge

<span class="badge"> il est possible que l'aspect soit celui de la classe de même nom de votre template

<span class="badge-rouge"> <span class="badge-bleu"> <span class="badge-vert">

Il est possible de modifier l'aspect par l'ajout d'autres classes

<span class="badge-rouge t-jaune"> <span class="badge-bleu ff-mono"> <span class="badge-vert bg-vertFonce ph3">