Partager
Une épingle sur pinterest ?

Objets

Ici, je liste les éléments de mon site qui me servent d'objets pour construire un peu tout ce qui s'y trouve.

Call-to-action

Liens, boutons, call-to-action, plein de nom pour des machins cliquables qui déclenchent des trucs.

Fields

Pour intéragir avec un site et ses fonctionnalités, il donne à l'internaute des champs de saisie

Des trucs en plus

Check

C'est pas les même, c'est des autres

Code

Un jour, je partagerai du code. Ce jour là, j'utiliserai ce truc là

draggable=false
infinite=false
adaptiveHeight=true

Démonstration

Par défaut, un cta fait 40px de hauteur et ne dispose d'aucun effet de couleur. Ils disposent d'une bordure de 2px transparent. Il ne reste plus qu'à appliquer des valeurs au
data-cta=""
comme la taille et / ou la couleur.
<a href="" data-cta=""><span>Default</span></a>
<button type="button" data-cta=""><span>Default</span></button>

Les hauteurs

4 formats disponibles (en plus de celui par défaut) :

xs : 20px, sm : 30px, lg : 50px, xl : 60px

<a href="" data-cta="xs"><span>Un lien ou un bouton</span></a>
<a href="" data-cta="sm"><span>Un lien ou un bouton</span></a>
<a href="" data-cta="lg"><span>Un lien ou un bouton</span></a>
<a href="" data-cta="xl"><span>Un lien ou un bouton</span></a>

Les couleurs

Certains thèmes sont déjà définis en appliquant une des quatres couleurs principales : mc, sc,tc ou qc. Ou d'autres : bl, gr ou wh

Pour appliquer d'autre couleurs, il suffit de définir le CSS suivant :

<a href="" data-cta="mc"><span></span></a>
[data-cta="pabô"]{
    background-color: yellow; color: blue; border-color: green;

    &:hover, &.active{
        background-color: purple; color: red; border-color: pink;
    }
}

Icones

Via le paramètre ic, la largeur du CTA se cale sur sa hauteur, quelque soit le format. Utile pour mettre un SVG dedans par exemple.

<button type="button" data-cta="xs ic"><span>IC</span></button>
<button type="button" data-cta="sm ic"><span>IC</span></button>
<button type="button" data-cta="ic"><span>IC</span></button>
<button type="button" data-cta="lg ic"><span>IC</span></button>
<button type="button" data-cta="xl ic"><span>IC</span></button>

Combiner

Reste plus qu'à combiner les différents paramètres en fonction des besoins !

Ajouter
<button type="button" data-cta="ic de lg"><?= fa('bars-sort','r') ?></button>
<a href="#" data-cta="mc"><?= fa('circle-plus','s') ?><span>Ajouter</span></a>
<button type="button" data-cta="xs sc"><span>Supprimer un truc</span></button>
Salut

Je te souhaite la bienvenue sur mon site internet.

Ici, c'est un peu mon laboratoire personnel afin de développer tout un tas de trucs, plus ou moins cool, plus ou moins utile. On est encore qu'au début mais ça se développe petit à petit alors n'hésite pas à revenir de temps en temps !

Bonne visite !

Que la lumière soit !
Il va faire tout noir !