Les composants
- Les titres
- Les couleurs
- Les grilles
- Les boutons
- Les formulaires
- Les modales
- Les boites
- Les messages flash
- Les notifications
- Les icônes
- Les listes
- Les paginations
- Les barres de navigation
Les 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
Les couleurs
Polar Night
Snow Storm
Frost
Aurora
Vous pourrez trouver plus d'informations sur le site offciel du projet nord.
Les grilles
Se référer à la documentation de Knacss.
Les boutons
Les formulaires
<div class="field"> <label for="demo-email">Adresse e-mail</label> <input type="email" name="email" id="demo-email" placeholder="ex : damien@darkou.fr"> </div>
<div class="field"> <label for="message">Message*</label> <textarea name="message" id="message" rows="6" required ></textarea> </div>
<div class="field"> <label for="sortOrder">Trier par</label> <select id="sortOrder"> <option value="artists_sort-asc">Artiste (A-Z)</option> <option value="artists_sort-desc">Artiste (Z-A)</option> <option value="year-asc">Année (A-Z)</option> <option value="year-desc">Année (Z-A)</option> <option value="country-asc">Pays (A-Z)</option> <option value="country-desc">Pays (Z-A)</option> <option value="formats.name-asc">Format (A-Z)</option> <option value="formats.name-desc">Format (Z-A)</option> </select> </div>
<div class="field inline"> <label for="choix1">choix 1</label> <input type="radio" id="choix1" name="choix" value="choix1" checked> </div> <div class="field inline"> <label for="choix2">choix 2</label> <input type="radio" id="choix2" name="choix" value="choix2"> </div>
<div class="field"> <label for="checkbox1">choix 1</label> <input type="checkbox" id="checkbox1" name="checkbox" value="checkbox1" checked> <label for="checkbox2">choix 2</label> <input type="checkbox" id="checkbox2" name="checkbox" value="checkbox2"> </div>
Les modales
<div class="modal" :class="{'is-visible': showModal}"> <div class="modal-background"></div> <div class="modal-card"> <header>Titre</header> <section> Ceci est une modale </section> <footer> <button class="button is-primary" @click="toggleModal">Ok</button> <button class="button" @click="toggleModal">Annuler</button> </footer> </div> </div>
Les boites
<div class="box"> Contenu </div>
Les messages flash
Erreur
Ceci est une erreur
Information
Ceci est une information
Succès
Ceci est un succès
<div class="flash"> <div class="header"> Erreur </div> <div class="body"> Ceci est une erreur </div> </div>
Les notifications
Erreur
<button type="button" class="button is-primary" onclick="showToastr('Ceci est une notification');" > Afficher une notification </button> <div id="toastr"> <button class="delete" onclick="hideToastr()" aria-label="Masquer la notification"></button> <span></span> </div>
Succès
<button type="button" class="button is-primary" onclick="showToastr('Ceci est une notification', true);" > Afficher une notification </button> <div id="toastr"> <button class="delete" onclick="hideToastr()" aria-label="Masquer la notification"></button> <span></span> </div>
Les icônes
.icon-plus .icon-user .icon-search .icon-mail .icon-link .icon-link-ext .icon-heart .icon-eye .icon-left-open .icon-right-open .icon-export .icon-share .icon-spin .icon-sun .icon-moon .icon-trash .icon-blindLes listes
Liste normale
{{ item.title }}
{{ item.lorem }}
<div class="grid grid-cols-1 md:grid-cols-2 list"> <div class="item"> Contenu </div> </div>
Liste avec effet au hover
{{ item.title }}
{{ item.lorem }}
<div class="grid grid-cols-1 md:grid-cols-2 list hover"> <div class="item"> Contenu </div> </div>
Les paginations
<nav class="pagination" role="navigation" aria-label="Pagination"> <ul class="pagination-list"> <li><a class="pagination-link is-current" aria-label="Aller à la page 1">1</a></li> <li><a class="pagination-link" aria-label="Aller à la page 2">2</a></li> <li><a class="pagination-link is-disabled">…</a></li> <li><a class="pagination-link" aria-label="Aller à la page 11">11</a></li> </ul> </nav>
Les barres de navigation
<nav class="navbar" aria-label="Navigation principale"> <div class="navbar-brand"> <a class="navbar-item" href="/"> <img src="/img/logo.png" alt="Logo MusicTopus"> <span>MusicTopus</span> </a> <a role="button" class="navbar-burger" aria-label="Afficher le menu" aria-expanded="false" data-target="navbar"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div id="navbar" class="navbar-menu"> <div class="navbar-start"> <div class="navbar-item"> <div class="buttons"> <a class="button is-primary" href="/ajouter-un-album"> <i class="icon-plus"></i> <span> Ajouter un album </span> </a> </div> </div> </div> <div class="navbar-end"> <a class="navbar-item" href="/nous-contacter"> Nous contacter </a> <div class="navbar-item has-dropdown"> <a class="navbar-link"> <i class="icon-user"></i> <span> <%= user.username %> </span> </a> <div class="navbar-dropdown"> <a class="navbar-item" href="/ma-collection"> Ma collection </a> </div> </div> <div class="navbar-item apparence"> <div class="theme-switch-wrapper"> <label class="theme-switch" for="checkbox" aria-label="Passer du thème clair au thème sombre et inversement"> <input type="checkbox" id="checkbox" /> <div class="slider round"></div> </label> </div> </div> <div class="navbar-item"> <div class="buttons"> <button type="button" class="button is-primary" id="switchAriaTheme" aria-label="Renforcer la visibilité de ce site" title="Renforcer la visibilité de ce site"> <i class="icon-eye"></i> </button> <a class="button is-danger" href="/se-deconnecter"> Déconnexion </a> </div> </div> </div> </div> </nav>