På denna webbsida finns länkar till webbplatser/-sidor med mer information om CSS-bibliotek och -ramverk (även kallat frontend frameworks). Här finns också mina synpunkter angående ramverken samt anpassningar jag gjort om jag använt ramverk på min webbplats (kiltedviking.net) eller i Björns studiewebb.
Ett bibliotek brukar definieras som en samling av verktyg (funktioner, klasser, metoder, m.m.) som löser olika typer av problem och ett ramverk som en bas/plattform med grundläggande funktionalitet som byggs vidare från eller utökas.
En bra början kan vara att titta på Bootstrap, bl.a. då det det är ett väl använt ramverk och det finns gott om exempel.
De flesta ramverken nedan bygger på CSS, men om man vill utnyttja mer avancerade "komponenter" så behöver man även inkludera JavaScript - ibland även bibliotek så som jQuery. Något ramverk, så som UIkit, kräver i stort sett JavaScript. Vissa ramverk är också ganska rudimentära, så som Bulma, och kräver en hel del anpassningar för att vara användbara.
En del ramverk är s.k. åsiktsfulla (opinionated) och bygger
på en förutbestämd design, d.v.s. eventuell design appliceras på de flesta
elementen i sidor automatiskt (utan att attributet class används).
Exempel på åsiktsfulla ramverk är Bootstrap och Paper CSS.
Motsatsen till åsiktsfulla ramverk (unopinionated) bygger på att
stilar - ofta flera på varje element - måste appliceras på alla element som ska
ändras (d.v.s. med attributet class). Exempel på ramverk är
Bulma och Tailwind. (Jag undviker ramverk som dessa då de kräver ett grafiskt
sinne, som jag saknar.)
I detta avsnitt har jag gett uttryck för några av mina reaktioner på ramverken, t.ex. spontana reaktioner på vad jag tycker är bra eller dåligt med dem. Observera att jag inte är något bra på design! ;-) Så några av mina synpunkter nedan kan vara baserade på mina bristande kunskaper i design och CSS, eller att jag inte lärt mig/förstått hur ramverk ska användas.
Jag ämnar att göra exempelsidor som visar på vanligt förekommande "komponenter" så att de olika ramverken kan jämföras, t.ex. stycken, rubriker, kolumner, paneler och andra type av "komponenter".
Bootstrap var det första ramverket jag kom i kontakt med, vilket bl.a. innebär att jag ofta jämför andra ramverk med det. Det som lockade mig mest med detta ramverk var dess "rutnät" (grid), vilket de utvecklade långt innan CSS specificerade flexbox, m.m., men också att val av typsnitt och färgtema (på t.ex. knappar) fungerade för mig. (Det "alternativa" ramverket till Bootstrap var tidigare Foundation.)
Min webbplats, kiltedviking.net, har designats med Bootstrap, liksom "huvudwebben" för Björns studiewebb (i vilken denna sida ingår).
Exempelsida (v5) Besök kiltedviking.net Besök Björns studiewebb
Jag har valt att inte använda detta ramverk då jag uppfattade det som att man behöver göra egna anpassningar för att kunna använda. Och eftersom jag inte är vidare bra på design så har jag valt att inte använda detta ramverk. Men bortsett från avsaknad av mellanrum, m.m. så var det ganska enkelt att komma igång med. ;-)
En nyhet i version 1 verkar vara stöd för teman, d.v.s. sidor visas med samma som den som valts i webbläsare eller på dator (enhet).
Exempelsida (v0.x) Exempelsida (v1)
När jag började titta på ramverken så fick jag uppfattningen att det fanns två läger - Bootstap- och Foundation-"fantasterna", d.v.s. man valde mellan ett av dessa två ramverk.
Detta ramverk användes för att designa (om) underwebben JavaScript och den huvudsakliga anpassningen jag gjort är att använda mina profilfärger (röda och gula färgerna från skånska flaggan) i bl.a. meny, knappar och länklistor (collections).
Exempelsida Besök underwebben JavaScript
Ramverket Materialize bygger på Google's design koncept Material, d.v.s. har ett mycket "platt" utseende.
Exempelsida Besök underwebben HTML
Milligram är ett mycket litet ramverk, men på dess officiella webbplats finns förslag på hur man anpassar eller utökar CSS för egen webbplats.
Exempelsida Besök underwebben PHP
Även MUI bygger på Googles design koncept Material med sitt "platta" utseende. Ramverket har en del tilltalande effekter, t.ex. "flytande etiketter" i formulär - när ett fält får fokus så "flyter" etiketten undan.
Om man inte är nöjd med de fyra (?) färgerna så behöver man sinne för design (och kunskap om SASS?) för att anpassa.
Mitt första intryck av detta ramverk är att det är ganska enkelt att komma igång med, om man har en grundläggande förståelse av ramverk, och jag tycker om känslan av serietidning. ;-)
Ramverket är myckel enkelt och bör anpassas för bäst resultat
Ett mycket kapabelt ramverk! Dock så tycker jag att de bygger en del av
designen på att använda HTML-element på ett felaktigt sätt, t.ex. "formulärgrupper"
med listruta i (där de använder dl).
Exempelsida Besök underwebben Java
För de som gillar en avskalad design så är detta ramverk något att titta på.
Som namnet på ramverket ämnar anspela på så ska namn på CSS-klasser tydligt
visa på vad dess effekt är, d.v.s. inte vara kryptiska (så som .s4
eller .column-1-3 i andra ramverk).
Exempelsida Besök underwebben jQuery
Som det låter på ramverkets namn så är detta ett ganska rudimentärt ramverk, d.v.s. tänkt som en bas att bygga vidare på.
P.S. Det faktum att den officiella webbplats idag (2020-02-20) inte använder HTTPS och version av ramverk är samma som i oktober 2017 tolkar jag som att utvecklingen av ramverket stannat upp. ;-(
Exempelsida Besök underwebben Stilmallar (CSS)
Ramverket bygger på en massa klasser för att skapa egen design, d.v.s. är inte för nybörjare eller personer som mig som saknar sinne för design.
Ramverket bygger ger många byggstenar för att skapa egen design, d.v.s. är inte för nybörjare eller personer som mig som saknar sinne för design.
En sak som talar för ramverket UIkit är dess "automatiska kolumner", d.v.s. att det kan sprida ut löpande text jämt över kolumner. Men en potentiell nackdel är att många "komponenter" - även den "vanligare" - kräver ramverkets egna JavaScript-kod.
På det hela taget så är jag, som icke-designer, nöjd med ramverket och
kunde med ganska enkla medel (några CSS-klasser) anpassa till mina profilfärger
(röda och gula i skånska flaggan). Det enda jag inte tyckte om var att
rubriker (t.ex. h1) inte var responsiva.