Bruk av @aasen/toolbox-css

Denne pakken inneholder CSS-rammeverket laget for Toolbox.

Innhold

@aasen/toolbox-css
├── dist/                              # Distribusjonsversjonen av pakken
|   ├── css/                           # generert css
|   |   ├── components/                # hver komponent separat
|   |   |   ├── alert.css              # komponent alert  
|   |   |   └── ...
|   |   ├── toolbox.css                # alle moduler
|   |   ├── toolbox.min.css            # alle moduler minimert
|   |   ├── toolbox-base.css           # base modul
|   |   ├── toolbox-base.min.css       # base modul minimert
|   |   ├── toolbox-components.css     # komponent modul med alle komponenter
|   |   ├── toolbox-components.min.css # komponent modul minimert
|   |   ├── toolbox-elements.css       # element modul
|   |   ├── toolbox-elements.min.css   # element modul minimert
|   |   ├── toolbox-normalise.css      # normalisering modul
|   |   └── toolbox-normalise.min.css  # normalisering modul minimert
|   └── scss/                          # css-rammeverket med dets moduler
├── CHANGELOG.md                       # alle nevneverdige endringer
├── index.js                           # peker på komplett rammeverk
├── LICENSE                            # MIT lisens
├── package.json                       # all info om prosjektet
└── README.md                          # kom i gang-informasjon

🚀 Kom i gang

Eksempelet under viser installasjon i en applikasjon med Vue 3 + Vite.

1. Installer designsystemet

npm add -D sass                # Viktig å bruke denne og ikke node-sass
npm add @aasen/toolbox-css

2. Opprett en scss-fil

touch ./src/main.scss          # her eller i en egen css-folder

3. Importer scss-filen

// src/main.js
import "./main.scss";

4. Importer ODS

/* src/main.scss

Overstyr stien til fontene (rammeverkspesifikt) */
@use "@aasen/toolbox-css/dist/scss/abstracts/variables" with (
  $font-path: "@aasen/toolbox-css/dist"
);

/* Bruk designsystemet */
@use "@aasen/toolbox-css/dist/scss/toolbox";

5. Fjern lokal css

/* src/App.vue

Fjern app-spesifikk fontoppsett */
font-family: Avenir, Helvetica, Arial, sans-serif;

6. Legg på klasse på sidetittel

/* src/main.scss

Legg til responsiv header */
@use "sass:map";
@use "@aasen/toolbox/dist/scss/abstracts/variables";
/* Legg merke til at breakpoints hentes inn uten namespace: */
@use "@aasen/toolbox/dist/scss/abstracts/mixins/breakpoints" as *;
@use "@aasen/toolbox/dist/scss/abstracts/mixins/typography";

.h1 {
  @include typography.text-preset("tool-preset1-mobile");
  margin-bottom: map.get(variables.$spacing, "size-30");

  @include bp("tablet-up") {
    @include typography.text-preset("tool-preset3");
  }
}

<!-- src/components/HelloWorld.vue

Legg til den nye klassen -->
<h1 class="h1">{{ msg }}</h1>

7. Legg til en logo

<!-- src/App.vue

Legg til logo -->
<img
  class="dummylogo"
  alt="logo"
  src="@aasen/toolbox/dist/logos/oslo-kommune.svg"
/>

<style lang="scss">
/* Legg til moduler */
@use "sass:map";
@use "@aasen/toolbox/dist/scss/abstracts/variables";

/* Legg til klassen for logoen */
.dummylogo {
  margin-bottom: map.get(variables.$spacing, "size-30");
  height: 12rem;
}
</style>

CSS-rammeverket

Nøkkelegenskaper

• Modulært - import modulene du selv ønsker.
• Må bruke css-klasser - ingen overstyring utenom å bruke OsloSans.
• Komponentbibliotekene bruker samme css.
• Sass abstracts gir ekstra nytteverdi for deg som bruker.

Oppbygging

| Kategori | Beskrivelse | |:-----------|:-----------------------------------------------------------------------------------------| | Abstracts | Variabler, funksjoner, mixins: Alle Sass-verktøy som brukes på tvers av rammeverket | | Normalise | En ganske liten normalisering for å ha en felles baseline | | Base | Grunnleggende moduler som farger, grid, fonter, tekststiler, mm. | | Elements | HTML-elementer som er stylet, som knapper, lister og tabeller. | | Components | Komponenter som kombinerer elementer og komponenter for å lage mer komplekse komponenter |

Noen ord om abstracts

Abstracts består av /variables, /functions, og /mixins og samler alle globale Sass variabler og verktøy på tvers av rammeverket. Disse er et fundament for resten av rammeverket.

Ingenting under denne folderen skal generere en eneste linje CSS når den er kompilert på egen hånd. Disse er bare Sass hjelpeverktøy.

Folderen /variables er en samling Sass-variabler skrevet på formen Sass maps. Dette gir en fin måte å kategorisere variablene og gir mulighet for nested maps.

/* abstracts/variables/_breakpoints.scss */

$breakpoints: (
  'mobile': 0,
  'phablet': 36rem /* ~576px */,
  'tablet': 48rem /* ~768px */,
  'tablet-big': 64rem /* ~1024px */,
  'laptop': 80rem /* ~1280px */,
  'desktop': 100rem /* ~1600px */,
) !default;

For prekompilerte .css er hver kategori pakket i en fil, mens for .scss kan hver modul brukes hver for seg.

👮 Lisens

Toolbox CSS er distribuert under MIT-lisens for åpen kildekode.