Splite se fit aux coordonnées de chaque calque pour définir la structure de la page.
Cela comprend :
→ La définition des éléments parent/enfant (imbrication)
→ La création des colonnes
→ La définition des mages entre les éléments
L’imbrication des calques
Splite commence par définir automatiquement quel élément est imbriqué dans un autre élément pour générer la structure de l’email ou de la landing.
Le calque 1 est enfant du calque 2. Le calque 2 & 3 sont enfants de personne.
Quand un élément chevauche totalement un autre, nous sommes alors dans une imbrication totale. L’élément du dessus devient enfant de l’élément du dessous. Les deux conservent leurs types.
À l’opposé, quand un élément chevauche partiellement un autre, nous sommes ici dans une imbrication partielle. L’élément du dessus devient également enfant de l’élément du dessous. Mais l’élément du dessous passe alors en background-image avec une nouvelle dimension. 🚨
🚨 Le chevauchement peut dans le cas d’un élément image venir de l’ombre portée ou de la rotation.
Les colonnes
Comme un vrai intégrateur, Splite intègre les éléments par ligne. Les éléments à l’intérieur des lignes sont structurés en colonnes.
Les espaces vides entre deux colonnes sont générés par une colonne vide.
Les marges
Les marges horizontales sont générées grâce aux tableaux. Les marges verticales via les valeurs “padding” et “margin” selon les cas.
Entre deux éléments du même niveau, Splite utilise la valeur “margin” sur le 1er élément pour définir l’espacement.
Entre un élément enfant et un élément parent, Splite utilise la valeur padding sur l’enfant pour définir l’espacement.
Si l’enfant change de taille, la marge reste la même. Le parent change alors aussi de taille.