BBR

BBR

Installation lokalt

Start med at clone repos

git clone git@github.com:skat/BBR-styleguide.git

Derefter installér alle nodejs dependencies

yarn install

Derefter kan man starte udviklingsmiljø op ved hjælp af denne konto.

gulp

Byg statisk version

yarn build

Bootstrap 5

Bootstrap er verdens mest populære open-source værktøjssæt med Sass-variabler og mixins, responsivt grid, omfattende forudbyggede komponenter og kraftfulde JavaScript-plugins.

BBR bruger Bootstraps veldokumenterede responsive værktøjer som kernen i projektet og derudover komponenter på de mest almindelige design patterns såsom forme, knapper og modaler. Langt størstedelen af udviklingen er dog specifikt udviklet til BBR, mere om dette senere.

Browser support

Bootstrap understøtter de nyeste, stabile udgivelser af alle større browsere og platforme.

Microsoft Internet Explorer er ikke understøttet af Bootstrap 5, men understøtter Microsoft Edge der er arvetageren. Det skal bemærkes at Microsofts egne produkter også udfaser support for Internet Explorer inden 17. august 2021

Fractal

Fractal er et værktøj, der hjælper med at opbygge og dokumentere webkomponentbiblioteker og derefter integrere dem i dine projekter.

Komponentbiblioteker (eller design patterns) er en måde at designe og opbygge websteder på en modulær måde, opdele brugergrænsefladen i små, genanvendelige klumper, der senere kan samles på en række måder til at opbygge alt fra større komponenter helt op til hele sider.

Fractal hjælper dig med at samle, forhåndsvise og dokumentere websteds komponentbiblioteker og derefter integrere dem i dine websteder, apps og opbygge processer for at oprette integrerede, ‘levende’ projekter.

Rendering

Fractal bruger Handlebars til at rendere visningsskabeloner til både komponenter og dokumentationssider.

SASS

Sass er det mest modne, stabile og stærke professionelle CSS-udvidelsessprog i verden og er på nuværende industristandarden for CSS udvikling.

BEM

BEM er en meget nyttig, kraftfuld og enkel navngivningskonvention, der gør din frontendkode lettere at læse og forstå, lettere at arbejde med, lettere at skalere, mere robust og eksplicit.

Et eksempel på, hvordan

Klassebetegnelse skal følge denne struktur og adskilles således:

  • Komponent navn: én bindestreg
  • Elementer: to understregninger
  • Modifier (Jeg kan simpelthen ikke finde et god dansk ord for dette): to bindestreger

I brug vil kombinationen af Sass og BEM se således ud:

.komponent-navn {
  &__element {
  }
  &--modifier {
  }
}