Icoon CSS-sjablonen

Functionele icoon-CSS-sjablonen gestyled voor kaarten en klikbare bedieningselementen

Elk icoon brengt een paar subtiele beslissingen met zich mee: hoe groot het is, welke vorm erachter ligt en wat er gebeurt als de muisaanwijzer eroverheen beweegt. Icoon-CSS-sjablonen bevatten die beslissingen al. De blokken variëren van dienstenkaarten en contactrijen tot icoonknoppen. Gedeelde klassen stylen elk item in een groep consistent, zodat een nieuwe kaart automatisch dezelfde afmetingen en kleur krijgt.

Regels ingebouwd in typische kaarten

Blokken in deze categorie bevatten doorgaans regels zoals deze:

1. één breedte en hoogte voor elk icoon in de groep, zodat er geen per ongeluk groter oogt;
2. een gevulde of omrande cirkel achter het symbool, of een vierkant met afgeronde hoeken;
3. een vaste tussenruimte tussen het icoon en de bijbehorende kop, waardoor rijen uitgelijnd blijven wanneer titels over meerdere regels lopen;
4. een accentkleur gekoppeld aan het kleurenpalet van het thema, zodat de hele set tegelijk mee verandert.

Deze regels gelden zowel voor SVG-iconen als voor icoonlettertype-symbolen. In een contactrij delen alle kanaaliconen dezelfde grootte. De e-mailregel kan alsnog een opvallender accent krijgen als dat uw hoofdkanaal is. Lijndikte doet er ook toe, aangezien dunne lijniconen op telefoonschermen veel eerder wegvallen dan gevulde iconen.

Herhaalde cellen en klikbare statussen

In Nicepage herhaalt het Grid Repeater Element de indeling en stijl van zijn cellen. Elke kolom behoudt nog steeds zijn eigen icoon en tekst. Wijzigt u de cirkelkleur in één cel, dan volgt de rest vanzelf. Een statisch dienstenraster heeft zelden meer nodig. Klikbare iconen voor zoeken, delen of het sluiten van een paneel werken anders, en het sjabloon dient deze statussen te definiëren:

1. een standaardweergave die rustig oogt naast de omringende tekst;
2. een hover-status die de kleur of achtergrond aanpast zodra de aanwijzer verschijnt;
3. een actieve of focus-status voor de klik zelf en voor toetsenbordgebruikers;
4. een gemarkeerde status die de huidige keuze aangeeft, zoals een geselecteerde filter.

Hele groepen in één keer opnieuw inkleuren

Met de themakleuren in de Nicepage-site-instellingen werkt het wijzigen van een accent elk icoon bij dat dit accent gebruikt op de pagina's van het project. Waarschuwings- en bevestigingssymbolen blijven beter buiten dat accent, waarbij ze qua formaat aansluiten bij nabijgelegen elementen en hun eigen kleur gebruiken. Afmetingen kunnen ook per responsieve modus worden aangepast, zodat een groot decoratief symbool op smartphones verkleint. Schieten de visuele bedieningselementen tekort, dan voegt Custom CSS Code een regel toe aan een enkel element, één pagina of de complete site.

Een sjabloon voor een dienstenraster kan volstaan met één statische icoonstijl. Controleer bij knoppen en schakelaars eerst de statussen voordat u naar het palet kijkt, want een besturingselement dat bij een klik geen verandering toont, voelt defect aan.