Styleguide för pensionsmyndigheten.se
Base
Base innehåller basgenskaper så som färger, responsivitet, ikoner och typsnitt.
Allt som ligger här byggs in i ps-styleguide.css och finns därför inbyggt i alla våra sidor
Color
Main
BACKGROUND
Info
Instruktion
Designa mörkare eller ljusare färg
$darker-version: darken($s_color-border-3, 10%);
$lighter-version: lighten($s_color-border-9, 50%);
Typography
Examples
h1 | Pensionens alla delar
h2 | Din pensionspyramid kan se annorlunda ut
h3 med klass s_font-normal | Din allmänna pension kommer från staten
h3 med klass s_font-bold | Bostadsform
h4 | Fyll i uppgifter om din bostad
paragraph med klass s_font-large | Tilläggspensionen är en inkomstgrundad pension som
paragraph | Alerts, tooltip
paragraph med klass s_font-bold s_font-small | Postkod:
paragraph med klass s_font-small | Din anmälan registreras och du kommer få ett brev
paragraph med klass s_font-readable | Varje år får du som bor i ett annat land och får pension från Sverige.
Code
h1 | Pensio Sans Normal
h1 style:ad som en h2 | Pensio Sans Normal
h2 | Pensio Sans Normal
h2 style:ad som en h3 | Pensio Sans Normal
h3 | Pensio Sans Normal
h3 style:ad som en h4 | Pensio Sans Normal
h3 med klass s_font-medium
h4 med klass s_font-medium
paragraph | Pensio Sans Normal
paragraph med klass s_font-large
paragraph
paragraph med klass s_font-small
paragraph med klass s_font-medium s_font-small
Centrerad paragraph med klass s_font-center
Space
Examples
En "unit" kan användas tillsammans med en margin eller padding css-klass oavsett riktning, som till exempel
Examples
White space
White Space
Formulär med många inmatningsfält blir tydligare och enklare att förstå om man delar upp dem i flera delar. Whitespace hjälper oss med att
- Betona vissa element
- Skapa en känsla av elegans
- Att klargöra relationer mellan objekt
- Dela element utan att använda synliga avdelare
- Luftigheten i texten påverkar webbplatsens läsbarhet
Vilka mått ska användas?
- "s_margin-top-8": legend & på dolda element som togglas fram.
- "s_margin-top-4": label, rubrik med radio buttons & annat.
- "s_margin-top-1": Text under rubrik, micro whitespace.
Element och komponenter från Styleguide är redan designade och anpassade med white space. Det är framförd allt i våra tjänster och formulär eller vid nyutveckling som vi ska anpassa efter de tre olika måtten som vi beslutat.
På vilket element ska man lägga klassen?
Koda en ny div runt elementet eller gör på annat sätt för att åstadkomma samma resultat.
Exempel på anpassning från ett flödestjänst
