Grens HTML-sjablonen

Schone kader-HTML-templates

Kader-HTML-templates bieden kant-en-klare secties waarin een zichtbaar kader of een scheidingslijn een afzonderlijke inhoudseenheid markeert, zoals een portfolioproject of een dienstenaanbod. Achter elk kader schuilt een klein, herhalend stukje markup, en de opbouw daarvan bepaalt hoe eenvoudig u de sectie kunt kopiëren, inkorten of opnieuw vullen.

Wat er binnen elk kader leeft

Een volledig kader duidt een onafhankelijke eenheid aan die ergens anders heen kan worden verplaatst, terwijl een scheidingslijn onderdelen scheidt die nog steeds bij elkaar horen. De omrande lay-outs die u het vaakst tegenkomt, zijn als volgt opgebouwd:

• portfoliorasters, waarbij elk project zich gedraagt als een op zichzelf staand "artikel" met een titel, een beschrijving en een link;
• featurekaarten die in elke omrande container dezelfde volgorde van kop, tekst en actie herhalen;
• redactionele blokken, waarbij één scheidingslijn een samenvatting scheidt van de bijbehorende details binnen een enkele "sectie";
• specificatiepanelen, waarbij één buitenkader de groep bijeenhoudt en dunne interne lijnen deze in rijen verdelen.

Een project kan worden gedupliceerd, verwijderd of van volgorde worden veranderd zonder de aangrenzende elementen te verstoren. Een enkele rij specificaties stelt buiten zijn groep weinig voor; elke rij een eigen kader geven leidt alleen maar tot geneste structuren die u later weer moet ontwarren. Wanneer een lege rij items al scheidt, maakt het inpakken van elk item om een lijn te tekenen de code dieper zonder enige zichtbare winst.

Het Grid-element van Nicepage is ideaal voor dergelijke herhaalde groepen. Het raster verzorgt de indeling en elk item behoudt zijn eigen kader, zodat een nieuw project direct in de rij past zonder deze opnieuw op te bouwen.

Slanke markup die u kunt herhalen

Een galerij of een rij prijspanelen blijft overzichtelijk wanneer elke eenheid hetzelfde korte patroon volgt. Elke kaart opent met een kop één niveau onder de sectiekop en bevat vervolgens de inhoud en een optionele actie. Een kaart toevoegen betekent simpelweg één blok kopiëren en de tekst wijzigen. Templates die elke kaart net iets anders opbouwen, met hier een extra wrapper en daar een ontbrekende kop, veranderen een snelle aanpassing in speurwerk.

Leesvolgorde nadat kolommen samenvouwen

Wanneer kolommen met omrande kaarten op een smal scherm samenvouwen tot één kolom, worden ze getoond in de volgorde waarin ze in de markup verschijnen. Sommige templates bouwen een rij afbeeldingen met daaronder een afzonderlijke rij bijschriften. Op een laptop ziet dat eruit als vier nette projecten, maar op een telefoon verschijnt elke afbeelding eerst en volgen de bijschriften als één grote groep erachteraan.

Met een goed kader-HTML-template kunt u naar elke regel wijzen en precies zeggen waar deze bij hoort. Een snelle blik op de code moet laten zien welke omkaderde eenheden op zichzelf staan, welke lijnen alleen een groep verdelen en welke blokken intact naar een ander deel van de site kunnen worden verplaatst.