Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:css:frameworks:semantic [2023/04/16 17:01] – créée jcheron
+++ web:css:frameworks:semantic [2023/04/18 02:46] (Version actuelle) – [Eléments HTML simples] jcheron
@@ Ligne 1: / Ligne 1: @@
 ====== 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 ===
+<sxh html;gutter:false>
+<head>
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.2/dist/semantic.min.css">
+</head>
+</sxh>
+=== Javascript ===
+Avant la fermeture du body :
+<sxh html;gutter:false>
+<!-- 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>
+</sxh>
+==== Via npm ====
+<wrap info>Ne pas oublier également l'intégration de jQuery.</wrap>
+<sxh bash;gutter:false>
+npm install fomantic-ui
+</sxh>
+=== CSS ===
+Dans le head
+<sxh html;gutter:false>
+<head>
+<link rel="stylesheet" type="text/css" href="/dist/semantic.min.css">
+</head>
+</sxh>
+=== Javascript ===
+Avant la fermeture du body :
+<sxh html;gutter:false>
+<!-- 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>
+</sxh>
+===== Bases =====
+==== Eléments HTML simples ====
+La plupart des composants Semantic ne requiert que du HTML
+**Segment :**
+<sxh html;gutter:false>
+<div class='ui segment'>
+</div>
+</sxh>
+**Bouton :**
+<sxh html;gutter:false>
+<a class='ui button'>
+    Ouvrir...
+</a>
+</sxh>
+==== Eléments HTML/JS ====
+Certains composants nécessitent une création en HTML, et une initialisation en JS :
+Exemple : Dropdown
+<sxh html;gutter:false>
+<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>
+</sxh>
+==== Eléments JS ====
+Certains composants (beaucoup plus rares) sont 100% JS, c'est le cas par exemple du **toast** :
+<sxh javascript;gutter:false>
+$.toast({
+  title: 'Better ?',
+  message: 'Hey look, I have a title !'
+});
+</sxh>