Devenet Devenet

 Ce document est en cours d’écriture. Il est amené à évoluer régulièrement.

Système de conception

Ce système de conception (ou design system en anglais) regroupe les différents éléments et composants réutilisables, ainsi que les bonnes pratiques pour la conception de mes sites.

La version actuelle est 2.6-alpha.

Vue d’ensemble

L’idée générale est d’utiliser les éléments HTML sémantiques les plus appropriés, dont les plus utilisés sont supportés dans ce système de conception.

La structure de base est modélisée dans l’exemple du squelette : le support mobile d’abord puis le support tablette et ordinateur, la typographie et les couleurs du thème, ainsi que le favicon et les balises SEO basiques.

Devenet Devenet

Squelette

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fermentum mi mi, in vulputate ipsum porta eu. Duis libero nisi, commodo id eros sed, tincidunt eleifend sem. Curabitur in viverra tellus.

Code HTML du squelette 
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">

    <link rel="preconnect" href="https://dstatic.eu" crossorigin>
    <link rel="dns-prefetch" href="https://dstatic.eu">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://dstatic.eu/devenet.eu/assets/css/v2/devenet.min.css">
    <link rel="stylesheet" href="https://dstatic.eu/c/font/inter/inter.min.css">

    <title></title>
    <meta name="author" content="Nicolas Devenet">
    <meta name="copyright" content="Nicolas Devenet">
    <meta name="robots" content="">
    <link rel="canonical" href="">
    <meta name="description" content="">

    <link rel="apple-touch-icon" sizes="180x180" href="https://dstatic.eu/devenet.eu/assets/icon/dt/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="https://dstatic.eu/devenet.eu/assets/icon/dt/favicon.png">
    <link rel="icon" type="image/png" sizes="192x192" href="https://dstatic.eu/devenet.eu/assets/icon/dt/android-chrome-192x192.png">
    <link rel="icon" type="image/png" sizes="16x16" href="https://dstatic.eu/devenet.eu/assets/icon/dt/favicon-16x16.png">
    <link rel="manifest" href="https://dstatic.eu/devenet.eu/assets/icon/dt/site.webmanifest">
    <link rel="mask-icon" href="https://dstatic.eu/devenet.eu/assets/icon/dt/safari-pinned-tab.svg" color="#098bff">
    <link rel="shortcut icon" href="https://dstatic.eu/devenet.eu/assets/icon/dt/favicon.ico">
    <meta name="msapplication-TileColor" content="#098bff">
    <meta name="msapplication-config" content="https://dstatic.eu/devenet.eu/assets/icon/dt/browserconfig.xml">
    <meta name="theme-color" content="#f8fdff">
  </head>
  <body>
    <header class="header">
      <div class="container header-container">
        <a href="https://www.devenet.eu" class="header-link-devenet" title="Devenet">
          <img src="https://dstatic.eu/devenet.eu/assets/img/devenet/devenet.svg" alt="Devenet" height="40" width="200">
          <span class="visu-hidden">Devenet</span>
        </a>
      </div>
    </header>

    <main class="container">
      <h1></h1>
    </main>

    <footer class="footer"></footer>
    <script src="https://dstatic.eu/devenet.eu/assets/js/v2/devenet.min.js" defer></script>
  </body>
</html>

Le squelette charge trois ressources pour bénéficier du système de conception.

Fichier Utilité
devenet.min.css Les éléments de style CSS généraux.
inter.min.css La police personnalisée Inter.
devenet.min.js Les éléments JS (optionnels) généraux.

Pour les mises en page spécifiques qui ne seraient pas supportées :

Mise en page

Par défaut, le contenu prend toute la largeur de la fenêtre, sans marge. En dessous de 550 px, la taille de la police est réduite (correspond à 16 px) et le menu est replié. Au-delà, la taille de la police est nominale (correspond à 18 px) et le menu est déplié et entièrement visible.

Voir l’exemple de mises en page.

Les classes CSS .container-max et .container permettent de modifier le comportement du contenu selon la largeur de la fenêtre :

Fenêtre Taille de police Menu .container-max .container
< 550 px réduite (16 px) replié 100 % de la largeur (sans marge) 100 % de la largeur (sans marge)
≥ 550 px nominale (18 px) visible
≥ 820 px 100 % de la largeur (avec marge) 800 px maximum
≥ 1 200 px 1 000 px maximum

Note : l’élément <main> a une marge interne pour les fenêtres inférieures à 820 px.

Thème

Couleurs

La couleur officielle des logos est #098bff. Pour des raisons d’accessibilité, c’est une autre couleur bleue proche qui doit être utilisée : #0075db.

devenet
blue

À partir du bleu de référence, on a les variations plus claires et foncées.

blue-bg
blue-lighter
blue-light
blue
blue-dark
blue-darker

Polices

La police par défaut est Inter.
Elle est déjà chargée dans le squellete. Les ligatures dlig (discrétionnaires comme fi), ss03 (apostrophe et virgule rondes) et cv05 (lettre l alternative) sont spécifiquement activées.

Dès Noël, où un zéphyr haï me vêt de glaçons würmiens, je dîne d’exquis rôtis de bœuf au kir, à l’aÿ d’âge mûr, & ætera.

Pour les extraits de code, c’est la police IBM Plex Mono utilisée.
Il faut spécifiquement charger le fichier CSS.

Dès Noël, où un zéphyr haï me vêt de glaçons würmiens, je dîne d’exquis rôtis de bœuf au kir, à l’aÿ d’âge mûr, & ætera.

Pour les citations ou certains textes, la police Source Serif Pro peut être utilisée.
Il faut spécifiquement charger le fichier CSS.

Dès Noël, où un zéphyr haï me vêt de glaçons würmiens, je dîne d’exquis rôtis de bœuf au kir, à l’aÿ d’âge mûr, & ætera.

Contenu

Typographie

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nulla lectus, pellentesque ut metus sed, tristique blandit risus. Vivamus mattis odio luctus enim condimentum, non accumsan turpis luctus. Morbi ultricies eget tellus rhoncus dictum.

Sed eget imperdiet eros. Morbi at nulla sit amet nunc interdum mattis eu egestas tortor. Vestibulum auctor elementum mauris faucibus pulvinar. Cras efficitur, felis ut sodales scelerisque, ante nisi hendrerit sapien, nec cursus dui ante a ante.

Titres

Titre de niveau 1

Titre de niveau 2

Titre de niveau 3

Titre de niveau 4

Titre de niveau 5
Titre de niveau 6
  1. Nunc egestas ex quam.
  2. Eget consectetur nunc.
  3. Faucibus quis.

Praesent tortor mi, mollis ac egestas at, placerat a justo. Aliquam in lectus tincidunt velit egestas hendrerit eu non odio. Vestibulum id ipsum accumsan, tincidunt tortor non, rhoncus nisl. Maecenas commodo massa ac tellus ullamcorper, quis consequat eros pharetra.

Integer accumsan lorem magna, et facilisis libero posuere id. Duis eget laoreet metus. Pellentesque volutpat magna vitae posuere placerat. Vestibulum consequat facilisis pulvinar. Fusce bibendum dolor et molestie vestibulum.

Etiam magna turpis, pulvinar in orci sit amet, sagittis posuere nibh. Nunc consequat, massa semper gravida tincidunt, quam neque sollicitudin purus, eu bibendum augue massa a nibh.

— Lorem ipsum

Integer eu placerat sem. Nam mattis eros ut scelerisque consectetur. Donec condimentum mi justo, sed ultrices urna fringilla eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Formulaires



Composants

Duis et tortor pharetra, gravida mauris et, elementum odio. Aenean sit amet magna quis ligula ornare rutrum. Mauris lorem magna, pretium non mi ut, pretium varius nisl. Sed lobortis, elit in sollicitudin semper, erat metus accumsan turpis, vehicula laoreet dolor nunc sed neque. Phasellus eget ex felis. Vestibulum dictum massa aliquet auctor sodales. Donec sodales eleifend venenatis. Sed consectetur non justo in eleifend.

Phasellus arcu dui, lobortis volutpat sem id, auctor consequat eros. In lobortis auctor eros, in tempor lacus ullamcorper ut. Phasellus sed libero purus. Sed lectus neque, elementum sit amet rutrum ultrices, euismod sed sapien. Pellentesque ut dolor erat.

Lorem ispsum dolor sit amet
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p>The following is displayed by PHP: <?php echo 'Hello world!'; ?>.</p>
  </body>
</html>