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
yarn build
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.
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 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.
Fractal bruger Handlebars til at rendere visningsskabeloner til både komponenter og dokumentationssider.
Sass er det mest modne, stabile og stærke professionelle CSS-udvidelsessprog i verden og er på nuværende industristandarden for CSS udvikling.
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:
I brug vil kombinationen af Sass og BEM se således ud:
.komponent-navn {
&__element {
}
&--modifier {
}
}