CSS-bibliotek och -ramverk
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.
Bibliotek eller ramverk?
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.
Tvingande ramverk och inte
En del ramverk är s.k. tvingande (opinionated) och eventuell
design appliceras på de flesta elementen i sidor utan att använda attributet
class. Ett typiskt exempel är ramverket Paper CSS.
Med icke-tvingande ramverk så måste man t.ex. använda attributet class
för att applicera ramverkets stil(-ar).
Innehåll
Synpunkter på ramverk
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
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).
Min webbplats, kiltedviking.net, har designats med Bootstrap, liksom "huvudwebben" för Björns studiewebb (i vilken denna sida ingår). Det jag främst har anpassat är färgen på rubriker (#800000) och typsnittet (Georgia) för brödtext. (Bakgrundsbilder har jag anpassat med ren CSS, d.v.s. har inte med Bootstrap att göra. ;-))
Ramverket finns idag (2020-02-20) i två vanligt förekommande version - 3 och 4. Nedan finns exempelsidor för respektive version.
Exempelsida (v3) Exempelsida (v4) Besök kiltedviking.net Besök Björns studiewebb
Bulma
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. ;-)
Foundation
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 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
Materialize
Ramverket Materialize bygger på Google's design koncept Material, d.v.s. har ett mycket "platt" utseende.
Exempelsida Besök underwebben HTML
Milligram
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
MUI CSS
Ä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.
Paper CSS
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. ;-)
Picnic
Ramverket är myckel enkelt och bör anpassas för bäst resultat
Primer CSS
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
Pure CSS
För de som gillar en avskalad design så är detta ramverk något att titta på.
Semantic UI
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
Skeleton
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)
Tailwind
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.
UIkit
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.