Dokumentation

Beskrivning och dokumentation över teknik, komponenter och funktioner samt riktlinjer hur dessa ska användas.

Syftet med prototypen är att tillhandahålla utvecklarhjälp i form av konkreta exempel på hur moduler och funktioner ska byggas. Prototypen är baserad på Twitter Bootstrap.

Bootstrapkomponenter

En komplett lista över de inbyggda komponenterna i Bootstrap finns här.


Semantik

Det är mycket viktigt att alla e-tjänster utvecklas med korrekt semantisk HTML5 (HTML4 eller XHTML får ej användas). Det innebär att rätt HTML-tagg skall användas till rätt sak. Är det en rubrik skall det vara ett H-element. Är det brödtext skall det vara ett p-element. Är det en oordnad lista skall det vara ett ul-element. osv. Detta för att tillgängligheten skall bli optimal både för sökmotorer och exempelvis personer som använder skärmläsare eller blindskriftskrivare.

Klickbara element måste gå att komma åt även utan mus, dvs via tangentbordet eller på annat vis. Därför måste länkar alltid vara a-taggar <a href="#">Länk</a> och knappar alltid vara <button>Knapp</button>. Annars går de inte att tabba till.

Bilder måste ha alt-attribut som beskriver vad bilden föreställer.

Detta är inget unikt för e-tjänsteplattformen utan följer W3C's standarder och webbriktlinjer.se

Det är även mycket viktigt att formulär formateras korrekt med id:n, beskrivningar, aria-attribut, data-attribut, for-attribut på labels, inputs med mera. Läs mer om formulär.

Läs mer om semantik

Tabbordning

Det är viktigt att tabbordningen i e-tjänsterna är logisk. Därför måste markupen struktureras utifrån detta. Att manuellt sätta tabindex="3" skall inte behövas utom i de fall där ett element INTE skall gå att tabba till. Exempelvis om man har ett modallager synligt ska man inte kunna tabba till element under modallagret. Samma sak med dropdown-menyer. Detta görs genom att sätta tabindex="-1". OBS! att Bootstrap gör detta automatiskt med modallager och dropdown-menyer.

Testa din tabbordning genom att helt enkelt tabba dig genom siten. Hamnar du på det element du förväntar dig? Om inte behöver du antagligen strukturera om din markup. Om elementen i din markup kommer i ordning kommer tabbordningen att bli logisk.


Gridsystem

Bootstrap använder sig av ett 12-kolumners gridsystem. Här finns dokumentationen för denna grid.


Utilityklasser

Utilityklasser används för att skriva över CSS som vissa komponenter får per default t.ex. margin eller padding. De flesta utilityklasser är flaggade !important och skall därför väga tyngre än defaultstylingen.

En komplett lista över alla utilityklasser finns här.


Ikoner

I Stockholms stads e-tjänster finns ett antal tillgängliga ikoner. Du hittar en lista med samtliga ikoner här.

Ikonerna kan användas som klasser på vilket element som helst. Klasserna finns beskrivna i ikonlistan

Det finns ett antal utility-klasser för att få ikonerna att bete sig på olika sätt. Dessa hittas under utilityklasserna


Ikoner

I Stockholms stads e-tjänster finns ett antal tillgängliga ikoner. Du hittar en lista med samtliga ikoner här.

Ikonerna kan användas som klasser på vilket element som helst. Klasserna finns beskrivna i ikonlistan

Det finns ett antal utility-klasser för att få ikonerna att bete sig på olika sätt. Dessa hittas under utilityklasserna


Typografi

Typsnitt

Ur Varumärkesmanualen för Stockholms stad: Vår typografi är en viktig del av Stockholms stads grafiska profil. Stockholm Type och Stockholm Type Display är Stockholms stads egna typsnitt specialritat av schweizaren Emmanuel Rey. Genom ett särskiljande typsnitt med mycket identitet skapar vi igenkänning och kan lyfta fram och knyta samman våra verksamheter. Som kompletterande typsnitt använder vi Times New Roman, Arial och Open Sans.

Stockholm Type Bold

Stockholm Type Regular

Open Sans Semibold

Open Sans Regular

Open Sans Light

Brödtext

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestievehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam.

Rubriker

Alla rubrikstilar (h1-h6) finns även som classer:
.alpha - som h1
.beta - som h2
.gamma - som h5
.delta - som h4
.epsilon - som h5
.zeta - som h6

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum
Lorem ipsum

Ingress

Brödtext quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus.

Inline element

Det här är en länktext

Strong används för att indikera att texten är viktig

Em används för att visa att texten har extra betoning

B-elementet skiljer sig stilmässigt från annan text utan att lägga extra vikt på texten.

I-elementet är text som skiljer sig utseendemässigt från övrig text.

U-elementet är understrukten text.

Denna text är raderad och denna text har ersatt den gamla.

Denna text är genomstruken.

Superscript för sådant som t.ex. ®

Subscript för sådant som t.ex. H2O

Den här texten är mindre än normal text för exempelvis finstilt.

Förkortning: HTML

Keybord input: Cmd

"Detta är ett citat"

Detta är en citation

DFN elementet indikerar en definition.

MARK element indikerar en markering.

Detta är inline-kod.

Detta är exempel på data från ett datorprogram.

VARIABEL elementet, sådom x = y.


Cookies

Cookieinformation måste finnas i e-tjänsterna. Cookieinformationa utformning skall vara genomgående med Stadens övriga webbar. Exempel på hur den skall se ut hittas här.


AJAX

Om ett område uppdateras utan att sidan laddas om ska detta vara uppmärkt med WAI-ARIA attributet aria-live

Använd följande värden:

  • Off = Använd för något som uppdateras ofta, exempelvis aktieinformation.
  • Polite = Om en ändring bara ska meddelas om användaren inte har något viktigt för sig.
  • Assertive = Använd när det händer något viktigt som användaren bör uppmärksammas om så snart som möjligt.

Nedanstående exempel är taget från filtreringen och är alltså diven som laddas om när en filtrering görs.

<div aria-live="assertive" class="col-md-7 col-sm-12 col-xs-12 filter-list">

Formulär

Formulär byggs upp med bootstraps gridsystem. Hur fälten skall struktureras beror på vilka fält som behövs. Det viktiga här är att fälten fungerar även mobilt. Oftast innebär det att kolumnerna kollapsar helt till 100% bredd för lägre upplösningar.

Detta åstadskoms genom att specificera antal kolumner för olika breakpoints. Se nedan exempel.

<div class="col-xs-12 col-sm-6 col-md-4">
    <div class="form-group">
        <input type="text"
            class="form-control"
            placeholder="Förnamn">
    </div>
</div>

I ovanstående exempel kommer fälten ta upp 4 kolumner i medium, 6 i small och kollapsa helt och ta upp alla 12 kolumner i extra small.

OBS att själv formulärsfälten alltid sträcker sig till 100% bredd av sin förälder.

Validering

I denna styleguide/prototyp valideras formulären front-end med Bootstrap Validator som är ett tillägg till Bootstrap. Konkreta exempel i prototypen finns på Startsidan och i Wizarden.

För att valideringsscriptet skall köras krävs att formuläret har följande data-attribut data-toggle="validator".

<form data-toggle="validator" role="form">

OBS! att det är valfritt att använda frontendvalidering med Boostrap validator. Det går även bra att använda MVC eller andra teknologier. Det viktiga är att utseendet och tillgänglighetskraven följer denna styleguide.

Tillgänglighet

För att valideringen skall fungera korrekt och ge korrekt feedback både till vanliga användare och till de som t.ex. surfar med skärmläsare krävs ett antal extra attribut och element.

<div class="form-group">
    <label for="exampleInputPNumber" class="required">Personnummer</label>
    <input type="text"
        class="form-control"
        id="exampleInputPNumber"
        aria-describedby="pNumberValidationMessage"
        placeholder="ÅÅÅÅMMDD-XXXX"
        pattern="^[12]{1}[90]{1}[0-9]{6}-[0-9]{4}$"
        data-error="Vänligen kontrollera fältet"
        aria-valuemin="13"
        aria-valuemax="13"
        required>
    <div id="pNumberValidationMessage" class="help-block with-errors form-control-feedback"></div>
</div>

Om ett fält skall valideras eller behöver en enklare instruktion kopplad till sig används aria-describedby="pNumberValidationMessage" där "pNumberValidationMessage" refererar till ett elementet med detta ID. I det här fallet
<div id="pNumberValidationMessage" class="help-block with-errors form-control-feedback"></div>

I denna container kan det dels ligga en beskrivande till som förtydligar hur fältet skall formateras men här hamnar även valideringsmeddelanden. Valideringsmeddelandet styrs av data-error="" attributet.

Validera

För att validera ett fält finns flera alternativ man kan använda. <input type="email"> validerar e-postadresser per automatik. Vill man validera på något specifik använder man attributet pattern="" och regular expressions.

Exempelvis validering på enbart siffror pattern="^[0-9]*$" eller som i ovanstående exempel med validering på personnummer pattern="^[12]{1}[90]{1}[0-9]{6}-[0-9]{4}$"

Max och min-värde

För att ytterligare förenkla för användaren kan ma använda ett minimum och ett maximumvärde för hur många tecken ett fält får innehålla. detta görs med aria-valuemin="7" samt aria-valuemax="25"

Required

Till sist används required för att göra ett fält obligatoriskt. Detta kräver att fältets label får klassen required också <label for="" class="required">labeltext</label>

Fältmatchning

Fält kan ställas in for att matcha varandra. Det är användsbart t.ex. när lösenord eller e-post skall anges. Detta görs med två extra data-arribut. data-match="#exampleInputPassword" som anger ID't på fältet som skall matchas, och data-match-error="Lösenorden matchar inte" som anger felmeddelandet när fälter inte matchar.

Exempel nedan

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="form-group">
            <label for="exampleInputPassword" class="required">Lösenord</label>
            <input type="password"
                class="form-control"
                id="exampleInputPassword"
                aria-describedby="passwordValidationMessage"
                data-error="Lösenordet är för kort"
                placeholder="Välj lösenord"
                aria-valuemin="8"
                required>
            <div class="help-block with-errors form-control-feedback" id="passwordValidationMessage">Minst 8 tecken</div>
        </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="form-group">
            <label for="exampleInputPassword2" class="required">Bekräfta lösenord</label>
            <input type="password"
                class="form-control"
                id="exampleInputPasswordConfirm"
                aria-describedby="password2ValidationMessage"
                data-match="#exampleInputPassword"
                data-match-error="Lösenorden matchar inte"
                placeholder="Bekräfta lösenord"
                aria-valuemin="8"
                required>
            <div class="help-block with-errors form-control-feedback" id="password2ValidationMessage"></div>
        </div>
    </div>
</div>

Ej tillgängliga fält

Vissa fält skall ej gå att uppdatera via gränssnittet utan innehåller data som kommer från andra system. Exempelvis personnummer. Dessa sätts då som ej tillgängliga med attributet disabled

<input type="text" class="form-control" id="exampleInputPNumber" aria-describedby="pNumberValidationMessage" placeholder="ÅÅÅÅMMDD-XXXX" pattern="^[12]{1}[90]{1}[0-9]{6}-[0-9]{4}$" data-error="Vänligen kontrollera fältet" disabled=">

Förtydliga fält

Bootstrap har en inbyggd funktion där man kan lägga till ett tillägg "inuti" ett fält. Det kan vara bra för att förtydliga vad är handlar om för fält, exempelvis för e-post. Detta görs med en span och klassen input-group-addon

@

Koden för ovanstående exempel ser ut så här.

<div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="email" class="form-control" id="email" aria-describedby="emailValidationMessage" placeholder="jane.doe@example.com" pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,15}$" data-error="Vänligen kontrollera fältet">
</div>

Det finns även möjlighet att lägga en beskrivande text under själva fältet för att förtydliga vilken information som skall fyllas i. I det här fallet texten "Endast siffror"

Koden för ovanstående exempel ser ut så här

<div class="form-group">
    <label for="exampleInputShoeSize" class="required">Skostorlek</label>
    <input type="num"
        class="form-control"
        id="exampleInputShoeSize"
        aria-describedby="shoeSizeValidationMessage"
        placeholder="34-47"
        data-error="Vänligen kontrollera fältet"
        pattern="^[0-9]*$"
        required>
    <div class="help-block with-errors form-control-feedback" id="shoeSizeValidationMessage">Endast siffror</div>
</div>

Fler exempel finns på Startsidan och i Wizarden.

Fält utan synlig label

Om behov uppstår där ett fält inte kan eller får ha en synlig label eller om en knapp inte innehåller någon text utan endast en ikon skall dessa få attributet aria-label="text" för att beskriva vad fältet eller knappens funktion är.

<input type="text" name="text" aria-label="Förnamn">
<button class="btn btn-primary icon-arrow-right-light u-icon-right u-icon-btn-sm" arial-label="Gå vidare"></button>

Gruppera fält

Fält med en logisk koppling till varandra t.ex. radioknappar eller checkboxar skall wrappas i ett fieldset med en beskrivande legend.

Kön

Koden för ovanstående exempel ser ut som följande

<fieldset>
    <div class="radio">
        <legend class="label-legend required">Kön</legend>
        <div class="form-group has-success">
            <input type="radio" id="field-radio-male" name="radio" value="male" aria-describedby="sexValidationMessage" class="visuallyhidden" data-error="Fältet är obligatoriskt" required="">
            <label for="field-radio-male" class="field-option field-option--radio">Man</label>
        </div>
        <div class="form-group has-success">
            <input type="radio" id="field-radio-female" name="radio" value="female" aria-describedby="sexValidationMessage" class="visuallyhidden" data-error="Fältet är obligatoriskt" required="">
            <label for="field-radio-female" class="field-option field-option--radio">Kvinna</label>
            <div id="sexValidationMessage" class="help-block with-errors form-control-feedback glyphicon-ok"></div>
        </div>
    </div>
</fieldset>

Datum & tid

Det finns 2 komponenter för hantering av datum och klockslag.

Datumväljare

Datumväljare med statisk position

Denna variant kan användas exempelvis i smalare kolumner som högerspalten där Datumväljaren annars riskeras att hamn utanför skärmytan.

Datumväljaren är anpassad för att fungera även med tangentbord och skärmläsare. Den har språkstöd som hämtas automatiskt beroende på vilket språk som är satt i HTML-elementet enligt nedan exempel.

<html lang="sv">

Översättningarna finns i externa JS-filer innehållande ett JS-object och skall döpas på samma sätt som språkkoden: sv.js

Formateringen på språkfilerna ser ut som följande

var fdLocale = {
fullMonths:["Januari", "Februari", "Mars", "April", "Maj", "Juni", "Juli", "Augusti", "September", "Oktober", "November", "December"],
monthAbbrs:["Jan", "Feb", "Mar", "Apr", "Maj", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"],
fullDays:["M\u00E5ndag", "Tisdag", "Onsdag", "Torsdag", "Fredag", "L\u00F6rdag", "S\u00F6ndag"],
dayAbbrs:["M\u00E5n", "Tis", "Ons", "Tors", "Fre", "L\u00F6r", "S\u00F6n"],
titles:["F\u00F6rra m\u00E5naden", "N\u00E4sta m\u00E5nad", "F\u00F6rra \u00E5ret", "N\u00E4sta \u00E5r", "Idag", "Visa kalender", "v.", "Vecka [[%0%]] av [[%1%]]", "Vecka", "V\u00E4lj ett datum", "Klicka och Drag", "Visa \u0022[[%0%]]\u0022 f\u00F6rsta", "Dagens datum", "Inaktiverat datum"]};
try {
    if("datePickerController" in window) {
            datePickerController.loadLanguage();
    };
} catch(err) {};

För att möjliggöra att kunna ha flera datepickers på samma sida startas en instans för varje unik datepicker upp på följande sätt.

datePickerController.createDatePicker({
    formElements: {'js-datepicker':"%Y-%m-%d"},
    showWeeks: true,
    staticPos: false,
    fillGrid: false,
    callbackFunctions:{
        'datereturned':[function focusTrigger(){
            var $datePickerControl = $('.date-picker-control');
            $datePickerControl.focus();
        }]
});

I ovan kodexempel är js-datepicker det unika ID't på inputfältet som skall ha en datepicker och "%Y-%m-%d" är datumformatet för just denna datepicker. I callback-metoden bestäms vilket fält som skall få fokus efter att ett datum har valts. I det här fallet är det knappen som öppnar datepickern men det skulle även kunna vara fältet för nästa datepicker om man exempelvis har 2 datepickers för att välja ett datum-range.

Globala inställningar

Det går även att separat sätta globala inställningar som gäller för alla datepickers. OBS! att setGlobalOptions måste sättas innan datepickern initieras.

Exempelvis nedanstående globala inställning som möjliggör en Datumväljare som användare kan dra och flytta till valfri position.

datePickerController.setGlobalOptions({
    'nodrag':0
});

Läs mer om datumväljaren här

Tidsväljare

:

Tidsväljaren består av 2 fält, ett för timmar och ett för minuter. Intervaller för dessa bestäms av respektive e-tjänst och dess behov.


Filuppladdning

Filuppladdningskomponenten finns i 2 varianter, en för singeluppladdning och en för att ladda upp flera filer samtidigt. Detta styrs med attributet multiple.

Vid singeluppladdning syns filnamnet i knappen efter att man valt fil, vid multiuppladdning står det hur många filer man valt att ladda upp. OBS! att språket för denna text styrs av språket i webbläsaren/operativssystemet, och kan inte påverkas med hjälp av språkstöd i plattformen.

Enkel

<input type="file" name="file-1[]" id="file-1" class="inputfile" data-multiple-caption="{count} files selected"/>
<label for="file-1"><span class="btn btn-default icon-upload-vasastan u-icon-left">Välj fil&hellip;</span><button type="button" class="btn btn-primary-light icon-trashcan-vasastan u-icon-right filename js-remove-file hidden" aria-controls="file-1" data-toggle="tooltip" data-placement="top" title="Ta bort"><span class="js-filename"></span><span class="visuallyhidden">Ta bort</span></button></label>

Flera filer

<input type="file" name="file-2[]" id="file-2" class="inputfile" data-multiple-caption="{count} files selected" multiple/>
<label for="file-2"><span class="btn btn-default icon-upload-vasastan u-icon-left">Välj en eller flera filer&hellip;</span><button type="button" class="btn btn-primary-light icon-trashcan-vasastan u-icon-right filename js-remove-file hidden" aria-controls="file-2" data-toggle="tooltip" data-placement="top" title="Ta bort"><span class="js-filename"></span><span class="visuallyhidden">Ta bort</span></button></label>

Autocomplete

Autocomplete eller Typeahead som det också kallas är ett textfält som hämtar data från en datakälla. I det här fallet en array i Javascript.

Funktionen är beroende av 4 saker

  • input-fältet måste ha klassen autocomplete
  • input-fältet måste data-attributet data-list med valfritt värde i
  • input-fältet måste ha data-attributet data-no-match där texten för om man inte får några sökträffar ligger
  • en variabel som innehåller en array med data. Denna variabel måste matcha data-attributes värde. I det här fallet cities.
  • Det sista är input-fältets ID som i det här fallet också är cities. Detta ID används för att trigga autocomplete-funktionen på just det fältet.

Koden för ovantående exempel ser ut som följande:

<label for="cities">Sök städer<span class="visuallyhidden">, skriv, och välj sedan från listan nedan med hjälp av piltangenterna</span></label>
<input type="text" id="cities" class="form-control autocomplete" placeholder="T.ex. Stockholm" data-list="cities" data-no-match="Inga träffar">

Och JS-objektet som innehållet datan ser ut så här:

var cities = ["Alingsås", "Arboga", "Arvika", "Askersund", "Avesta", "Boden", "Bollnäs", "Borgholm", "Borlänge", "Borås", "Djursholm", "Eksjö", "Enköping", "Eskilstuna", "Eslöv", "Fagersta", "Falkenberg", "Falköping", "Falun", "Filipstad", "Flen", "Gränna", "Gävle", "Göteborg", "Hagfors", "Halmstad", "Haparanda", "Hedemora", "Helsingborg", "Hjo", "Hudiksvall", "Huskvarna", "Härnösand", "Hässleholm", "Höganäs", "Jönköping", "Kalmar", "Karlshamn", "Karlskoga", "Karlskrona", "Karlstad", "Katrineholm", "Kiruna", "Kramfors", "Kristianstad", "Kristinehamn", "Kumla", "Kungsbacka", "Kungälv", "Köping", "Laholm", "Landskrona", "Lidingö", "Lidköping", "Lindesberg", "Linköping", "Ljungby", "Ludvika", "Luleå", "Lund", "Lycksele", "Lysekil", "Malmö", "Mariefred", "Mariestad", "Marstrand", "Mjölby", "Motala", "Mölndal", "Nacka", "Nora", "Norrköping", "Norrtälje", "Nybro", "Nyköping", "Nynäshamn", "Nässjö", "Oskarshamn", "Oxelösund", "Piteå", "Ronneby", "Sala", "ndviken", "Sigtuna", "Simrishamn", "Skanör-Falsterbo", "Skara", "Skellefteå", "Skänninge", "Skövde", "Sollefteå", "Solna", "Stockholm", "Strängnäs", "Strömstad", "Sundbyberg", "Sundsvall", "Säffle", "Säter", "Sävsjö", "Söderhamn", "Söderköping", "Södertälje", "Sölvesborg", "Tidaholm", "Torshälla", "Tranås", "Trelleborg", "Trollhättan", "Trosa", "Uddevalla", "Ulricehamn", "Umeå", "Uppsala", "Vadstena", "Varberg", "Vaxholm", "Vetlanda", "Vimmerby", "Visby", "Vänersborg", "Värnamo", "Västervik", "Västerås", "Växjö", "Ystad", "Åmål", "Ängelholm", "Örebro", "Öregrund", "Örnsköldsvik", "Östersund", "Östhammar"];
// Trigger autocomplete on element with ID "cities"
autocomplete.makeAutocomplete('cities', dataMatch);

Annat format på din data?

Om behov av annan formatering av data finns går det bra att skapa motsvarande funktionalitet på egen hand. Form och funktion måste dock följa detta exempel.

För att enklare kunna se hur markupen skall vara strukturerad finns här nedan ett utfällt statiskt exempel.

Skriv och välj sedan från listan nedan med hjälp av piltangenterna
<label for="cities">Sök städer<span class="visuallyhidden">, skriv, och välj sedan från listan nedan med hjälp av piltangenterna</span></label>
<input type="text" id="foo" class="form-control autocomplete" placeholder="T.ex. Stockholm" data-list="cities">
<div role="list" class="autocomplete-list">
    <div role="listitem">
        <button aria-label="Alingsås"><span style="text-decoration:underline;">A</span>lingsås</button>
    </div>
    <div role="listitem">
        <button aria-label="Arboga"><span style="text-decoration:underline;">A</span>rboga</button>
    </div>
    <div role="listitem">
        <button aria-label="Arvika"><span style="text-decoration:underline;">A</span>rvika</button>
    </div>
    <div role="listitem">
        <button aria-label="Askersund"><span style="text-decoration:underline;">A</span>skersund</button>
    </div>
</div>

reCaptcha

Om behov av captcha behövs för formulär används reCaptcha. reCapcha är utvecklat av Google och kräver en API-nyckel för att fungera.

Se reCaptcha i exempeltjänsten

Kom igång med reCaptcha.


Filtrering

Exempel på filteringens utformning hittas här.

Filtreringen sker med AJAX. När ett val görs i filterkolumnen uppdateras resultatlistan automatiskt. En debouncefunktion med en fördröjning på ca 250-300ms kan vara lämplig att använda här för att det inte ska ske för många requests på för kort tid.

URL:en bör också uppdateras för varje filtreringsval som görs för att kunna dela filtreringen. Sidan skall inte laddas om när URL:en uppdateras.

Alla filteringskategorier är minimerade per default. I de fall där det finns flera nivåer med överkategorier används en s.k. "accordion" för att hålla gränsnittet rent och tydligt. Inga val görs utan att användaren själv kryssar i en checkbox.

Se exempel

Kodstrukturen för ovan exempel ser ut så här

<div class="panel panel-primary m-b-sm">
    <div class="panel-heading">
        <h3 class="panel-title">
            <a class="collapsed btn-block" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseZero" aria-controls="collapseZero">
                Inriktning & ämnen
            </a>
        </h3>
    </div>
    <div id="collapseZero" class="panel-collapse collapse" aria-labelledby="headingOne">
        <div class="panel-body panel-body--parent">
            <div class="panel-group accordion m-b-0" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="panel-heading panel-heading--child" id="headingOne">
                        <h4 class="panel-title">
                            <a class="collapsed btn-block" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-controls="collapseOne">
                                Teater och Dans
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse" aria-labelledby="headingOne">
                        <div class="panel-body panel-body--child">
                            <div class="checkbox parent-checkbox">
                                <input type="checkbox" id="field-checkbox-0" name="checkbox" value="0" class="visuallyhidden js-parent-checkbox">
                                <label for="field-checkbox-0" class="field-option field-option--checkbox">Allt inom Teater och dans</label>
                            </div>

                            <div class="container">
                                <div class="checkbox">
                                    <input type="checkbox" id="field-checkbox-1" name="checkbox" value="1" class="visuallyhidden">
                                    <label for="field-checkbox-1" class="field-option field-option--checkbox">Modern dans</label>
                                </div>
                                <div class="checkbox">
                                    <input type="checkbox" id="field-checkbox-2" name="checkbox" value="2" class="visuallyhidden">
                                    <label for="field-checkbox-2" class="field-option field-option--checkbox">Improvisationsteater</label>
                                </div>
                                <div class="checkbox">
                                    <input type="checkbox" id="field-checkbox-3" name="checkbox" value="3" class="visuallyhidden">
                                    <label for="field-checkbox-3" class="field-option field-option--checkbox">Street dance</label>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading panel-heading--child" id="headingTwo">
                        <h4 class="panel-title">
                            <a class="collapsed btn-block" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                Sång och musik
                            </a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse" aria-labelledby="headingTwo">
                        <div class="panel-body panel-body--child">
                            <div class="checkbox parent-checkbox">
                                <input type="checkbox" id="field-checkbox-4" name="checkbox" value="4" class="visuallyhidden js-parent-checkbox">
                                <label for="field-checkbox-4" class="field-option field-option--checkbox">Allt inom Sång och musik</label>
                            </div>

                            <div class="container">
                                <div class="checkbox">
                                    <input type="checkbox" id="field-checkbox-5" name="checkbox" value="5" class="visuallyhidden">
                                    <label for="field-checkbox-5" class="field-option field-option--checkbox">Musikal</label>
                                </div>
                                <div class="checkbox">
                                    <input type="checkbox" id="field-checkbox-6" name="checkbox" value="6" class="visuallyhidden">
                                    <label for="field-checkbox-6" class="field-option field-option--checkbox">Alla kan tralla</label>
                                </div>
                                <div class="checkbox">
                                    <input type="checkbox" id="field-checkbox-7" name="checkbox" value="7" class="visuallyhidden">
                                    <label for="field-checkbox-7" class="field-option field-option--checkbox">Mongolisk strupsång</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading panel-heading--child" id="headingThree">
                        <h4 class="panel-title">
                            <a class="collapsed btn-block" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                Konst och form
                            </a>
                        </h4>
                    </div>
                    <div id="collapseThree" class="panel-collapse collapse" aria-labelledby="headingThree">
                        <div class="panel-body panel-body--child">
                            <div class="checkbox parent-checkbox">
                                <input type="checkbox" id="field-checkbox-8" name="checkbox" value="8" class="visuallyhidden js-parent-checkbox">
                                <label for="field-checkbox-8" class="field-option field-option--checkbox">Allt inom Konst och form</label>
                            </div>

                            <div class="container">
                                <div class="checkbox">
                                    <input type="checkbox" id="field-checkbox-9" name="checkbox" value="9" class="visuallyhidden">
                                    <label for="field-checkbox-9" class="field-option field-option--checkbox">Måleri</label>
                                </div>
                                <div class="checkbox">
                                    <input type="checkbox" id="field-checkbox-10" name="checkbox" value="10" class="visuallyhidden">
                                    <label for="field-checkbox-10" class="field-option field-option--checkbox">Kroki</label>
                                </div>
                                <div class="checkbox">
                                    <input type="checkbox" id="field-checkbox-11" name="checkbox" value="11" class="visuallyhidden">
                                    <label for="field-checkbox-11" class="field-option field-option--checkbox">Skulptur</label>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

I vissa fall då det finns väldigt många val för en specifik kategori kan en sökfunktion användas för att förenkla för användaren. Sökfunktionen filtrerar automatiskt listan med checkboxar allt eftersom användaren skriver i sökfältet.

OBS det gömda fältet som håller textsträngen som visas när sökfiltreringen inte ger några träffar:

<input type="hidden" value="Inga träffar" class="no-filter-hits">


Kodstrukturen för ovan exempel ser ut så här

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">
            <a class="collapsed btn-block" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseZero4" aria-controls="collapseZero4">
                Instruktör
            </a>
        </h3>
    </div>
    <div id="collapseZero4" class="panel-collapse collapse" aria-labelledby="headingOne4">
        <div class="panel-body">
            <form role="form" id="coachForm">
                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="form-group">
                            <input type="search"
                            id="coachSearch"
                            class="form-control u-icon-right icon-search pull-right"
                            placeholder="Sök instruktör"
                            aria-controls="coachList"
                            aria-describedby="coachFilterFeedback">
                            <!-- This field contains the translation for a "No hits" search -->
                            <input type="hidden" id="no-filter-hits" name="No hits label" value="Inga träffar">
                        </div>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <ul id="coachList" class="list--bare m-a-0 p-a-0" aia-live="polite" aria-relevant="additions removals" aria-atomic="true">
                            <li>
                                <div class="checkbox">
                                    <input type="checkbox" id="field-checkbox-17" name="checkbox" value="17" class="visuallyhidden">
                                    <label for="field-checkbox-17" class="field-option field-option--checkbox">Olle Westin</label>
                                </div>
                            </li>
                            <li>
                                <div class="checkbox">
                                    <input type="checkbox" id="field-checkbox-18" name="checkbox" value="18" class="visuallyhidden">
                                    <label for="field-checkbox-18" class="field-option field-option--checkbox">Angelica Andersson</label>
                                </div>
                            </li>
                            <li>
                                <div class="checkbox">
                                    <input type="checkbox" id="field-checkbox-19" name="checkbox" value="19" class="visuallyhidden">
                                    <label for="field-checkbox-19" class="field-option field-option--checkbox">Erik Fransson</label>
                                </div>
                            </li>
                            <li>
                                <div class="checkbox">
                                    <input type="checkbox" id="field-checkbox-20" name="checkbox" value="20" class="visuallyhidden">
                                    <label for="field-checkbox-20" class="field-option field-option--checkbox">Franco Gomez</label>
                                </div>
                            </li>
                            <li>
                                <div class="checkbox">
                                    <input type="checkbox" id="field-checkbox-21" name="checkbox" value="21" class="visuallyhidden">
                                    <label for="field-checkbox-21" class="field-option field-option--checkbox">Patricia Guiliere</label>
                                </div>
                            </li>
                            <li>
                                <div class="checkbox">
                                    <input type="checkbox" id="field-checkbox-22" name="checkbox" value="22" class="visuallyhidden">
                                    <label for="field-checkbox-22" class="field-option field-option--checkbox">Nico Adamsson</label>
                                </div>
                            </li>
                            <li>
                                <div class="checkbox">
                                    <input type="checkbox" id="field-checkbox-23" name="checkbox" value="23" class="visuallyhidden">
                                    <label for="field-checkbox-23" class="field-option field-option--checkbox">Teo Frisk</label>
                                </div>
                            </li>
                            <li>
                                <div class="checkbox">
                                    <input type="checkbox" id="field-checkbox-24" name="checkbox" value="24" class="visuallyhidden">
                                    <label for="field-checkbox-24" class="field-option field-option--checkbox">Angelina Andersdotter</label>
                                </div>
                            </li>
                            <li>
                                <div class="checkbox">
                                    <input type="checkbox" id="field-checkbox-25" name="checkbox" value="25" class="visuallyhidden">
                                    <label for="field-checkbox-25" class="field-option field-option--checkbox">Gun Hellstrand</label>
                                </div>
                            </li>
                            <li>
                                <div class="checkbox">
                                    <input type="checkbox" id="field-checkbox-26" name="checkbox" value="26" class="visuallyhidden">
                                    <label for="field-checkbox-26" class="field-option field-option--checkbox">Maria Figuredo</label>
                                </div>
                            </li>
                            <li>
                                <div class="checkbox">
                                    <input type="checkbox" id="field-checkbox-171" name="checkbox" value="171" class="visuallyhidden">
                                    <label for="field-checkbox-171" class="field-option field-option--checkbox">Oscar Idun</label>
                                </div>
                            </li>
                            <li>
                                <div class="checkbox">
                                    <input type="checkbox" id="field-checkbox-181" name="checkbox" value="181" class="visuallyhidden">
                                    <label for="field-checkbox-181" class="field-option field-option--checkbox">Henke Gabrielsson</label>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

Aktiva filter

filtreringssidan lägger sig de aktiva filter användaren valt överst i samma kolumn som träfflistan. Dessa är dolda per default men expanderas genom ett klick. En cookie skall spara aktivt state så om användaren expanderat aktiva filter och uppdaterar sidan skall panelen fortfarande vara expanderad. Om användaren stänger panelen och uppdaterar sidan skall panelen förbli stängd.

OBS att denna cookie-funktionalitet måste implementeras för respektive e-tjänst som behöver den. Fungerande exempel finns ej tillgänglig i prototypen.

Rensa aktiva filter

filtreringssidan finns tre (3) olika sätt att rensa aktiv filtrering.

  1. Ta bort filter-taggar en och en under "Visa aktiva filter"
  2. Klicka på "Rensa filter" som är belägen underst i filtreringskolumnen
  3. Klicka på "Visa alla kurser".
    • Copyn i detta val kommer variera beroende på vad man valt att filtrera för listning. Valet är främst till för de användare som inte förstår hur det kommer tillbaka till den kompletta listan de såg innan någon filtrering gjorts

Dela filter

Filteringen skall gå att dela genom att kopiera URL:en. Det finns även en färdig funktion i grässnittet för detta som kopierar den nuvarande URL:en. Denna funktion ligger unders i filtreringskolumnen.

Kodstrukturen för ovan exempel ser ut så här. OBS att till höger om "Dela filter" skall det finnas en "Rensa filter"-länk. Därför är nedanstående kod anpassat för detta.

<div class="dropdown filter__share-dropdown pull-left">
    <button id="filter-share-dropdown-btn" class="btn btn-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dela filtrering<span class="caret"></span></button>
    <div class="dropdown-menu filter__share-dropdown__item" aria-labelledby="share-dropdown">
        <div class="col-md-12 col-sm-12 col-xs-12 p-y">
            <label for="filter-share">Kopiera och dela</label>
            <input type="text" id="filter-share-input" name="filter-share" class="form-control" value="URL">
        </div>
    </div>
</div>

<a href="#" class="m-x-auto btn btn-link filter__clear-filter pull-right">Rensa filter</a>

Stadsdelsväljare

Stadsdelsväljaren finns i fyra (4) olika utföranden med olika komplexitet. Välj den som kontextuellt sett fungerar bäst för ändamålet i er e-tjänst.

Stadsdelsväljare i huvudkolumnen

Inget område valt

Välj det område du vill ha information ifrån.

Stadsdelsväljare i högerkolumnen



Systemmeddelanden

Systemmeddelanden finnas i två varianter. De följer samma form men har olika placering på siten.

Lokalt systemmeddelande

Lokala systemmeddelanden är sådana som rör en specifik funktion t.ex. ett formulär. Placeringen av detta meddelande för vara i kontext till funktionens placering. Exempel hittas här.

Globalt systemmeddelande

Globala systemmeddelanden är sådana som rör hela systemet. Placeringen skall därför vara ovanför content men under header och huvudnavigering. Exempel hittas här.

Meddelandetyper

Det finns 4 olika meddelandetyper som används vid olika scenarier.

Information

Generellt meddelande som används för att förmedla information. Ej kopplat till något användaren gjort.

Succé

Användaren har har genomfört en lyckad ändring i systemet.

Varning

Ett potentiellt problem har upptäcks, t.ex. att ett byte av lösenord inte fyllde alla kriterier för komplexitet.

Fel

Systemet har kastat ett fel, t.ex. att ett formulär inte gick att skicka.


Knappar

Knappar finns i ett antal olika färger och storlekar. Primärt är det fyra (4) av dessa som skall användas i e-tjänsteplattformen.

I anslutning till formulär skall den primära knappen för att gå vidare främst ligga högerställd. Detta görs med utility-klassen pull-right.

Samtliga knapptyper går att använda på både button och a-taggar.

Primär

Detta är "standardknappen" som skall användas i första hand

<button type="button" class="btn btn-primary">Primär</button>

Standard

En diskretare sekundär knapp som inte väcker lika uppmärksamhet som den primära.

<button type="button" class="btn btn-default">Standard</button>

Primär ljus

Ibland fungerar den starka färgen på den primära knappen inte optimalt. Där kan en ljus version av samma knapp användas.

<button type="button" class="btn btn-primary-light">Primär ljus</button>

Ibland vill man använda en knapp som ser ut som en länk men för korrekt radhöjd för knappar. Då finns detta alternativ.

<button type="button" class="btn btn-link">Länk</button>

Ikon till vänster

Lägg till klass för ikon samt utility-klassen u-icon-left

<button class="btn btn-primary icon-arrow-left-light u-icon-left">Tillbaka</button>

Ikon till Höger

Lägg till klass för den ikon som skall användas samt utility-klassen u-icon-right

<button class="btn btn-primary icon-arrow-right-light u-icon-right">Nästa</button>

"Kollapsande" ikon-knapp

Ibland behöver en knapp ta så lite utrymme som möjligt i låga upplösningar. Då kan man få knappen att kollapsa till enbart en kvadrat med en ikon i. Det är då viktigt att det är självförklarande vad knappen har för funktion.

Minska webbläsarens bredd och se nedanstående knapp "kollapsa". Detta åstadkoms genom att lägga till utility-klassen u-icon-btn-sm.

OBS att detta kräver att knappens textinnehåll wrappas med en span med följande klass visuallyhidden-on-x-small-screen. Detta för att texten skall försvinna rent visuellt men fortfarande vara tillgänglig för skärmläsare.

<button class="btn btn-primary icon-arrow-right-light u-icon-right u-icon-btn-sm"><span class="visuallyhidden-on-x-small-screen">Gå vidare</span></button>

Knapp som redan från början är "kollapsad"

Om det finns behov att en knapp redan från början är "kollapsad" måste den få utility-klassen block-icon. För att tillgängligheten inte skall påverkas måste den även få ett aria-label attribut aria-label="Gå vidare".

<button aria-label="Ladda ner PDF" class="btn btn-primary icon-pdf-light u-icon-btn-sm block-icon"></button>

Förtkorta knapptexten

Ibland kan det räcka med att knappens textinnehålls förkortas en aning. Då kan man lägga till en span följande utility-klass visuallyhidden-on-small-screen runt den del av texten du vill "klippa bort".

Minska webbläsarens bredd och se nedanstående knapptext "förkortas".

OBS att en kort copy alltid är att föredra och att även om förtkortning är nödvändig så måste kvarvarande text fortfarande vara självförklarande för vad knappen har för funktion.

<button class="btn btn-primary icon-arrow-right-light u-icon-right">Nästa <span class="visuallyhidden-on-small-screen">steg</span></button>

Språk

Valt språk skall skickas in i DOM:en på följande vis: <html lang="sv"> där rätt språkkod för rätt respektive språk används.

Språkväjaren

Språkväljaren är en dropdownmeny som indikeras med en jordglob att här döljer sig flera språk.

Menyalternativet skall ligga högerställt längst till höger i huvudmenyn.

I menyalternativet står det per default "Language". Byter man språk skall denna copy uppdateras till ordet "Språk" fast översatt till det valda språket. Byter man t.ex. språk till Finska skall copyn vara "Kieli".

Kodexempel på ovanstående språkväljare

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
        <a id="dropdownMenu1" href="#" class="dropdown-toggle icon-world-map-light u-icon-left p-l-dbl" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Language <span class="caret caret--special"></span></a>
        <ul class="dropdown-menu" id="languageDropdown" aria-labelledby="dropdownMenu1">
            <li class="active"><a href="#"><span class="block-icon block-icon--flag m-r-sm">Svenska</a></li>
            <li><a href="#">English</a></li>
            <li><a href="#">Suomalainen</a></li>
            <li><a href="#">العربية</a></li>
            <li><a href="#">Deutsch</a></li>
            <li><a href="#">Español</a></li>
            <li><a href="#">فارسی</a></li>
            <li><a href="#">Français</a></li>
            <li><a href="#">Hrvatski</a></li>
            <li><a href="#">Pусский</a></li>
            <li><a href="#">Somali</a></li>
            <li><a href="#">Srpski</a></li>
            <li><a href="#">Türk</a></li>
        </ul>
    </li>
</ul>

Frågor och svar

Frågor och svar kan användas på flea sätt i e-tjänsterna. Antingen som en egen sida med global info for e-tjänsten ett kontextuellt ihop med en specifik sida eller funktion i e-tjänsten.

Eftersom FAQ-modulen är dynamisk kommer den anpassa sig efter bredden på sin föräldracontainer. Globalt exempel samt kontextuellt exempel med FAQ i högerkolumnen.

Om en omfattande FAQ med många frågor behövs kan en kategorisering vara nödvändig vilket görs med själv av en select. Om det däremot är få frågot behövs inte denna.

Med kategorier

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Utan kategorier

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Kodexempel (med kategorier)

<div class="panel-body">
    <div id="accordion67" class="panel-group accordion m-b-0" aria-multiselectable="true">
        <div class="form-group">
            <label for="faq">Välj kategori</label>
            <select class="form-control" id="faq">
                <option value="one">Bokningar</option>
                <option value="two">Kategori #2</option>
                <option value="three">Kategori #3</option>
                <option value="four">Kategori #4</option>
                <option value="five">Kategori #5</option>
            </select>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" id="headingTwo67">
                <a class="collapsed btn-block" role="button" data-toggle="collapse" data-parent="#accordion67" href="#collapseTwo67" aria-expanded="false" aria-controls="collapseTwo67">
                    Hur gör jag en bokning?
                </a>
            </div>
            <div id="collapseTwo67" class="panel-collapse collapse" aria-labelledby="headingTwo67">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" id="headingThree67">
                <a class="collapsed btn-block" role="button" data-toggle="collapse" data-parent="#accordion67" href="#collapseThree67" aria-expanded="false" aria-controls="collapseThree67">
                    Hur ser jag mina bokningar?
                </a>
            </div>
            <div id="collapseThree67" class="panel-collapse collapse" aria-labelledby="headingThree67">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>
    </div>
</div>

Profil

Ribbon

När användaren loggat in dyker en rosa "ribbon" upp högst upp på siten. Denna ribbon visar den inloggades namn, eventuella notiser samt döljer en dropdown-meny med fler alternativ kopplat till användarens konto.

OBS att Ribbon måste vara lägre än huvudnavigeringen för att särskilja vikten på dessa.

Kodexempel för ovanstående ribbon

<div class="bg-ostermalm color-inverse">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12 p-x-0">
                <nav class="navbar m-b-0">
                    <div class="dropdown pull-right">
                        <a href="#" class="btn btn-link dropdown-toggle color-inverse" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Inloggad: Jane Doe <span class="badge">3</span><span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="my-profile.html"><span class="block-icon icon-user"></span> Mina sidor</a></li>
                            <li><a href="my-messages.html"><span class="badge">3</span> Mina meddelanden</a></li>
                            <li><a href="startpage.html"><span class="block-icon icon-locked"></span> Logga ut</a></li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</div>

Notiser

Profilsidorna innehåller bland annat Meddelanden. För att indikera att användaren har olästa meddelanden används notifieringar. Dessa används dels i Ribbon, dels i huvudmenyn på Mina sidor och dels på Meddelandesidan

I navigeringen används notifieringar för att indikera antal olästa meddelanden. På meddelandesidan används notifieringen på respektive oläst meddelande.

<span class="badge">3</span>

OBS om det inte finns några nya notiser skall dessa inte visas i Navigeringen eller i Ribbon. <span class="badge"></span> skall alltså inte ens skrivas ut i DOM:en om det inte finns några notiser.

Däremot i dropdownmenyn inuti Ribbon skall Notiser skrivas ut och indikera att det finns (0) nya notiser i en grå och inte en gul "badge". Detta åstadkoms med modifier-klassen badge--inactive

Visuellt exempel finns i Ribbon här ovanför. Kodexempel nedanför.

<span class="badge badge--inactive">0</span>

Notiser i Ribbon

Notiser i navigering

Notiser i Meddelanden

Mottaget 2016-05-31 Söndag

Quisque volutpat dui Oläst

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet lectus efficitur, imperdiet massa non, sollicitudin elit. In porttitor justo in velit blandit tristique...


Navigering sker främst från huvudmenyn men kan i vissa fall kräva grupperingar av sidor samt en extra nivå i strukturen.

Huvudnavigering

 

 

 

Dropdownmenyer har möjligheten att separera länk med en linje och/eller en rubrik. Detta görs med följande extra element

<li role="separator" class="divider"></li>
<li class="dropdown-header">Separationsrubrik</li>

Huvudnavigering med grupperade sidor (dropdown)

Kodexempel för ovanstående dropdown-meny

<li class="dropdown">
    <a href="#" id="bookingsDropdown" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Grupperad sida <span class="caret caret--special"></span></a>
    <ul class="dropdown-menu" id="bookings" aria-labelledby="bookingsDropdown">
        <li><a href="#">Undersida 1</a></li>
        <li><a href="#">Undersida 2</a></li>
        <li role="separator" class="divider"></li>
        <li class="dropdown-header">Separationsrubrik</li>
        <li><a href="#">Undersida 3</a></li>
        <li><a href="#">Undersida 4</a></li>
    </ul>
</li>

Ibland kan det behövas utterligare en nivå i menystrukturen. Exempel finns på sidan "Mina konton". Då kan man använda en sidonavigering med undersidor. Denna sidonavigering skall vara högerställd och 4 kolumner bred (baserat på en 12-kolumnersgrid där 12 kolumner är hela sitens bredd).

Kodexempel på ovanstående meny

<div class="row m-b">
    <div class="col-md-4 col-sm-12 col-xs-12 pull-right m-t-md-small-screen">
        <div class="list-group">
            <a href="#" class="list-group-item active">Undersida 1</a>
            <a href="#" class="list-group-item">Undersida 2</a>
            <a href="#" class="list-group-item">Undersida 3</a>
        </div>
    </div>
</div>

För att markera aktiv sida skall klassen active läggas till på a-elementet med klassen list-group-item


Kontaktsida

Kontaktsidan skall ha ett kontaktformulär. Det finns två (2) alternativ av placering av detta formulär. Antingen ett större formulär till "huvudkolumnen" eller ett mindre i "högerkolumnen".

Det mindre formuläret är tänkt att kunna användas på vilken sida som helst där ett kontaktformulär kan behövas. Det större formuläret skall ha en egen unik sida kopplad till sig. Det får aldrig ligga två (2) kontaktformulär på samma sida.

I ovanstående länk finns exempel på båda varianterna.


Tooltips

Tooltips kan placeras på vilket element som helst men för tillgänglighetens skull måste de ligga på ett element som går att tabba till. En länk eller en knapp är därför lämpligast.

Placering av tooltip

     

Ett tooltip triggas automatiskt när elementet får attributet data-toggle="tooltip" och innehållet i tooltipet bestäms av elements title attribut: title="Textinnehåll i tooltip"

Placeringen av tooltips bestämd med data-attributet data-placement="" som tar ett av följande värdenleft right bottom left.

Kodexempel där placering är upptill
<button type="button" class="btn btn-default icon-information-light u-icon-right" data-toggle="tooltip" data-placement="top" title="Tooltip upptill">Tooltip upptill</button>

Releases (versioner)

E-tjänsteplattformen finns i flera olika versioner, en för varje release som gjorts. Denna prototyp och styleguide ligger alltid i version latest dvs den innehåller alltid det allra senaste uppdateringarna.

Det är upp till var och en att bestämma vilken version din e-tjänst skall lyfta in. En satt version ändras aldrig.

OBS! att använda "latest" i produktion inte är att rekommendera då breaking changes kan ske från version till version. Alla referenser till filer i latest sker på egen risk.

Samtliga tillgängliga versioner finns i listan under sektionen CDN.


CDN

Alla statiska filer i e-tjänsteplattformen hostas på Stadens CDN. Alla statiska referenser till CSS:er, JS-filer, bilder, ikoner med mera skall därför länkas från detta CDN.

Filerna ligger i sina respektive versioner.

URL-strukturen ser ut som följande

# Version URL
Latest https://static.stockholm.se/styleguide-etjanst/latest/
1.1.0 https://static.stockholm.se/styleguide-etjanst/1.1.0/
1.0.0 https://static.stockholm.se/styleguide-etjanst/1.0.0/
osv.

För att läsa mer om ändringar som sker i olika versioner är det bara att följa nedanstående changelog.

Filer som länkas in från Stadens CDN

Filtyp URL
ICO (favicon) https://static.stockholm.se/styleguide-etjanst/version/favicon.ico
CSS https://static.stockholm.se/styleguide-etjanst/versionhttps://static.stockholm.se/styleguide-etjanst/latest/css/themes/stockholm/style.css?v=1508422344564
CSS https://static.stockholm.se/styleguide-etjanst/versionhttps://static.stockholm.se/styleguide-etjanst/latest/css/themes/stockholm/print.css?v=1508422344564
SVG https://static.stockholm.se/styleguide-etjanst/versionhttps://static.stockholm.se/styleguide-etjanst/latest/img/logo_print.svg
JS https://static.stockholm.se/styleguide-etjanst/version/js/vendor/jquery.min.js
JS https://static.stockholm.se/styleguide-etjanst/version/js/main.js
JS https://static.stockholm.se/styleguide-etjanst/version/js/vendor/html5shiv.min.js
JS https://static.stockholm.se/styleguide-etjanst/version/js/vendor/respond.min.js

No-script assets

Om webbläsaren av någon anledning inte kan ladda JS-assets kan dessa filer laddas in inom <nocript></noscript> längst ner innan avslutande body-taggen.

Filtyp URL
CSS https://static.stockholm.se/styleguide-etjanst/version/icons/icons.data.svg.css
CSS https://static.stockholm.se/styleguide-etjanst/version/css/themes/stockholm/noscript.css

# CHANGELOG

## [1.2.1] - 2017-10-19

Release notes

  • Bugfixes, changes, new features

URL

  • https://static.stockholm.se/styleguide-etjanst/1.2.1/

Fixed

  • Bug affecting the color of carets on nav-pills on active/inactive state
  • Bug with search form toggle
  • Bug concerning breakpoints when toggeling right column on filter page
  • Bug with media queries affecting hidden-classes
  • Bug with long modals on mobile

Changed

  • Functionality for toggleText() to handle dynamically added elements in the DOM
  • Functionality to handle dynamically added file upload fields in the DOM
  • Removed small input examples
  • Change behavior of hidden-{breakpoint} classes. They now go from {breakpoint} and up. Please update your markup accordingly if affected.

Added

  • Example of input field with help text in a help-block
  • Example of input field with help text in a tooltip
  • Added preventDefault() to filter close button
  • Utility class for display: table
  • Utility class for display: table-cell

------------------------------------------------------------

## [1.2.0] - 2017-05-23

Release notes

  • Bugfixes, changes, new features

URL

  • https://static.stockholm.se/styleguide-etjanst/1.2.0/

Changed

  • Changed scroll direction of Datepicker. Now it's: Down = Increase date, Up = Decrease date
  • Markup for datepicker for support of dynamic parent container size. Please change your markup accordingly
  • Changed markup for dismissable popovers for Safari support. <button> replaced with <a>
  • Behaviour of filter checkbox children. Checking all children now also checks parent checkbox
  • Removed small and x-small button examples
  • Changed classes and breakpoints of collapsing buttons, please update your markup according to following examples
  • Changed breakpoints of classes beginning with visuallyhidden-on-. See utility classes for reference
  • Autocomplete is now absolute positioned

Added

  • Added icon button examples
  • Added collapsing button examples
  • Utility classes for text-wrapping with wrap and nowrap values
  • Utility classes for text-decoration with underline and initial values
  • City region selector added to documentation

Fixed

  • Buggy behaviour of datepicker trigger. Datepicker now only fires when clicking the date button, not the date input field (this is native behaviour of the datepicker)
  • Fixed issue with scrolling after resizing the browser after toggeling the filter navigation
  • Fixed horizontal scroll bug when expanding filters
  • Removed trailing console.log
  • Buggy loader in newer Chrome
  • Disappearing loader example on mobile on Bootstrap components page

------------------------------------------------------------

## [1.1.1] - 2017-04-04

Release notes

  • Bugfixes

URL

  • https://static.stockholm.se/styleguide-etjanst/1.1.1/
  • Fixed
  • Reverted class of ribbon back to bg-ostermalm

------------------------------------------------------------

## [1.1.0] - 2017-03-21

Release notes

  • Bugfixes, new features

URL

  • https://static.stockholm.se/styleguide-etjanst/1.1.0/

Added

  • Changelog
  • Description of CDN and versions
  • Standard search
  • Static datepicker option
  • Maintainance page
  • Popover with close trigger
  • Download Styleguide as Zip
  • Modifier class to loader that forces vertical centering
  • Caret support for nav-pills

Fixed

  • Missing favicon.ico asset file
  • Broken link from Documentation to Global message
  • Tooltips not working on mobile devices

Changed

  • Changed wrapper class around element site-header from bg-city-light to site-header-wrapper
  • Markup for Autocomplete

------------------------------------------------------------

## [1.0.0] - 2017-01-20

Release notes

  • First release

URL

  • https://static.stockholm.se/styleguide-etjanst/1.0.0/