Page section, présentation éléments (résumé, choix, essais)

1. Grille, • délicat ↣
16 colonnes. <div class="ui x grid"> , x ∈ { celled, padded, stackable, divided, nested, relaxed, …}.

3
2
1
4
3
2
1

2. Segment
<div class="ui x segment">
x ∈ { ∅, basic, compact, stacked, raised, secondary, tertiary, inverted, colored, segments, tall stacked, piled, vertical, horizontal, circular, right floated, right aligned, …}

ui segment
ui segment
ui segment in ui segment
ui segment
ui vertical segment
ui vertical segment
ui right floated tall stacked segment
ui basic segment
ui compact raised segment
ui piled segment

ui center aligned tertiary inverted green segment

ui top attached red segment
ui attached secondary segment
ui bottom attached tertiary segment
segment_s_ non défini dans la version utilisée
Etc.

<h1> à<h6>
simplement

First Header 1

Second Header 2

Third Header 3

Fourth Header 4

Fifth Header 5
Six Header 6

paragraphe

H1 (rem)

H1 ⊂ H1

<h1à6 class="ui x header">
x ∈ { icon, sub, disabled, dividing, block, attached, top v bottom attached, right v left floated, right v left v center aligned, justified, colored, color inverted }

h1 header content
sub headers

h2 class ui disabled header

h3 class ui dividing header
block header

h4 class ui justified header

h5 ui orange header
block header
h6 ui icon pink
block header

ui H1 (rem)

ui H1 ⊂ ui H1

<div class="ui x y header">
y ∈ {huge, large, medium, small, tiny}.

Huge Header
subheaders

Large Header

Medium teal dividing Header

Small blue Header
subheaders

Tiny Header

ui top attached red header
ui attached segment
ui bottom attached purple header
M.H. (em)
M.H. ⊂ M.H.
T.H. (font-size: 1em)
T.H. ⊂ T.H.

4. Divider
ui {vertical, inverted, fitted, hidden, section, clearing} divider

Divider simple

ET

 

Vertical Divider

Important : 1° Le vertical divider doit être contenu dans un flexible conteneur (grid, …), lui même contenu dans un segment (qui sert de conteneur au vertical divider), sinon il sort (comme on le voit ici),

et,

2° Ça ne marche qu'une fois ! (au centre) :

column 1
(ui padded stackable grid)

1    
column 2
où est le vertical divider 1 ?!…
(def entre les colonnes 1 et 2, il apparait, horizontal, sur petit écran)
2
column 3
: fusion des verticals dividers 1,2et3 !
    3
column 4
où est le vertical divider 3 ?!… (idem)

En combinaison avec headers (<… class="ui horizontal divider … header>) :

h4 class ui horizontal divider header

h4 class ui horizontal divider header avec image

h5 class ui horizontal divider green right aligned header avec icon

5. Liste
Pour les listes SPIP créées dans un article avec des «-» et «*», cf raccourcis SPIP

<ul class="ui list">

  • li 1
  • li 2 ul2
    • li 2.1
    • li 2.2 ul3
      • li 2.2.1
      • li 2.2.2
  • /ul3 /ul2 li 3

<ol class="ui list">

  1. li 1
  2. li2 ol2
    1. li 2.1
    2. li 2.2 ol3
      1. li 2.2.1
      2. li 2.2.2
        1. li 2.2.2.1
  3. /ol3 /ol2 li 3

<div class="ui (ordered) list">
 <div ou a class="item">

Link List Item 1
List Item 2 (Link)
List Item 3
link List Item 3.1
List Item 3.2
link List Item 3.2.1
List Item 3.2.2
link List Item 4

<div class="ui bulleted list">

List Item
List Item (link)
<div class="ui bulleted link list"> <div class="ui selection list">
Selection
Selection
<div class="ui list">+header
Header 1
Description
sub list item 1.1
<div class="ui list"> + img, icon, header
Header
Description
Sub Header
Sub Description
<div class="ui divided very relaxed animated list">
Header
Description
Header
Description

Horizontal list
<div class="ui horizontal … list">

Header
Description
Header
Description
Header
Description
Header
Description
Header
Description
Header
Description
Header
Description
Header
Description
Header
Description

6. Item
voir aussi Feed →

Content Header
Une description qui peut s'étendre sur plusieurs lignes et donner un contexte au contenu.Or, toute notre distinction entre le possible et l’effectif repose sur la manière dont le premier signifie uniquement la position de la représentation d’une chose relativement à notre concept et, en général, au pouvoir de penser, tandis que le second signifie la position de la chose en elle-même (en dehors de ce concept).
Username
Content Header
Une description qui peut s'étendre sur plusieurs lignes et donner un contexte au contenu.Aussi la distinction entre des choses possibles et des choses effectives en est-elle une qui n’a de valeur que simplement subjective, pour l’entendement humain, étant donné que nous pouvons toujours penser quelque chose qui cependant n’existe pas, ou nous représenter quelque chose comme donné, alors que nous n’en ayons encore aucun concept.
Primary
Limited

7. Tableau
Pour les tableaux SPIP créées dans un article avec des « | » (pipe) : cf raccourcis SPIP

Les tableaux class="ui table" sont responsives automatiquement. Les tableaux style="width:100%" ou class="ui unstackable table" ne sont pas responsives.

Header 1Header 2
Definition1A1B
Definition2A2B
Header 1Header 2
Definition1A1B
Definition2A2B

Style
- table class="ui {definition (1ère colonne marquée), unstackable, collapsing, inverted-colored, small, large, (very), basic, compact, celled, padded, striped, structured, fixed, single line, selectable, X column} table"
- th &v td class="X wide, single line, rowspan, colapsing, top bottom aligned, right center aligned, selectable, active, disable, inverted, colored (positive negative warning error)
- tfoot class="full-width"

Files
folderComment10 hours ago
folder2Comment10 hours ago
package.jsonComment10 hours ago
NameRegistration DateE-mail addressPremium Plan
Primary
Button
Disabled
NameStatusNotes
User 1ValueComment
User 1ValueComment
User 2ValueData
User 1ValueWarning
User 3ValueData
User 2ValueData
NameStatusNotes
User 1ValueComment
User 1ValueComment
User 2ValueData
User 1ValueWarning
User 3ValueData
User 2ValueData
FooterFooter

8. Onglet ↣
ui top attached tabular menu , ui bottom attached active tab segment

contenu onglet actif.