HOME / Front-end, Haml, Sass /
Step-by-step creation of this article gallery template
August 18th 2024
We'll see JavaScript parallax, SASS, Flexbox, CSS3 conic gradient rotation, and some cool effects.
L'objectif étant de réaliser une page d'accueil très graphique, avec une animation d'ambiance en pleine page et tout de suite en dessous une mosaïque de couvertures d'illustrations d'articles, de tailles généreuses.
Afin d'obtenir un bon référencement, il me faut annoter cette galerie avec des balises de titre de niveau 2, des marqueurs de catégories et des descriptions avec des mots clés.
Warning
I'm working with an autoprefixer and a CSS reset stylesheet.
1. Etablissement de la structure Flexbox
Je pars d'une structure Haml avec une div conteneur et 10 div enfants que je remplis avec du faux-texte Lorem ipsum, de manière inégale pour imiter les futures descriptions de tailles différentes.
html
Copy
<div id="container">
<div class="block" id="A">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut posuere tellus. Praesent vitae lorem massa. Nullam fringilla viverra porttitor. Suspendisse dignissim ac turpis eu eleifend. Phasellus ut nunc mi. Duis nec sem purus. Aenean bibendum vel augue at tempor. Curabitur eu erat sollicitudin, mollis augue id, dignissim erat. Etiam elementum urna consectetur, aliquet velit in, consequat neque. Integer at turpis sit amet erat ultrices placerat. Aenean massa risus, condimentum vel ullamcorper vitae, dictum porta nulla. Donec condimentum volutpat mollis. Praesent hendrerit, sem in maximus bibendum, enim lorem tempor purus, sit amet sollicitudin elit orci eget mauris. Ut purus purus, pellentesque nec venenatis sed, dapibus eget tortor. Nam feugiat risus ac egestas dapibus.</div>
<div class="block" id="B">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut posuere tellus. Praesent vitae lorem massa. Nullam fringilla viverra porttitor.</div>
<div class="block" id="C">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut posuere tellus. Praesent vitae lorem massa. Nullam fringilla viverra porttitor.</div>
<div class="block" id="D">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut posuere tellus. Praesent vitae lorem massa. Nullam fringilla viverra porttitor.</div>
<div class="block" id="E">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut posuere tellus. Praesent vitae lorem massa. Nullam fringilla viverra porttitor.</div>
<div class="block" id="F">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut posuere tellus. Praesent vitae lorem massa. Nullam fringilla viverra porttitor.</div>
<div class="block" id="G">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut posuere tellus. Praesent vitae lorem massa. Nullam fringilla viverra porttitor. Suspendisse dignissim ac turpis eu eleifend. Phasellus ut nunc mi. Duis nec sem purus. Aenean bibendum vel augue at tempor. Curabitur eu erat sollicitudin, mollis augue id, dignissim erat. Etiam elementum urna consectetur, aliquet velit in, consequat neque. Integer at turpis sit amet erat ultrices placerat. Aenean massa risus, condimentum vel ullamcorper vitae, dictum porta nulla.</div>
<div class="block" id="H">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut posuere tellus. Praesent vitae lorem massa. Nullam fringilla viverra porttitor.</div>
<div class="block" id="I">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut posuere tellus. Praesent vitae lorem massa. Nullam fringilla viverra porttitor.</div>
<div class="block" id="J">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut posuere tellus. Praesent vitae lorem massa. Nullam fringilla viverra porttitor.</div>
</div>haml
Copy
#container
#A.block Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut posuere tellus. Praesent vitae lorem massa. Nullam fringilla viverra porttitor. Suspendisse dignissim ac turpis eu eleifend. Phasellus ut nunc mi. Duis nec sem purus. Aenean bibendum vel augue at tempor. Curabitur eu erat sollicitudin, mollis augue id, dignissim erat. Etiam elementum urna consectetur, aliquet velit in, consequat neque. Integer at turpis sit amet erat ultrices placerat. Aenean massa risus, condimentum vel ullamcorper vitae, dictum porta nulla. Donec condimentum volutpat mollis. Praesent hendrerit, sem in maximus bibendum, enim lorem tempor purus, sit amet sollicitudin elit orci eget mauris. Ut purus purus, pellentesque nec venenatis sed, dapibus eget tortor. Nam feugiat risus ac egestas dapibus.
#B.block Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut posuere tellus. Praesent vitae lorem massa. Nullam fringilla viverra porttitor.
#C.block Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut posuere tellus. Praesent vitae lorem massa. Nullam fringilla viverra porttitor.
#D.block Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut posuere tellus. Praesent vitae lorem massa. Nullam fringilla viverra porttitor.
#E.block Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut posuere tellus. Praesent vitae lorem massa. Nullam fringilla viverra porttitor.
#F.block Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut posuere tellus. Praesent vitae lorem massa. Nullam fringilla viverra porttitor.
#G.block Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut posuere tellus. Praesent vitae lorem massa. Nullam fringilla viverra porttitor. Suspendisse dignissim ac turpis eu eleifend. Phasellus ut nunc mi. Duis nec sem purus. Aenean bibendum vel augue at tempor. Curabitur eu erat sollicitudin, mollis augue id, dignissim erat. Etiam elementum urna consectetur, aliquet velit in, consequat neque. Integer at turpis sit amet erat ultrices placerat. Aenean massa risus, condimentum vel ullamcorper vitae, dictum porta nulla.
#H.block Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut posuere tellus. Praesent vitae lorem massa. Nullam fringilla viverra porttitor.
#I.block Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut posuere tellus. Praesent vitae lorem massa. Nullam fringilla viverra porttitor.
#J.block Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut posuere tellus. Praesent vitae lorem massa. Nullam fringilla viverra porttitor.haml
Copy
#container
#A.block Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut posuere tellus. Praesent vitae lorem massa. Nullam fringilla viverra porttitor. Suspendisse dignissim ac turpis eu eleifend. Phasellus ut nunc mi. Duis nec sem purus. Aenean bibendum vel augue at tempor. Curabitur eu erat sollicitudin, mollis augue id, dignissim erat. Etiam elementum urna consectetur, aliquet velit in, consequat neque. Integer at turpis sit amet erat ultrices placerat. Aenean massa risus, condimentum vel ullamcorper vitae, dictum porta nulla. Donec condimentum volutpat mollis. Praesent hendrerit, sem in maximus bibendum, enim lorem tempor purus, sit amet sollicitudin elit orci eget mauris. Ut purus purus, pellentesque nec venenatis sed, dapibus eget tortor. Nam feugiat risus ac egestas dapibus.
#B.block Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut posuere tellus. Praesent vitae lorem massa. Nullam fringilla viverra porttitor.
#C.block Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut posuere tellus. Praesent vitae lorem massa. Nullam fringilla viverra porttitor.
#D.block Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut posuere tellus. Praesent vitae lorem massa. Nullam fringilla viverra porttitor.
#E.block Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut posuere tellus. Praesent vitae lorem massa. Nullam fringilla viverra porttitor.
#F.block Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut posuere tellus. Praesent vitae lorem massa. Nullam fringilla viverra porttitor.
#G.block Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut posuere tellus. Praesent vitae lorem massa. Nullam fringilla viverra porttitor. Suspendisse dignissim ac turpis eu eleifend. Phasellus ut nunc mi. Duis nec sem purus. Aenean bibendum vel augue at tempor. Curabitur eu erat sollicitudin, mollis augue id, dignissim erat. Etiam elementum urna consectetur, aliquet velit in, consequat neque. Integer at turpis sit amet erat ultrices placerat. Aenean massa risus, condimentum vel ullamcorper vitae, dictum porta nulla.
#H.block Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut posuere tellus. Praesent vitae lorem massa. Nullam fringilla viverra porttitor.
#I.block Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut posuere tellus. Praesent vitae lorem massa. Nullam fringilla viverra porttitor.
#J.block Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut posuere tellus. Praesent vitae lorem massa. Nullam fringilla viverra porttitor.Premier réflexe de salubrité mentale, je précise que la méthode de calcul des largeurs de l'ensemble des éléments qui composent cette page doit inclure les espaces internes et les bordures :
sass
Copy
body *
box-sizing: border-box
Je prépare une feuille de style qui assure la distribution harmonieuse des div enfants sur une grille grâce à Flexbox (Je recommande au passage ce guide de mise en page CSS Flexbox) :
sass
Copy
body
/* Style management */
background-color: #999
#container
/* Flexbox management */
display: flex /* defines the #container and enables a flex context for all its direct children */
flex-wrap: wrap /* flex items will wrap onto multiple lines, from top to bottom to prevent horizontal page scrolling */
justify-content: flex-end /* items are centered along the line */
gap: 20px /* explicitly controls the space between flex items, rom and column gaps will be the same */
/* Style management */
padding: 20px
border: 1px dotted #bbb
.block
/* Flexbox management */
width: 250px /* fixes the width of each child block */
/* Style management */
padding: 10px
background-color: #bbb2. Mise en page et style
Pour l'annotation de chaque div enfant, je prévois un titre, une liste de marqueurs, la date de publication (Je verrai plus tard pour afficher une éventuellement date de mise à jour) ainsi qu'un résumé de l'article :
html
Copy
<div class="block" id="A">
<div class="description">
<h2 class="title">My title</h2>
<h3 class="sub-title">
<span class="tag">a tag</span>
<span class="tag">another tag</span>
<span class="tag">another tag</span>
― Article date
</h3>
<p class="summary">
The summary of my article limited to, let's say 500 characters
</p>
</div>
</div>
<div class="block" id="B">
<!-- ... -->
<div class="block" id="C">
<!-- ... -->haml
Copy
#A.block
.description
%h2.title My title
%h3.sub-title
%span.tag a tag
%span.tag another tag
%span.tag another tag
― Article date
%p.summary
The summary of my article limited to 500 characters
#B.block
<!-- ... -->
#C.block
<!-- ... -->haml
Copy
#A.block
.description
%h2.title My title
%h3.sub-title
%span.tag a tag
%span.tag another tag
%span.tag another tag
― Article date
%p.summary The summary of my article limited to 500 charactersJe souhaite que l'annotations d'un article semble flotter par-dessus son illustration, j'utilise Sass pour voir utiliser des variables et opérer des réglages facilement en cours d'élaboration :
sass
Copy
/* Define variables */
$block-width: 600px
$block-height: 600px
$gap: 40px
.description
width: calc(100% - #{$gap}*2)
margin-top: -90px
margin-left: #{$gap}
padding: calc(#{$gap}/2)Je cherche un style qui correspond à l'ambiance que je souhaite donner à cette page :
sass
Copy
.title
margin-bottom: 8px
font-size: 34px
font-weight: 600
color: red
.sub-title
margin-bottom: 20px
font-size: 14px
font-weight: 700
line-height: 20px
text-transform: uppercase
color: rgb(128,128,128)
.tag
padding: 0 10px 0 10px
border: 2px solid grey
background-color: black
border-radius: 20px
color: grey
cursor: pointer
.summary
font-size: 18px
line-height: 24px
color: rgba(255,255,255,1)
Les blocs sont définis à une bonne taille 600px x 600px et l'attribut flex "gap" est augmenté à 40px afin d'aérer l'ensemble.
J'utilise l'attribut flex-grow: 1 pour permettre aux éléments Flexbox de la grille d'adapter leurs largeurs pour remplir un maximum l'écran.
sass
Copy
.block
/* Flexbox management */
flex-grow: 1
/* Style management */
z-index: 1
width: 600px
overflow: hiddenJ'appelle la librairie Jarallax, qui permet d'installer un effet de parallax sur le défilement d'éléments sur une page Web :
html
Copy
<script src="https://.../jarallax.min.js"></script>
J'édite le code de chaque div enfant en y ajoutant une div avec les attributs data-jarallax, data-speed="0.9", la class class="jarallax" et j'y intègre une image avec la class jarallax-img :
html
Copy
<div class="block" id="A">
<div data-jarallax data-speed="0.9" class="jarallax">
<img src="https://neg-entropy.systems/assets/articles/GTA_VI/header-illustration.jpg" class="jarallax-img">
</div>
<div class="description">
<h2 class="title">My title</h2>
<h3 class="sub-title">
<span>a tag</span>
<span>another tag</span>
<span>another tag</span>
― Article date
</h3>
<p class="summary">
The summary of my article limited to, let's say 500 characters
</p>
</div>
</div>
<div class="block" id="B">
<!-- ... -->
<div class="block" id="C">
<!-- ... -->
Je développe le style de la class .block .jarallax :
sass
Copy
.block .jarallax
z-index: -1 /* make it appear behind the description text */
width: 100%
height: $block-height3. Effets et finissions
Effet dramatique boir et blanc passage en couleur au survol Lettrage des différents styles de texte avec notamment des titres de niveau 2 en rouge, comme rappel des teintes de l'animation d'ambiance en entête de page Liseré animé via une combine CSS
<p>
<label id="card-label" onclick="focusIframe('hosted-fields-frame-card');">Card number</label>
<!-- Card number container -->
</p>
<p>
<label id="card-label" onclick="focusIframe('hosted-fields-frame-expiry');">Expiry</label>
<!-- Card expiry container -->
</p>
<p>
<label id="card-label" onclick="focusIframe('hosted-fields-frame-cryptogram');">Cryptogram</label>
<!-- Card cryptogram container -->
</p>Tip
This onclick event can be added on the containers themself to avoid unclickable dead zones around iframes.