Gemensam CSS (end-of-life 2025)

Owned by Rebecka Näsström
Last updated: nov. 29, 2023 by Rebecka Näsström
3 min read

Viktig information om Gemensam CSS

I all nyutveckling framöver rekommenderas IDS, och vår CSS kommer ha end of life 2025.

Beslut har fattats baserat på tekniska och ekonomiska överväganden. Fortsatt användning av Gemensam CSS är varken kostnadseffektivt eller i linje med våra mål för UX-ramverket och Arkitektursektionen.

🔧 Varför avvecklas Gemensam CSS?

  • Bristande återanvändbarhet: Gemensam CSS saknar effektiv kodåteranvändning och versionshantering, vilket leder till ökad tidsåtgång och kostnader.

  • Tillgänglighetsbrister: CSS:en bidrar inte till att säkerställa efterlevnad till tillgänglighetslagstiftningen, vilket kan påverka användarupplevelsen negativt.

  • Teknisk och ekonomisk belastning: Förvaltning av två separata bibliotek (CSS och IDS) är resurskrävande och ineffektivt.

📅 Tidplan för avveckling:

  • September–december 2023: Aktiv förvaltning av Gemensam CSS.

  • Januari–juni 2024: Akut felhantering och ökat stöd för övergång till IDS.

  • Juni–december 2024: Avveckling av förvaltning och support för Gemensam CSS.

  • 1 januari 2025: Gemensam CSS existerar, men ingen fel- eller bughantering.

👉 Åtgärdsplan:

  • Tjänsteansvariga för tjänster som använder Gemensam CSS måste analysera möjlighet och tidplan för att övergå till IDS innan 1 januari 2025. Analysen ska delas med UX-ramverket.

  • Tjänster som inte har möjlighet att påbörja arbetet med att byta Gemensam CSS mot IDS innan 1 januari 2025 behöver i dialog med UX-ramverket ta fram en plan för när och hur arbetet ska ske.

Det är avgörande att varje tjänsteansvarig aktivt engagerar sig i övergången för att säkerställa en smidig och effektiv implementering av IDS. Tack för er förståelse och samarbete!

Ny CSS genom IDS 4.0

Från och med version 4.0 av IDS finns möjlighet att nyttja en ny CSS (inera-design).

  • Denna CSS uppdateras genom IDS och finns för både Inera och 1177.

  • Den är versionshanterad och återanvändbar i större utsträckning än Gemensam CSS.

  • Direkt övergång är inte möjligt då komponenter och variabler har nya namn.

  • Vill ni använda denna CSS behöver ni alltså fortfarande göra ett arbete med er kod.

Vi har återanvändbar CSS för både Inera och 1177-varumärket. Skapandet av en gemensam CSS var ett första steg mot återanvändbar kod för våra tjänster för att skapa högre kvalitet, snabbare utveckling och lättare samarbete.

Var finns CSS:en?

Projektet ligger under Bitbucket på https://bitbucket.org/ineraservices/inera-core-css/

Teknik

Vi har gjort ett SASS (node-sass) projekt för att på ett enkelt sätt kunna konfigurera teman och bygga upp en struktur där den som använder projektet kan välja att inkludera utvalda scss filer till sitt projekt eller en färdig css fil. 

Det finns ett standard (default) tema som innehåller grundvariabler som används av komponenterna. Varje sajt kan sen lägga till sitt eget tema med variabler som skriver över eller utökar standard temat. 

Projektets css byggs med hjälp av gulp och gulp sass. Ditt projekt kan använda webpack eller vilket byggsystem du vill för att kompilera scss-filerna.

Innehåll

Dels består projektet av färdiga komponenter med föreslagen html-struktur och färdiga klasser. 

Vi har också lagt in funktionella klasser (utility) som kan användas som grund för en komponent genom @extend eller vanlig klass. Exempelvis finns temats alla färger som klasser enligt mallen .iu-color-nav för textfärg (nav) och .iu-background-primary för bakgrundsfärg (primary).

Du kan också använda de scss mixins och funktioner som finns i projektet så som @include background(‘primary’); för att lägga in css bakgrundsfärgen primary. 

Storybook 

För både visualisering och utveckling av komponenterna så använder vi Storybook. När du laddar hem och installerar projektet kan du själv starta en webbserver på din dator som kör Storybook-projektet och visar alla komponenter som finns inlagda.  

För att utveckla i projektet kräver det att du har Node.js installerat. Läs mer på projektets bitbucket. 

Läs mer om storybook här.