CSS à fond la forme

Grid: bilan

 Voici une série d'exercices sur CSS grid.

A) Création d'une page

Utilisation de  →Template-areas


B) Les alogorithmes de placement

1. Comprendre les algorithmes de placement
2. Comprendre les algorithmes de placement (dense)

C) En action

1. Création d'une page WEB
2. Création d'un page d'une bibliothèque de photos

D) Avancé

1. Multi support
2. Création d'un design avancé

span en action

See the Pen Grid auto-flow dense by dupont (@dupontcodepen) on CodePen.

TD : grid

 Définir des zones ! (-> TD°

grid : Projets

Projet 1

Nous allons créer une grille digne des plus grands journaux nationaux ! 

cliquez

Projet 1

Projet 2

 Il existe depuis la nuit des temps une jolie balise pour créer des zones ( -> map )

<map> 

Les zones

Comment définir les agglomérations, les villes et les zones ?

On parle de zones

• rurales
• urbaines
• commerciales
• franches
• administratives
• C19 rouge, vert, bleue
• 
  
• ...

Grid permet de définir des zones. Ce ne sera pas une populations, des industries ou encore des administration, mais du HTML qui sera implanté dans les zones définies !

Rappels

Projet 2

Projet 3

Nous allons finir par créer une page au look personnalisé !

-> Projet 3

Mettre des conditions

1.  @supports (display: grid) {
2.   .wrapper > * {
3.     width: auto;
4.     margin: 100px;
5.   }
6. }

Si le navigateur prend en charge display grid alors ...

Mon Spinner : en quatre étapes !

Seulement quatre étapes pour créer ⇀un spinner !

Définition d'un carré

Mise en place d'une bordure

Transformation en cercle

Mise en place d'une animation infinie

Appliquer du CSS localement : how to

Comparer les deux résultats de l'application du style :

a {
border : 1px solid red; }


pour les deux simulateurs

Style sur l'ensemble du DOM
Style sur un DOM isolé

Le second associe à un élément un DOM séparé et caché : https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

lecture cours

http://estelle.github.io/

Chrome

code de la présentation en ligne
Infos Google

Flex simu : how to !

Vous pouvez télécharger une version du simulateur

↪Télécharger

Modifier la taille des blocs 

Utiliser dans votre code la valeur !important

• Pour forcer la largeur d'un bloc

#A {

       width : auto !important

}

ou

#A {

       width : 10vw !important

}

• Pour forcer la largeur des blocs

.conteneur *{ 

        width : auto !important 

}

Modifier le contenu

On peut ajouter du contenu au bloc

#A:before{

  content : attr(data-blabla);

}

ou 

#A:after{

  content : attr(data-blabla);

}

Exemple

Copier  ce code et coller (Ctrl+Maj+V) le dans le bloc éditeur du conteneur.

.conteneur { display : flex; padding-right : 5px; } .conteneur *{ width : auto !important; } .conteneur *:before{ content : attr(data-blabla); }