Layout

Designen av tjänsten påverkas av målgrupp men försök att utgå från “mobile first” eftersom vi inte alltid kan göra antaganden om vilka plattformar som används.

Visuell hierarki

Används för att förstå stora mängder med information. Visuell hierarki kan hjälpa användarna att förstå vilken information som är viktig.

Rutnät

Bootstraps inbyggda rutnätssystem gör det väldigt enkelt att bygga responsiva layouter som fungerar bra på olika enheter.

Rutnätssystemet går ut på att man delar upp sidan i 12 kolumner och genom att ge specifika klasser till olika behållare får man dem att ta upp olika många kolumner beroende på browserns totala bredd. Man kan t ex definera en <div> att vara 6 kolumner bred på en större upplösning och 12 kolumner på en mindre upplösning.

Man placerar varje behållare i större behållare med klassen .row och den behållaren måste befinna sig inuti antingen en .container (låst bredd enligt tabellen nedan, se raden Behållarbredd) eller en .container-fluid (full bredd, 100%).

Läs mer om Bootstraps rutnätssystem (Grid).

Rutnäts-inställningar

	Väldigt små	Små	Mellanstora	Stora
Enhet	Telefoner (<768px)	Surfplattor (≥768px)	Desktops (≥992px)	Desktops (≥1200px)
Prefix	col-xs-	col-sm-	col-md-	col-lg-
Kolumnbredd	Auto	~62px	~81px	~97px
Behållarbredd	Auto	750px	970px	1170px

Startsida

Utgå från tjänstens behov med fokus på det som ska göras på sidan. Varför kommer de dit?

Exempel: (bild)

Sidhuvud

Sidhuvudet används tillsammans med sidfoten, för att signalera källa och tjänstens namn.

Vid behov använd toppnavigation för länkar som till exempel: Logga in, Feedback, Kontakt.

För att fästa sidhuvudet till toppen av sidan (sk "fixed" eller "sticky"), ge den klassen .navbar-fixed-top och anpassa dina marginaler efter behov. Se exempel.

Sidhuvud version 1

I denna version skrivs KB:s logotyp följt av tjänstens namn ut i headern. Typsnittet som ska användas för tjänstens namn är Open sans googlefont. Viktigt att tänka på är att länka logotyp + namn till tjänstens startsida. Vid behov ange beskrivande text om tjänsten i kursiv stil.

Exempel

<div class="navbar">
	<div class="container">
	  <div class="navbar-header">
	    <a class="navbar-brand navbar-logo" href="#"><img src="./assets/kb_logo_black.svg" alt="" /></a>
	    <a class="navbar-brand" href="#">Projektnamn</a>
	  </div>
	  <div id="navbar" class="navbar-collapse collapse">
	    <ul class="nav navbar-nav">
	      <li class="active"><a href="#">Home</a></li>
	      <li><a href="#about">About</a></li>
	      <li><a href="#contact">Contact</a></li>
	      <li class="dropdown">
	        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
	      </li>
	    </ul>
	  </div>
	</div>
</div>
<br>
<div class="navbar navbar-inverse">
	<div class="container">
	  <div class="navbar-header">
	    <a class="navbar-brand navbar-logo" href="#"><img src="./assets/kb_logo_white.svg" alt="" /></a>
	    <a class="navbar-brand" href="#">Projektnamn</a>
	  </div>
	  <div id="navbar" class="navbar-collapse collapse">
	    <ul class="nav navbar-nav">
	      <li class="active"><a href="#">Home</a></li>
	      <li><a href="#about">About</a></li>
	      <li><a href="#contact">Contact</a></li>
	      <li class="dropdown">
	        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
	      </li>
	    </ul>
	  </div>
	</div>
</div>

Sidfot

Sidfot används tillsammans med sidhuvudet, för att signalera källa och tjänstens namn.

Det finns två varianter av sidfötter, den minimala och den utökade. Det går att kombinera de båda alternativt att endast använda den minimala.

Användning

Använd .footer-container för att stapla flera footers inuti footer-tagen.

Fästa sidfoten

För att fästa sidfoten till botten av sidan (sk "sticky") se detta exemplet.

Minimal sidfot

Använd den minimala sidfoten för tjänster där behovet endast är att förmedla att KB är avsändare. Länka Kungliga biblioteket till www.kb.se och ange rätt länk till specifik support för tjänsten. Kan leda till Kundo-forum, mejladress eller en kontaktsida.

Exempel

<div class="container-fluid">
  <footer class="footer">
    <div class="footer-container bg-happy-muted-light-blue">
    <div class="container">
      <div class="col-md-2 text-center">
        <img src="./assets/kb_logo_black.svg" class="logo-medium" alt="" />
      </div>
      <div class="col-md-10 text-black">
        <p>
          <strong><a href="http://www.kb.se" alt="Länk till Kungliga bibliotekets webbplats">
            KUNGLIGA BIBLIOTEKET
          </a></strong>
          <br>
          <span>Support: <a href="mailto:test.test@kb.se">test.test@kb.se</a></span>
        </p>
      </div>
    </div>
    </div>
  </footer>
</div>

Utökad sidfot

Använd den utökade sidfoten om det finns behov av att förmedla ytterligare information som till exempel fler kontaktvägar, relaterade tjänster, licensuppgifter eller redovisa samarbeten med övriga organisationer för den specifika tjänsten. Tänk på att använda ytan i den utökade sidfoten endast för att stötta användarnas behov av mer information för att nå sina mål.

Exempel

<div class="container-fluid">
  <footer class="footer">
    <div class="footer-container bg-gray-lighter">
      <div class="container">
        <div class="col-md-3">
          <h1>List 1</h1>
          <ul class="list-unstyled">
            <li>Lorem ipsum</li>
            <li>Dorem</li>
            <li>Ipsum santi laninum</li>
            <li>Verti absolutom</li>
            <li>Neo geosatium</li>
            <li>Verti absolutom</li>
            <li>Neo geosatium</li>
          </ul>
        </div>
        <div class="col-md-3">
          <h1>List 2</h1>
          <ul class="list-unstyled">
            <li>Ipsum santi laninum</li>
            <li>Lorem ipsum</li>
            <li>Neo geosatium</li>
            <li>Verti absolutom</li>
            <li>Neo geosatium</li>
            <li>Dorem</li>
            <li>Verti absolutom</li>
          </ul>
        </div>
        <div class="col-md-3">
          <h1>List 3</h1>
          <ul class="list-unstyled">
            <li>Verti absolutom</li>
            <li>Ipsum santi laninum</li>
            <li>Dorem</li>
            <li>Lorem ipsum</li>
            <li>Neo geosatium</li>
            <li>Verti absolutom</li>
            <li>Neo geosatium</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer-container bg-happy-muted-light-blue">
      <div class="container">
        <div class="col-md-2 text-center">
          <img src="./assets/kb_logo_black.svg" class="logo-medium" alt="" />
        </div>
        <div class="col-md-10 text-black">
          <p>
            <strong><a href="http://www.kb.se" alt="Länk till Kungliga bibliotekets webbplats">
              KUNGLIGA BIBLIOTEKET
            </a></strong>
            <br>
            <span>Support: <a href="mailto:test.test@kb.se">test.test@kb.se</a></span>
          </p>
        </div>
      </div>
    </div>
  </footer>
</div>

Navigation

Paginering

Exempel

<nav>
  <ul class="pagination">
    <li class="pagination-previous">
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="pagination-next">
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>