Les composants

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

 
nord0
 
nord1
 
nord2
 
nord3

Snow Storm

 
nord4
 
nord5
 
nord6

Frost

 
nord7
 
nord8
 
nord9
 
nord10

Aurora

 
nord11
 
nord12
 
nord13
 
nord14
 
nord15

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

.button
.button.is-primary
.button.is-success
.button.is-danger
.button.is-warning

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

Connexion

Pas encore inscrit ? Inscrivez-vous

<div class="box">
    Contenu
</div>
    

Les messages flash

Erreur
Ceci est une erreur
<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-blind

Les 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>