Skip to content

foundations 0.0.3

Install from the command line:
Learn more about npm packages
$ npm install @db-ui/foundations@0.0.3
Install via package.json:
"@db-ui/foundations": "0.0.3"

About this version

@db-ui/foundations

A library containing all tokens of DB UX System.

We currently support:

Install

npm i @db-ui/foundations

Usage

CSS

// main.ts / main.js
import "@db-ui/foundations/build/db-ui-foundations.css";
// optional: to use classes like e.g. db-ui-bg-success
import "@db-ui/foundations/build/color-classes.css";
.my-container {
	padding: var(--db-spacing-fixed-md);
}
<div class="db-ui-regular db-ui-bg-success my-container"></div>

SCSS

Based on your technology/setup you need to change the paths of the assets folder:

  • Default: points to ../assets
  • Webpack: points to ~@db-ui/foundations/assets
  • Rollup: points to @db-ui/foundations/assets 
// index.scss
@use "@db-ui/foundations/build/scss/rollup.assets-paths" as *;
@use "@db-ui/foundations/build/scss/icon/icons" as *;
@use "@db-ui/foundations/build/db-ui-foundations" as *;
// optional: to use db-ui-bg-success
@import "@db-ui/foundations/build/color-classes" as *;
// optional: to use use $db-spacing-fixed-md
@use "@db-ui/foundations/build/scss/variables.global" as *;

.my-container {
	padding: $db-spacing-fixed-md;
}
<div class="db-ui-regular db-ui-bg-success my-container"></div>

Tailwind

//tailwind.config.cjs

const tokens = require("@db-ui/foundations/build/tailwind/tailwind-tokens.json");

module.exports = {
	content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
	plugins: [],
	theme: {
		screens: tokens.screens,
		spacing: tokens.spacing,
		boxShadow: tokens.elevation,
		gap: ({ theme }) => ({
			...theme("spacing")
		}),
		space: ({ theme }) => ({
			...theme("spacing")
		})
	}
};
<div class="p-fix-md"></div>

Details

Assets

  • foundations-0.0.3.tgz

Download activity

  • Total downloads 0
  • Last 30 days 0
  • Last week 0
  • Today 0

Recent versions

View all