Mosaik HTML-mallar

Responsiva mosaik-HTML-mallar

En mosaik-HTML-mall anländer som filer som du kan öppna i en editor: en sida, ett stilark och bilder som redan finns inuti sektioner med olika bredder. Demoskärmbilden visar ett arrangemang av dessa plattor. Allt du gör efteråt sker i koden bakom dem, så källkoden är värd att öppna före förhandsgranskningen.

Det mesta av det arbetet stannar kvar på innehållsnivå. Foton ersätts, bildtexter skrivs om och ett kort dupliceras när galleriet växer förbi demon.

Markering bakom ojämna bildblock

Klattkompositioner byggs på väldigt olika sätt, och skillnaden syns i det ögonblick du lägger till ytterligare ett objekt. Ett rutnät som hålls samman av kolumn- och radomfång fortsätter att fungera när ett kort kopieras. En layout som är fäst med fasta förskjutningar ber om manuell reparation varje gång.

Avsnitt som dessa bär vanligtvis den största vikten på en mosaiksida:

• en bred bildruta med en kort titel placerad över den
• ett kort som upprepas genom ett galleri eller en kategoriflöde
• en textruta för en tjänst, en anteckning eller ett citat
• en uppmaningsruta som stänger det visuella klustret

Ingen mall levererar alla som standard, så det hjälper att öppna demon, räkna vad som verkligen är återanvändbart och ignorera resten.

Källordning på smala skärmar

En telefon visar kompositionen i en enda kolumn, och den kolumnen följer ordningen i din fil. En ruta i det övre högra hörnet av en bärbar dator kan rankas som nummer fyra på en telefon samtidigt som den fortfarande innehåller huvudprojektet.

Det finns ett snabbt sätt att se detta. Stäng av stilar i webbläsaren och läs sidan som vanlig text. Det du får är nära den sekvens en besökare skrollar med en tumme. Om något viktigt är begravt där, flytta avsnittet inuti HTML-koden. En mediefråga till skulle bara dölja det.

Redigera exempelkod utan att bryta kakel

Behandla demoinnehåll som reservdelar. Kopiera en kakel som redan beter sig som du behöver, klistra in den där galleriet fortsätter och ändra sedan bilden och texten inuti. Klassnamnen förblir som författaren valde dem, och att argumentera mot den konventionen halvvägs genom projektet kostar mer än att följa den.

Begränsa sedan webbläsarfönstret tills mosaiken kollapsar till en enda kolumn och se vilket projekt en besökare stöter på först. Om det är det du skulle visa en klient är mallen redo för ditt innehåll.