Éléments de référence
Cette page montre le potentiel typographique et iconographique de Massively
Texte
Voici un mot en gras et le dernier mot de cette première phrase est un mot important. Voici un mot en italique et le mot qui termine cette phrase est balisé comme terme emphatique. Voici maintenant un texte placé en exposant et le texte qui suit est placé en indice ... Le mot “souligné”, un peu plus loin, est souligné et voici comment le code est affiché : for (;;) { ... }. Pour terminer voici comment s'affiche un lien.
Titres
Voici quelles sont les possibilités offertes par Massively pour utiliser les titres de différents niveaux
Titre de niveau 3
Titre de niveau 4
Titre de niveau 5
Titre de niveau 6
Il est possible d'associer aux titres des sous-titres affichés en italique.
Titre de niveau 2 avec sous-titre
Pour que cette ligne s'affiche ainsi, le titre et le paragraphe qui vient immédiatement après sont balisés spécialement
Le titre ci-dessus et le premier paragraphe qui le suit sont placés ensemble entre les balises <header> et </header>. La feuille de style CSS du thème Massively est paramétrée pour que, dans un header le premier paragraphe succédant à un titre s'affiche en italique et que la marge en pied du premier paragraphe soit plus marquée.
Le balisage spécifique mentionné ici doit être effectué directement dans le code HTML de la page. Ce mode d'édition est accessible en cliquant sur le bouton <>, dans l'éditeur de code de Bludit.
Titre de niveau 2 sans sous-titre
Ce paragraphe n'est pas associé au titre précédent par un balisage particulier.
Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.
Titre de niveau 3 avec sous-titre
Lorem ipsum dolor sit amet nullam id egestas urna aliquam
Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.
Titre de niveau 4 avec sous-titre
Lorem ipsum dolor sit amet nullam id egestas urna aliquam
Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.
Listes et icônes
Les listes et les icônes de réseaux sociaux présentés ci-dessous sont disposées en 2 colonnes, en utilisant la grille adaptative incluse dans la feuille de style du thème Massively. Cette grille se met en place directement dans le code HTML de la page en utilisant des divisions avec les classes appropriées, à la manière des grilles adaptatives des frameworks w3.css et Bootstrap.
L'affichage des icônes de réseaux sociaux s'effectue par l'appel des icônes de FontAwesome et de plusieurs classes appropriées.
Liste non ordonnée
- Dolor pulvinar etiam.
- Sagittis lorem eleifend.
- Felis feugiat dolore viverra.
- Dolor pulvinar etiam.
Liste ordonnée
- Dolor pulvinar etiam.
- Etiam vel felis at viverra.
- Felis enim feugiat magna.
- Etiam vel felis nullam.
- Felis enim et tempus.
Définitions
La stylisation des définitions est liée au balisage sémantique des termes utilisés, directement dans le code HTML. dans Massively, cette stylisation se limite à l'engraissement des items à définir et à l'indentation des définitions de ces items.
- Item 1
-
Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.
- Item 2
-
Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.
- Item 3
-
Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.
Boutons d'appel à l'actions
Voici comment sont stylisés les boutons d'appel à l'action (CTA) dans Massively.
Citation
Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis.
Tableaux
Présentation par défaut
Cette présentation affiche le tableau sans séparateurs verticaux entre les colonnes.
| Name | Description | Price |
|---|---|---|
| Item 1 | Ante turpis integer aliquet porttitor. | 29.99 |
| Item 2 | Vis ac commodo adipiscing arcu aliquet. | 19.99 |
| Item 3 | Morbi faucibus arcu accumsan lorem. | 29.99 |
| Item 4 | Vitae integer tempus condimentum. | 19.99 |
| Item 5 | Ante turpis integer aliquet porttitor. | 29.99 |
| 100.00 | ||
Présentation alternative
Cette présentation alternative affiche des séparateurs verticaux entre les colonnes.
| Name | Description | Price |
|---|---|---|
| Item 1 | Ante turpis integer aliquet porttitor. | 29.99 |
| Item 2 | Vis ac commodo adipiscing arcu aliquet. | 19.99 |
| Item 3 | Morbi faucibus arcu accumsan lorem. | 29.99 |
| Item 4 | Vitae integer tempus condimentum. | 19.99 |
| Item 5 | Ante turpis integer aliquet porttitor. | 29.99 |
| 100.00 | ||
Boutons
Formulaires
Images
Voici une image de 600 x 400 pixels, insérée via le tableau de bord de Bludit. Vous constaterez que cette image n'est pas redimentionnée sur les petits écrans.
Images redimensionnables
L'image qui suit fait aussi 600 x 400 pixels. Elle est redimensionnée sur les petits écrans... mais elle est aussi aggrandie sur les grands écrans ! La mention class="fit" a été rajoutée dans le code HTML permettant d'intégrer l'image dans la page.
Les images disposées sur la grille ci-dessous ne se positionnent pas les unes sous les autres sur les écrans de petite largeur. Elles s'adaptent cependant à la largeur des colonnes de la grille qui, ici reste en place sur les petits écrans. Pour que les images s'adaptent à la largeur des colonnes, il a été rajouté class="fit" à chaque image intégrée dans la grille.
L'image des bananes, placée au centre de la grille, est cliquable pour pouvoir afficher l'image dans un nouvel onglet ou une nouvelle fenêtre. L'image est alors affichée à sa taille réelle.
Notez que le comportement de la grille pourrait être modifié en ajoutant les classes appropriées aux divisions insérées dans les rangées de la grille. Comparez le code source de cette grille d'image avec le code source de la grille de présentation des listes, par exemple.
Images habillées par du texte
L'image ci-contre est stylisée avec class="image left". Observez comment cette image se redimensionne quand la largeur de la fenêtre de navigation diminue.
Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Vestibulum ante ipsum primis in faucibus magna blandit adipiscing eu felis iaculis. Blandit adipiscing eu ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus lorem ipsum dolor sit amet nullam. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum.
L'image insérée dans ce paragraphe est stylisée avec class="image right". Comme cette image présente un fond légèrement grisé, il est possible d'apprécier les marges séparant le texte des bords de l'image.
Si vous avez observé attentivement le comportement des images sur petit écran, vous avez certainement constaté qu'à partir de 320 pixels de largeur de fenêtre de navigation, la page affichée ne se redimensionne plus. Cette valeur peut être portée à 250 pixels en modifiant la seule mention de “320px” dans la feuille de style main.css (ligne 85).
Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Vestibulum ante ipsum primis in faucibus magna blandit adipiscing eu felis iaculis. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus. Blandit adipiscing eu ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus lorem ipsum dolor sit amet nullam.
Encadré
Ce texte de deux paragraphes est placé dans une division stylisée avec class="box". N'appliquez pas cette classe directement à un paragraphe mais placez bien le paragraphe à encadrer dans une division (même si vous envisagez d'encadrer un seul paragraphe).
Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis.
Code préformaté
<h2 style="color: #ff00dd; font-weight: 100;">Titre de niveau 2 rose et très maigre</h2>h2 {
color: #ff00dd;
font-weight: 100
}Attention, pour ne pas être pris en compte en tant qu'indicateurs de balise HTML, les chevrons doivent être saisis directement dans le code HTML de la page en tant que caractères spéciaux.
Source
Cette page est basée sur la page intitulée “Elements reference”, accessible sur le site de démonstration du thème Massively