Semantic-UI
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.
Documentation
Intégration
Via CDN
CSS
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.2/dist/semantic.min.css">
</head>
Javascript
Avant la fermeture du body :
<!-- You MUST include jQuery 3+ before Fomantic --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.2/dist/semantic.min.js"></script> </body>
Via npm
Ne pas oublier également l'intégration de jQuery.
npm install fomantic-ui
CSS
Dans le head
<head> <link rel="stylesheet" type="text/css" href="/dist/semantic.min.css"> </head>
Javascript
Avant la fermeture du body :
<!-- You MUST include jQuery 3+ before Fomantic --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.min.js"></script> <script src="/dist/semantic.min.js"></script>
Bases
Eléments HTML simples
La plupart des composants Semantic ne requiert que du HTML
Segment :
<div class='ui segment'> </div>
Bouton :
<a class='ui button'>
Ouvrir...
</a>
Eléments HTML/JS
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>
Eléments JS
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 !'
});
jcheron