Les listes

Styles de bases :

Style de type « reset » pour styler les éléments de menu :

ul {
 list-style: none;
 padding-left: 0;
}

Faut-il une classe « unstyled » ?

Source : https://www.knacss.com/

Note : le fichier grid.css  du thème ajoute un padding-left de 55px;

Exemples de styles pour des listes non ordonnées :

Ajout d’une classe spécifique à l’élément ul : « content-list »;

Méthode ::before + Font-Awesome :

.content-list li {
    position: relative;
    line-height: 1.5em;
}

.content-list li::before {
  content: "\f111";
  font-family: 'FontAwesome';
  font-size: 6px;
  position: absolute;
  left: -12px;
  top: 1px;
  color: #7f971b;
}

/*Liste imbriquée*/
.content-list ul {
  padding-left: 10px;
}

.content-list ul li::before {
  content: "\f105";
  font-size: 10px;
}

source : https://stackoverflow.com/

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Premier item
  • Deuxième item
  • Troisième item
    • sous-item 1
    • sous-item 2

Avantages de la méthode : bon contrôle de position des puces, pas d’image donc rapide à intégrer.
Inconvénients : chargement de police inutile ?

Méthode ::before « Alsacréation » :

.content-list2 li {
  margin-left: 1rem;
  line-height: 1.5rem;
}

.content-list2 li::before {
  content: ' ';
  display: inline-block;
  height: 6px;
  width: 6px;
  margin-right: .5rem;
  margin-top: .6rem;
  margin-left: -1.8rem;
  vertical-align: top;
  border-radius: 50%;
  background: #7f971b;
}

/*liste imbriquée*/
.content-list2 ul li::before {
  border-radius: 0;
}

source: https://www.alsacreations.fr/

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Premier item
  • Deuxième item
  • Troisième item
    • Sous-item 1
    • Sous-item 2

Avantages de la méthode :  Pas de chargement de police.
Inconvénient: contrôle de position des puces ? Design limité.

Méthode background-image « MDN » :

.content-list3 li {
  padding-left: 1rem;
  background-image: url(https://www.leboistillac.fr/wp-content/uploads/2018/06/puce-3.png);
  background-position: 0 8px;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  margin-bottom: 6px;
}

/*Listes imbriquées*/

.content-list3 ul li {
 background-image: url(https://www.leboistillac.fr/wp-content/uploads/2018/06/puce-imbriquee.png);
 background-position: 0 10px;
}

source: Developer.mozilla.org

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Premier item
  • Deuxième item
  • Troisième item
    • Sous-item 1
    • Sous-item 2

Avantages de la méthode :  La plus courte, design infini, fonctionne avec les listes imbriquées, bon contrôle de position des puces.
Inconvénients : chargement d’images (penser au svg).

Test avec beaucoup de niveaux :

  • niveau 1
    • niveau 2
      • niveau 3
        • niveau 4
          • niveau 5
            • niveau 6
              • niveau 7
  • niveau 1
    • niveau 2
  • niveau 1
    2lignes
  • niveau 1

 

 

Les listes ordonnées :

ol {
  list-style-position: inside;
}
  1. Carottes
  2. Pommes
  3. Patates
    1. Nouvelles
    2. Dauphines