Développeurs - Design System ANS

Fichiers statiques à télécharger

Le dossier .zip contient les fichiers CSS, JS, images et icônes SVG ainsi qu'une page HTML minimale pour démarrer.

Kit de démarrage

16 Jul 2024

poids : 589 Ko

type : ZIP

Configuration de votre projet

Il est nécessaire de respecter l'arborescence ci-dessous :


                    Racine du projet
                    └── img
                    └── script
                    └── style
                    └── svg-icons
                    └── index.html

Pour que les icônes SVG soient affichées correctement, les pages qui les utilisent doivent être livrées par un serveur web.

Page HTML minimale

Cette page constitue le socle de base de tout nouveau projet, et est donc à placer à la racine du projet.
Elle est comprise dans le zip des fichiers statiques.


                    <!DOCTYPE html>
                    <html lang="fr" class="no-js" dir="ltr">
                        <head>
                            <meta charset="UTF-8">
                            <title>Titre de page - ANS</title>
                            <meta http-equiv="X-UA-Compatible" content="IE=edge">
                            <meta name="viewport" content="width=device-width, initial-scale=1">
                            <meta name="description" content="">
                            <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
                            <link rel="stylesheet" href="https://use.typekit.net/jjx2ksb.css">
                            <link rel="stylesheet" href="./style/style-ans.css" type="text/css">
                            <link rel="stylesheet" href="./style/print.css" type="text/css" media="print">
                        </head>

                        <body>
                            <noscript>
                                <p class="js-off">Javascript est désactivé dans votre navigateur.</p>
                            </noscript>

                            <!-- Emplacement des Cookies -->

                            <!-- Emplacement des Liens d'accès rapide -->

                            <div class="body-wrapper">
                                <!-- Emplacement du Header -->

                                <main class="main" role="main" id="main" tabindex="-1">
                                    <div class="container">
                                        <!-- Emplacement du Contenu -->
                                    </div>
                                </main>

                                <!-- Emplacement du Footer -->
                            </div>

                            <script type="text/javascript" src="./script/jquery-3.5.1.min.js"></script>
                            <script type="text/javascript" src="./script/vendor.js"></script>
                            <script type="text/javascript" src="./script/app.js"></script>
                        </body>
                    </html>

Feuille de style CSS

Afin de bénéficier des styles et des composants du Système de Design, il faut inclure le fichier style-ans.css dans les pages HTML.

En cas de mise à jour ultérieure de la CSS, il suffit de télécharger la dernière version du starterkit pour bénéficier automatiquement de la nouvelle mise en page sur les éléments HTML déjà existants.

Comment utiliser le Système de Design ?

Vous disposez d'une bibliothèque de composants (boutons, champs de formulaire, fil d'Ariane...), que vous pouvez copier-coller dans la structure de vos pages HTML.
En parallèle, vous avez également la possibilité de faire appel aux classes utilitaires : ces classes vous permettent de contrôler (sans avoir besoin de modifier la CSS) l'aspect et/ou le comportement de vos composants et éléments.