Ma su quale diavolo di breakpoint mi trovo?

E allora ho creato un piccolo helper che si piazza in un angolo dello schermo e ti dice su che misura sei tra: XL, LG, MD, SM o XS

Non so voi ma spesso mi rincoglionisco nel capire su quale breakpoint sono. Ci sono dei layout che si comportano in maniera veramente strana: hanno vita propria.

Questo piccolo helper a volte mi aiuta parecchio.

Dimmi su quale breakpoint sono…

È composto in pratica da due piccoli pezzi di codice.

Quello più importante è un pezzo di HTML che sfrutta le classi native di Bootstrap 4 per impostare la proprietà display nei vari breakpoint.

<div id="size-helper">
<span class="d-block d-sm-none">SIZE XS</span>
<span class="d-none d-sm-block d-md-none">SIZE SM</span>
<span class="d-none d-md-block d-lg-none">SIZE MD</span>
<span class="d-none d-lg-block d-xl-none">SIZE LG</span>
<span class="d-none d-xl-block">SIZE XL</span>
</div>

Dopo di che un piccolo aggiustamento CSS, che è comunque opzionale e dipende da come e dove volete vederlo, per tenerlo in un angoletto e darne evidenza:

#size-helper{
position: fixed;
top: 1rem;
left: 0;
padding: 1rem 1rem 1rem 6rem;
background: rgba(#d00, .8);
color: white;
font-weight: bold;
}

Beh, spero che vi possa tornare utile. 
Fatemi sapere!

Like what you read? Give Andrea Rufo a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.