WormKit

WormKit är ett mindre HTML- och Javascript-toolkit som tillhandahåller ett ramverk för att snabbt skapa responsiva hemsidor, med HTML-element som är anpassade för mindre bildskärmar (surfplattor och telefoner).

Ramverket har en grid-layout för flera olika upplösningar (1600px, 1280px, 960px, 640px och 320px). Det är rekommenderat att använda sig av maximalt tre kolumner.


Följande HTML-element kan omdesignas i ramverket:

  • input[type=”text”]
  • input[type=”password”]
  • input[type=”tel”]
  • input[type=”checkbox”]
  • select
  • textarea
  • table

Förutom dessa så innehåller ramverket även ett nytt element som vi valt att kalla pseudo-select.

Pseudo-select är ett textfält vars innehåll kan skickas till ett lokalt PHP-script genom att ange dess URL i attributen data-url.

Textfältets innehåll kan sedan tolkas i scriptet och skickas tillbaka och visas för användaren på lämpligt sätt.

Ett exempel då pseudo-select-elementet är väldigt användbart är när man behöver välja någonting ur en väldigt lång lista, t ex ett stort kundregister. Att scrolla igenom en lista med flera tusen kunder, kan vara väldigt trist och jobbigt. Om man istället använder ett pseudo-select-element så låter man användaren ange ett filter, som skickas till det angivna scriptet. Scriptet kan då skicka tillbaka en lista med kunder som innehåller filtertexten, och användaren kan hitta den eftersökta kunden i en mycket mindre och mer lättnavigerad lista.

Ladda hem WormKit!

WormKit i systemläge

  • slide

WormKit i bloggläge (med 1 kolumn)

  • slide

WormKit i bloggläge (med 3 kolumner)

  • slide

WormKit i mindre enheter (som smartphones och surfplattor i porträttläge)

  • slide
  • Tabeller (table) som har en bredd som är större än enheten man granskar den med, tilldelas en horisontell scroll-funktion för att datan inte skall förvrängas och bli svårläst.
  • Textrutor (textarea) som innehåller text som sträcker sig längre än textrutans längd tilldelas två navigationsknappar på höger sida (upp/ner), som hjälper en scrolla igenom textrutan då navigering av textrutor kan vara krångligt i mobila enheter.

© 2014 Wormwood Systems.