Gräns HTML-mallar

Rena HTML-mallar med ramar

HTML-mallar med ramar erbjuder färdiga sektioner där en synlig ram eller avgränsare markerar en distinkt innehållsenhet, till exempel ett portföljprojekt eller ett tjänsteerbjudande. Bakom varje ram finns en liten, återkommande del markup, och dess uppbyggnad avgör hur enkelt du kan kopiera, trimma eller fylla på sektionen.

Vad som ryms i varje ram

En komplett ram signalerar en fristående enhet som kan flyttas någon annanstans, medan en avgränsare separerar delar som fortfarande hör ihop. De inramade layouter du oftast stöter på är uppbyggda så här:

• portföljrutnät, där varje projekt fungerar som en självständig "artikel" med rubrik, beskrivning och länk;
• funktionskort som upprepar samma ordning av rubrik, text och åtgärd i varje inramad behållare;
• redaktionella block, där en enda avgränsare skiljer en sammanfattning från dess detaljer inom en och samma "sektion";
• specifikationspaneler, där en yttre ram håller ihop gruppen och tunna invändiga linjer delar upp den i rader.

Ett projekt kan dupliceras, tas bort eller sorteras om utan att störa intilliggande element. En enskild rad med specifikationer betyder inte mycket utanför sin grupp, så att ge varje rad en egen ram skapar bara onödig kapsling som du senare måste reda ut. När ett tomt mellanrum redan separerar objekten gör en extra omslutning för att rita en linje bara koden djupare utan någon visuell vinst.

Nicepages Rutnätselement passar perfekt för sådana upprepade grupper. Rutnätet hanterar placeringen och varje objekt behåller sin egen ram, så att ett nytt projekt glider in i raden utan att du behöver bygga om den.

Ren kod du kan upprepa

Ett galleri eller en rad med prispaneler förblir lätthanterligt när varje enhet följer samma korta mönster. Varje kort inleds med en rubrik en nivå under sektionsrubriken, följt av sitt innehåll och en valfri åtgärd. Att lägga till ett kort innebär helt enkelt att kopiera ett block och ändra texten. Mallar som bygger upp varje kort på ett lite annorlunda sätt, med ett extra omslutande element här och en saknad rubrik där, förvandlar en snabb redigering till ett detektivarbete.

Läsorordning när kolumner faller samman

När kolumner med inramade kort staplas i en enda kolumn på en smal skärm lägger de sig i den ordning de visas i källkoden. Vissa mallar bygger upp en rad med bilder och placerar en separat rad med bildtexter undertill. På en bärbar dator ser det ut som fyra prydliga projekt, men på en mobil visas först alla bilder och därefter klumpas alla bildtexter ihop.

En bra HTML-mall med ramar låter dig peka på vilken kodrad som helst och direkt se vad den tillhör. En snabb blick i koden ska visa vilka inramade enheter som står för sig själva, vilka linjer som endast delar av en grupp och vilka block som kan flyttas intakta till en annan del av webbplatsen.