Comme son nom l'indique, Semantic UI est un framework CSS basé sur la sémantique, respectueux de la structure HTML d'un document (contrairement à Bootstrap par exemple, qui nécessite souvent de restructurer le document pour mettre en oeuvre des composants).
Le projet initial Semantic-ui a été abandonné par son auteur, puis repris par une équipe motivée avec le Fork Fomantic-UI
Semantic-UI utilise jQuery.
<head> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.2/dist/semantic.min.css"></head> |
Avant la fermeture du body :
<!-- You MUST include jQuery 3+ before Fomantic --></body> |
Ne pas oublier également l'intégration de jQuery.
npm install fomantic-ui |
Dans le head
<head><link rel="stylesheet" type="text/css" href="/dist/semantic.min.css"></head> |
Avant la fermeture du body :
<!-- You MUST include jQuery 3+ before Fomantic --><script src="/dist/semantic.min.js"></script> |
La plupart des composants Semantic ne requiert que du HTML
Segment :
<div class='ui segment'></div> |
Bouton :
<a class='ui button'> Ouvrir...</a> |
Certains composants nécessitent une création en HTML, et une initialisation en JS :
Exemple : Dropdown
<div class="ui selection dropdown"> <input type="hidden" name="pet"> <i class="dropdown icon"></i> <div class="default text">Pet</div> <div class="scrollhint menu"> <div class="item" data-value="0">Cat</div> <div class="item" data-value="1">Dog</div> <div class="item" data-value="2">Bird</div> <div class="item" data-value="3">Rabbit</div> <div class="item" data-value="4">Squirrel</div> <div class="item" data-value="5">Horse</div> <div class="item" data-value="6">Turtle</div> <div class="item" data-value="7">Parrot</div> </div></div><script>$('.ui.dropdown').dropdown();</script> |
Certains composants (beaucoup plus rares) sont 100% JS, c'est le cas par exemple du toast :
$.toast({ title: 'Better ?', message: 'Hey look, I have a title !'}); |