Mosaik HTML-mallar

Responsiva mosaik-HTML-mallar

En mosaik-HTML-mall levereras som filer du kan öppna i en redigerare: en sida, en stilmall och bilder som redan är placerade i sektioner av varierande bredd. Skärmdumpen av demon visar en möjlig placering av dessa rutor. Allt du gör därefter sker i koden bakom dem, så det lönar sig att öppna källkoden före förhandsgranskningen.

Det mesta av det arbetet stannar på innehållsnivå. Foton byts ut, bildtexter skrivs om och ett kort dupliceras så snart galleriet växer bortom demon.

Koden bakom ojämna bildblock

Rutmönsterkompositioner byggs på väldigt olika sätt, och skillnaden märks så fort du lägger till ytterligare ett objekt. Ett rutnät som hålls samman av kolumn- och radspann fortsätter att fungera när ett kort kopieras. En layout som är låst med fasta förskjutningar kräver däremot manuella korrigeringar varje gång.

Sektioner som dessa bär oftast den tyngsta delen på en mosaiksida:

• en bred bildruta med en kort rubrik placerad ovanpå
• ett kort som upprepas genom ett galleri eller ett kategoriflöde
• en textruta för en tjänst, en notering eller ett citat
• en uppmaningsruta som avsluter det visuella klustret

Ingen mall levererar samtliga som standard, så det underlättar att öppna demon, räkna vad som faktiskt går att återanvända och bortse från resten.

Källkodsordning på smala skärmar

En mobiltelefon visar kompositionen i en enda kolumn, och den kolumnen följer ordningen i din fil. En ruta i det övre högra hörnet på en bärbar dator kan hamna på fjärde plats på en mobiltelefon, även om den presenterar huvudprojektet.

Det finns ett snabbt sätt att undersöka detta. Stäng av stilarna i webbläsaren och läs sidan som ren text. Det du ser är mycket nära den sekvens en besökare skrollar igenom med tummen. Om något viktigt hamnar för långt ner flyttar du sektionen inuti HTML-koden. Ytterligare en media query skulle bara dölja problemet.

Redigera exempelkod utan att förstöra rutmönstret

Betrakta demoinnehållet som reservdelar. Kopiera en ruta som redan fungerar som du vill, klistra in den där galleriet fortsätter och byt sedan ut bilden och texten inuti. Låt klassnamnen vara som skaparen valde dem – att motarbeta den konventionen mitt i projektet kostar mer än att följa den.

Gör sedan webbläsarfönstret smalare tills mosaiken fälls ihop till en enda kolumn, och se vilket projekt en besökare möter först. Om det är det projekt du helst skulle visa en kund är mallen redo för ditt innehåll.