De som kjenner meg, vet at jeg er litt over snittet glad i retrospill. Så mye at jeg de siste fem årene har arrangert retrospillmesse i Sandefjord.
Piksel-grafikk som mimer etter stilen til gamle TV-spill har vært i vinden lenge i moderne indie-spill. Stilen har også funnet veien til nettsider, blant annet Minecraft sin offisielle side og Nintendo sin side for spillet NES Remix.
Ikke alle får se disse Unicode-penisene
Grafikken i disse indiespillene og nettsidene er ofte inspirert av 8-bit stilen fra den første hjemmekonsollen til Nintendo: Nintendo Entertainment System (NES).
Nå har en japaner tatt det enda et skritt lenger og lagd et retroinspirert CSS-rammeverk. Men er det egentlig klart til å brukes? kode24 har testa.
NES.CSS
I helga ble det posta en lenke på samtlige utviklings-subreddits til et nytt CSS-rammeverk kalt NES.CSS.
Bak rammeverket står utvikleren BcRikko. I følge Github-profilen er han eller hun fra Tokyo i Japan, og sysler mest med utvikling rundt Vue.
BcRikko har riktignok et ønske om å bli en CSS-magiker, ifølge profilen sin. Kanskje det er derfor NES.CSS ser så bra ut?
Skru på mørkmodus med CSS
Det er ikke lett å finne ut mer om hvem som skjuler seg bak BcRikko-pseudonymet; på Github-sida er det meste på japansk, bloggen er likedan.
Heldigvis er den offisielle dokumentasjonen for rammeverket på engelsk, og ser flott ut. Her ser vi fort at rammeverket har fokus på komponenter; knapper, containere, skjemaelementer og ikoner.
Det er ikke akkurat bootstrap-preg over innholdet i dokumentasjonen – utvalget av komponenter er ganske begrenset. Her er det ingen accordians, modaler eller datovelgere. Så vil det være nok til å bruke som rammeverk for en hel nettside?
Styler om alt
Nettsida og Github-sida til NES.CSS ser kanskje fin og fjong ut, men i praksis er ikke rammeverket like lett å ta i bruk.
Vi hadde planer om å bruke det til å style vår highscore-liste. En liste som viser hvor mange poeng dere lesere har fått i julekonkurransen vår.
Sjekk hvordan du ligger an på vår highscore-liste!
Først prøvde vi å trekke NES.CSS rett inn i artikkelsiden vår. Da fikk vi problemet at rammeverket faktisk styler om hele nettsida di. NES.CSS bruker nemlig Bootstrap Reboot – en kodesnutt Bootstrap bruker for å normalisere CSS-verdier på sida.
Deretter oppdaga vi at stilene som NES.CSS viser fram på hjemmesida ikke er tilgjengelig i CDN-URL-en BcRikko ber oss bruke. Versjonen der henger nemlig ikke sammen med dokumentasjonen.
Etter mye om og men, endte vi opp med å bruke CSS-fila som BcRikko bruker på sin dokumentasjonsside. Den var heldigvis up to date. Deretter implementerte vi løsningen som en iFrame, for å unngå at NES.CSS korrumperte stilen på hele siden vår.
Merkelige ikoner
Så begynte vi å stusse på hvor ikonene kom fra.
Vi lasta tross alt kun CSS-fila, og det var ingen ikon-font å se. Svaret fant vi i kildekoden: NES.CSS bruker nemlig attributtet box-shadow til å tegne hele ikoner.
.icon {
box-shadow: 14px 3px #4566ae, 9px 3px #4566ae, 12px 3px #4566ae, 15px 3px #4566ae, 18px 3px #4566ae, 21px 3px #4566ae, 24px 3px #4566ae, 27px 3px #4566ae, 30px 3px #4566ae, 33px 3px #4566ae, 36px 3px #4566ae, 39px 3px #4566ae, 42px 3px #4566ae, 45px 3px #4566ae, 3px 6px #4566ae, 6px 6px #4566ae, 9px 6px #4566ae, 12px 6px #4566ae, 15px 6px #4566ae, 18px 6px #4566ae, 21px 6px #4566ae, 24px 6px #4566ae, 27px 6px #4566ae, 30px 6px #4566ae, 33px 6px #fff, 36px 6px #fff, 39px 6px #fff, 42px 6px #fff, 45px 6px #4566ae, 48px 6px #4566ae, 3px 9px #4566ae, 6px 9px #4566ae, 9px 9px #4566ae, 12px 9px #4566ae, 15px 9px #4566ae, 18px 9px #4566ae, 21px 9px #4566ae, 24px 9px #4566ae, 27px 9px #4566ae, 30px 9px #fff, 33px 9px #fff, 36px 9px #fff, 39px 9px #fff, 42px 9px #fff, 45px 9px #4566ae, 48px 9px #4566ae, 3px 12px #4566ae, 6px 12px #4566ae, 9px 12px #4566ae, 12px 12px #4566ae, 15px 12px #4566ae, 18px 12px #4566ae, 21px 12px #4566ae, 24px 12px #4566ae, 27px 12px #fff, 30px 12px #fff, 33px 12px #fff, 36px 12px #fff, 39px 12px #fff, 42px 12px #fff, 45px 12px #4566ae, 48px 12px #4566ae, 3px 15px #4566ae, 6px 15px #4566ae, 9px 15px #4566ae, 12px 15px #4566ae, 15px 15px #4566ae, 18px 15px #4566ae, 21px 15px #4566ae, 24px 15px #4566ae, 27px 15px #fff, 30px 15px #fff, 33px 15px #fff, 36px 15px #4566ae, 39px 15px #4566ae, 42px 15px #4566ae, 45px 15px #4566ae, 48px 15px #4566ae, 3px 18px #4566ae, 6px 18px #4566ae, 9px 18px #4566ae, 12px 18px #4566ae, 15px 18px #4566ae, 18px 18px #4566ae, 21px 18px #4566ae, 24px 18px #4566ae, 27px 18px #fff, 30px 18px #fff, 33px 18px #fff, 36px 18px #4566ae, 39px 18px #4566ae, 42px 18px #4566ae, 45px 18px #4566ae, 48px 18px #4566ae, 3px 21px #4566ae, 6px 21px #4566ae, 9px 21px #4566ae, 12px 21px #4566ae, 15px 21px #4566ae, 18px 21px #4566ae, 21px 21px #4566ae, 24px 21px #4566ae, 27px 21px #fff, 30px 21px #fff, 33px 21px #fff, 36px 21px #4566ae, 39px 21px #4566ae, 42px 21px #4566ae, 45px 21px #4566ae, 48px 21px #4566ae, 3px 24px #4566ae, 6px 24px #4566ae, 9px 24px #4566ae, 12px 24px #4566ae, 15px 24px #4566ae, 18px 24px #fff, 21px 24px #fff, 24px 24px #fff, 27px 24px #fff, 30px 24px #fff, 33px 24px #fff, 36px 24px #fff, 39px 24px #fff, 42px 24px #fff, 45px 24px #4566ae, 48px 24px #4566ae, 3px 27px #4566ae, 6px 27px #4566ae, 9px 27px #4566ae, 12px 27px #4566ae, 15px 27px #4566ae, 18px 27px #fff, 21px 27px #fff, 24px 27px #fff, 27px 27px #fff, 30px 27px #fff, 33px 27px #fff, 36px 27px #fff, 39px 27px #fff, 42px 27px #fff, 45px 27px #4566ae, 48px 27px #4566ae, 3px 30px #4566ae, 6px 30px #4566ae, 9px 30px #4566ae, 12px 30px #4566ae, 15px 30px #4566ae, 18px 30px #fff, 21px 30px #fff, 24px 30px #fff, 27px 30px #fff, 30px 30px #fff, 33px 30px #fff, 36px 30px #fff, 39px 30px #fff, 42px 30px #fff, 45px 30px #4566ae, 48px 30px #4566ae, 3px 33px #4566ae, 6px 33px #4566ae, 9px 33px #4566ae, 12px 33px #4566ae, 15px 33px #4566ae, 18px 33px #4566ae, 21px 33px #4566ae, 24px 33px #4566ae, 27px 33px #fff, 30px 33px #fff, 33px 33px #fff, 36px 33px #4566ae, 39px 33px #4566ae, 42px 33px #4566ae, 45px 33px #4566ae, 48px 33px #4566ae, 3px 36px #4566ae, 6px 36px #4566ae, 9px 36px #4566ae, 12px 36px #4566ae, 15px 36px #4566ae, 18px 36px #4566ae, 21px 36px #4566ae, 24px 36px #4566ae, 27px 36px #fff, 30px 36px #fff, 33px 36px #fff, 36px 36px #4566ae, 39px 36px #4566ae, 42px 36px #4566ae, 45px 36px #4566ae, 48px 36px #4566ae, 3px 39px #4566ae, 6px 39px #4566ae, 9px 39px #4566ae, 12px 39px #4566ae, 15px 39px #4566ae, 18px 39px #4566ae, 21px 39px #4566ae, 24px 39px #4566ae, 27px 39px #fff, 30px 39px #fff, 33px 39px #fff, 36px 39px #4566ae, 39px 39px #4566ae, 42px 39px #4566ae, 45px 39px #4566ae, 48px 39px #4566ae, 3px 42px #4566ae, 6px 42px #4566ae, 9px 42px #4566ae, 12px 42px #4566ae, 15px 42px #4566ae, 18px 42px #4566ae, 21px 42px #4566ae, 24px 42px #4566ae, 27px 42px #fff, 30px 42px #fff, 33px 42px #fff, 36px 42px #4566ae, 39px 42px #4566ae, 42px 42px #4566ae, 45px 42px #4566ae, 48px 42px #4566ae, 3px 45px #4566ae, 6px 45px #4566ae, 9px 45px #4566ae, 12px 45px #4566ae, 15px 45px #4566ae, 18px 45px #4566ae, 21px 45px #4566ae, 24px 45px #4566ae, 27px 45px #fff, 30px 45px #fff, 33px 45px #fff, 36px 45px #4566ae, 39px 45px #4566ae, 42px 45px #4566ae, 45px 45px #4566ae, 48px 45px #4566ae, 6px 48px #4566ae, 9px 48px #4566ae, 12px 48px #4566ae, 15px 48px #4566ae, 18px 48px #4566ae, 21px 48px #4566ae, 24px 48px #4566ae, 27px 48px #fff, 30px 48px #fff, 33px 48px #fff, 36px 48px #4566ae, 39px 48px #4566ae, 42px 48px #4566ae, 45px 48px #4566ae
}Teknikken er ikke ukjent, og har til og med blitt brukt til å tegne Mona Lisa tidligere. Men hvor lurt det faktisk er å bruke i produksjon, er en annen sak. For vår egen ledertavle ser ut til å slite med å tegne opp ikonene på iPhone.
PS: Om Nintendo-stilen ikke er din kopp med te, har den sør-afrikanske utvikleren 98mprice laget et rammeverk som etterligner grafikkstilen til Final Fantasy på den originale Playstation. 🤷
