Stilmall

Som en del av guiden finns en tillhörande stilmall.

Stilmallen är ett tema ovanpå Twitter Bootstrap.

I den byggda CSS-filen inkluderar vi Bootstraps CSS inuti vår. Om du vill bygga ihop våra LESS-filer själv så behöver du importera Bootstraps LESS-filer när du bygger din CSS för att temat ska fungera.

Stilmallen går att använda på ett par olika sätt som förklaras nedan.

Om du inte vill anpassa din tjänsts utseende i större grad så kan du ladda ner CSS-filen och använda den rakt av. Observera att direkt länkning till denna fil inte bör göras, eftersom uppdateringar av stilmallen kan bryta din tjänsts layout.

Om du vill ha mer kontroll över vilken version du använder så kan du använda dig av NPM.

$ npm install kungbib-styles

Alternativt (specifik version)

$ $ npm install kungbib-styles#1.1.7

Sedan använder du dig av filen som ligger i mappen CSS.

Om ditt projekt behöver större möjlighet för anpassning rekommenderas att du istället använder dig av våra LESS-filer och kompilerar dessa själv tillsammans med Bootstrap. Då får du tillgång till samtliga variabler från både Bootstrap och vårat tema.

LESS-filerna laddar du ner med hjälp av NPM.

$ npm install kungbib-styles

Alternativt (specifik version)

$ $ npm install kungbib-styles#1.1.7

Du bör sedan skapa en egen samlingsfil i ditt eget projekt där du importerar Bootstrap och våran samlingsfil kb-styles.less från mappen LESS.

Observera att våra LESS-filer inte inkluderar Bootstraps LESS-filer.

Exempel:

// Import standard bootstrap
@import '../path/to/bootstrap/less/bootstrap.less';
// Import KB styles
@import '../path/to/kungbib-styles/dist/less/kb-styles.less';

// Projekt specific styles
h1 {
  background-color: @happy-magenta;   // variable from kb-styles
  border-radius: @border-radius-base; // variable from bootstrap
...