@aasen/toolbox-css v0.0.1
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.
2 years ago