Mozaïek HTML-sjablonen

Responsieve mozaïek HTML-sjablonen

Een mozaïek HTML-sjabloon wordt geleverd als bestanden die u in een editor kunt openen: een pagina, een stylesheet en afbeeldingen die al in secties van verschillende breedtes zijn geplaatst. De demo-screenshot toont één indeling van deze tegels. Alles wat u daarna doet, gebeurt in de code erachter, dus het is de moeite waard om de broncode te openen voordat u de preview bekijkt.

Het meeste werk blijft op contentniveau. Foto's worden vervangen, bijschriften worden herschreven en een kaart wordt gedupliceerd zodra de galerij groter wordt dan de demo.

Markup achter ongelijkmatige afbeeldingsblokken

Tegelcomposities worden op zeer verschillende manieren opgebouwd en het verschil wordt duidelijk zodra u een extra item toevoegt. Een raster dat wordt bij elkaar gehouden door kolom- en rij-spans blijft werken wanneer een kaart wordt gekopieerd. Een lay-out die is vastgezet met vaste offsets vereist elke keer handmatige aanpassing.

Dit soort secties dragen meestal het grootste deel van de inhoud van een mozaïekpagina:

• een brede afbeeldingstegel met een korte titel erboven
• een kaart die zich herhaalt in een galerij of categorieoverzicht
• een teksttegel voor een dienst, een notitie of een citaat
• een call-to-action-tegel die het visuele cluster afsluit

Geen enkele template bevat ze standaard allemaal, dus het is handig om de demo te openen, te tellen wat echt herbruikbaar is en de rest te negeren.

Bronvolgorde op smalle schermen

Een telefoon toont de compositie in één kolom, en die kolom volgt de volgorde van je bestanden. Een tegel in de rechterbovenhoek van een laptop kan op een telefoon de vierde positie innemen en toch de koptekst van het project weergeven.

Er is een snelle manier om dit te zien. Schakel stijlen uit in de browser en lees de pagina als platte tekst. Wat je krijgt, komt dicht in de buurt van de volgorde waarin een bezoeker met zijn duim scrollt. Als er iets belangrijks verborgen zit, verplaats de sectie dan naar binnen de HTML. Een extra mediaquery zou het alleen maar verbergen.

Voorbeeldcode bewerken zonder tegels te beschadigen

Beschouw de demo-inhoud als reserveonderdelen. Kopieer een tegel die zich al gedraagt zoals u wilt, plak deze waar de galerij verdergaat en wijzig vervolgens de afbeelding en de tekst erin. Klassenamen blijven zoals de auteur ze heeft gekozen, en halverwege het project van deze conventie afwijken kost meer dan zich eraan houden.

Verklein vervolgens het browservenster totdat het mozaïek in één kolom is samengevallen en kijk welk project een bezoeker als eerste te zien krijgt. Als dit het project is dat u aan een klant zou laten zien, is de sjabloon klaar voor uw inhoud.