Pour commencer

Développeurs

Pour utiliser ce Système de Design, vous devez récupérer les fichiers statiques ci-dessous.

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.

starterkit.zip

26 Sep 2022

poids : 267Ko

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>
                

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.