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

https://fomantic-ui.com/

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 !'
});