HTML/CSS

The library provides front-end developers and engineers a collection of reusable HTML and Stylus, Less & SCSS partials to build websites and user interfaces. Adopting the library enables developers to use consistent markup, styles, and behavior in prototype and production work.

Install

Prerequisites

A decent bash system. For example: iTerm, Terminal in VSCode, Linux Bash, Ubuntu Bash through Windows WSL2 etc
Node >=14.17.3 and npm >=6.14.4

Using npm:

// Example with the button component
npm i --save @ids-core/button

Or yarn:

// Example with the button component
yarn add @ids-core/button

Getting started

What's included

@ids-core/button/
├── dist
│   ├── button.css
│   └── button.min.css
└── src
    └── mixins
      └── button.styl
      └── button.scss
      └── button.less
    └── button.styl
    └── button.scss
    └── button.less
    └── (And rest of the preprocessor files, ready for cherry picking)

CDN

You can use your package CDN for easy access to our built static files. This is great for prototyping and trying our without installing anything.

Scripts	URL	Description
CSS	https://if-vid-brand-cdn.azureedge.net/ifdesignsystem.min.css	All of our CSS Bundled. Always the latest release
CSS	https://if-vid-brand-cdn.azureedge.net/ifdesignsystem-without-icons.min.css	All of our CSS bundled, without icons. Always the latest release
CSS	https://if-vid-brand-cdn.azureedge.net/icons.min.css	All of our icons. Always the latest release

If you want to use a specific version of the files, and have more control when including the If Design System, you can use it like this:

Scripts	URL	Description
CSS	https://static.design.if.eu/versions/12.6.1/blob/ifdesignsystem.min.css	All of our CSS Bundled for given version

Scripts	URL	Description
CSS	https://static.design.if.eu/packages/@ids-core/bundle/14.0.1/ifdesignsystem.min.css	All of our CSS Bundled for given version

With this setup, you also can import separate components:

Scripts	URL	Description
CSS	https://static.design.if.eu/packages/@ids-core/button/14.0.1/button.min.css	CSS for the Button Component

CodePen

We also have a set of CodePens that we have created for the components and for proof of concepts that you can easily fork and play around with.

Usage without preprocessors

If you want to just use the CSS without churning it through the build system, you can follow these instructions.

Install vendor-copy and rimraf to your project:

$ npm i vendor-copy rimraf--save-dev

Add config to your projects package.json:

{
    "vendorCopy": [
        {
            "from": "node_modules/@ids-core/bundle/dist/fonts",
            "to": "public/styles/fonts"
        },
        {
            "from": "node_modules/@ids-core/bundle/dist/ifdesignsystem.min.css",
            "to": "public/styles/ifdesignsystem.min.css"
        },
        {
            "from": "node_modules/@ids-core/bundle/dist/ifdesignsystem.min.css.map",
            "to": "public/styles/ifdesignsystem.min.css.map"
        }
    ]
}

Add or update postinstall script:

{
    "scripts": {
        "postinstall": "rimraf public/styles && vendor-copy"
    }
}

Update your index.html:

<!DOCTYPE html>
<html class="if" lang="en">
    <head>
        <link async href="/styles/ifdesignsystem.min.css" rel="stylesheet" type="text/css" />
    </head>
    <body class="if"></body>
</html>

And you're good to go!

Stylus

This walktrough shows you have to install and use the styling for the components, and bundle the Stylus files with Webpack.

Step 1: Webpack with Stylus

We’re going to use webpack-dev-server to demonstrate how Webpack bundles our Stylus files. First, run npm init to create a package.json file. When complete, add the start property to the scripts section.

{
    "scripts": {
        "start": "webpack-dev-server"
    }
}

You’ll need all of these Node dependencies:

css-loader: CSS
resolve-url-loader: Resolves CSS @import and url() paths
file-loader: Serves the .css file as a public URL
stylus: Provides binding for Node.js to Stylus, peer dependency to stylus-loader
stylus-loader: Loads a Stylus file and compiles it to CSS
mini-css-extract-plugin: Extracts the CSS into a .css file
webpack: Bundles Stylus
webpack-dev-server: Development server
webpack-cli: The Webpack CLI

You can install them all like this:

$ npm i --save-dev cross-env css-loader file-loader stylus stylus-loader mini-css-extract-plugin webpack webpack-dev-server webpack-cli

In order to demonstrate how Webpack bundles our Stylus, you’ll need an index.html. This HTML file needs to include CSS. The CSS is generated by stylus-loader, which compiles Stylus files into CSS. The CSS is extracted into a .cssfile by mini-css-extract-plugin. Create this simple “hello world” index.html:

<!DOCTYPE html>
<html class="if">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="Content-Language" content="no" />
        <meta name="robots" content="none" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="translucent black" />
        <link rel="stylesheet" href="bundle.css" />
    </head>
    <body class="if">
        Hello world!
    </body>
</html>

And create a simple Stylus file called app.styl:

body
    color blue

Then configure Webpack to convert app.styl into bundle.css. For that you need a new webpack.config.js file:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = [
    {
        plugins: [
            new MiniCssExtractPlugin({
                filename: 'bundle.css',
            }),
        ],
        entry: './app.styl',
        output: {
            // This is necessary for webpack to compile
            // But we never use style-bundle.js
            filename: 'style-bundle.js',
        },
        module: {
            rules: [
                {
                    test: /\.styl$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                        },
                        {
                            loader: 'css-loader',
                            options: {
                                importLoaders: 2,
                            },
                        },
                        { loader: 'resolve-url-loader' },
                        {
                            loader: 'stylus-loader',
                            options: {
                                sourceMap: true,
                                paths: ['node_modules/'],
                            },
                        },
                    ],
                },
                {
                    test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '[name].[ext]',
                                outputPath: 'fonts/',
                            },
                        },
                    ],
                },
            ],
        },
    },
];

To test your webpack configuration, run:

$ npm start

And open http://localhost:8080 in a browser. You should see a blue “Hello World”.

Step 2: Include Stylus for a component

Now that you have Webpack configured to compile Stylus into CSS, let’s include the Stylus files for the colors. First, install the Node dependency:

$ npm i @ids-core/color

We need to tell our app.styl to import the Stylus files for @ids-core/color. Replace your “hello world” version of app.styl with this code:

@import '~@ids-core/color/src/color.styl'

.if.my-container
    background-color $color-background-dark-beige
    height 20rem
    width 100%

Now add some markup:

<body class="if">
    <div class="if my-container">Hello world!</div>
</body>

Now run npm start again and open http://localhost:8080. You should see your container with a background color!

SASS/SCSS

This walktrough shows you have to install and use the styling for the components, and bundle the Sass files with Webpack.

Step 1: Webpack with SASS/SCSS

We’re going to use webpack-dev-server to demonstrate how Webpack bundles our Sass files. First, run npm init to create a package.json file. When complete, add the start property to the scripts section.

{
    "scripts": {
        "start": "webpack-dev-server"
    }
}

You’ll need all of these Node dependencies:

css-loader: CSS
resolve-url-loader: Resolves CSS @import and url() paths
file-loader: Serves the .css file as a public URL
node-sass: Provides binding for Node.js to Sass
sass-loader: Loads a Sass file and compiles it to CSS
mini-css-extract-plugin: Extracts the CSS into a .css file
webpack: Bundles Sass
webpack-dev-server: Development server
webpack-cli: The Webpack CLI

You can install them all like this:

$ npm i --save-dev cross-env css-loader file-loader node-sass sass-loader mini-css-extract-plugin webpack webpack-dev-server webpack-cli

In order to demonstrate how Webpack bundles our Sass, you’ll need an index.html. This HTML file needs to include CSS. The CSS is generated by scss-loader, which compiles Sass files into CSS. The CSS is extracted into a .css file by mini-css-extract-plugin. Create this simple “hello world” index.html:

<!DOCTYPE html>
<html class="if">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="Content-Language" content="no" />
        <meta name="robots" content="none" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="translucent black" />
        <link rel="stylesheet" href="bundle.css" />
    </head>
    <body class="if">
        Hello world!
    </body>
</html>

And create a simple Sass file called app.scss:

body {
    color: blue;
}

Then configure Webpack to convert app.scss into bundle.css. For that you need a new webpack.config.js file:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = [
    {
        plugins: [
            new MiniCssExtractPlugin({
                filename: 'bundle.css',
            }),
        ],
        entry: './app.scss',
        output: {
            // This is necessary for webpack to compile
            // But we never use style-bundle.js
            filename: 'style-bundle.js',
        },
        module: {
            rules: [
                {
                    test: /\.scss$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                        },
                        {
                            loader: 'css-loader',
                            options: {
                                importLoaders: 2,
                            },
                        },
                        { loader: 'resolve-url-loader' },
                        {
                            loader: 'sass-loader',
                            options: {
                                implementation: require('node-sass'),
                                sourceMap: true,
                            },
                        },
                    ],
                },
                {
                    test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '[name].[ext]',
                                outputPath: 'fonts/',
                            },
                        },
                    ],
                },
            ],
        },
    },
];

To test your webpack configuration, run:

$ npm start

And open http://localhost:8080 in a browser. You should see a blue “Hello World”.

Step 2: Include SASS/SCSS for a component

Now that you have Webpack configured to compile Sass into CSS, let’s include the Sass files for the colors. First, install the Node dependency:

$ npm i @ids-core/color

We need to tell our app.scss to import the Sass files for @ids-core/color. Replace your “hello world” version of app.scss with this code:

@import '@ids-core/color/src/color.scss'

.if.my-container {
    background-color: $color-background-dark-beige;
    height: 20rem;
    width: 100%;
}

Now add some markup:

<body class="if">
    <div class="if my-container">Hello world!</div>
</body>

Now run npm start again and open http://localhost:8080. You should see your container with a background color!

Less

This walktrough shows you have to install and use the styling for the components, and bundle the Less files with Webpack.

Step 1: Webpack with Less

We’re going to use webpack-dev-server to demonstrate how Webpack bundles our Less files. First, run npm init to create a package.json file. When complete, add the start property to the scripts section.

{
    "scripts": {
        "start": "webpack-dev-server"
    }
}

You’ll need all of these Node dependencies:

css-loader: CSS
resolve-url-loader: Resolves CSS @import and url() paths
file-loader: Serves the .css file as a public URL
less: Provides binding for Node.js to Less
less-loader: Loads a Less file and compiles it to CSS
mini-css-extract-plugin: Extracts the CSS into a .css file
webpack: Bundles Less
webpack-dev-server: Development server
webpack-cli: The Webpack CLI

You can install them all like this:

$ npm i --save-dev cross-env css-loader file-loader less less-loader resolve-url-loader mini-css-extract-plugin webpack webpack-dev-server webpack-cli

In order to demonstrate how Webpack bundles our Less, you’ll need an index.html. This HTML file needs to include CSS. The CSS is generated by less-loader, which compiles Less files into CSS. The CSS is extracted into a .css file by mini-css-extract-plugin. Create this simple “hello world” index.html:

<!DOCTYPE html>
<html class="if">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="Content-Language" content="no" />
        <meta name="robots" content="none" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="translucent black" />
        <link rel="stylesheet" href="bundle.css" />
    </head>
    <body class="if">
        Hello world!
    </body>
</html>

And create a simple Less file called app.less:

body {
    color: blue;
}

Then configure Webpack to convert app.less into bundle.css. For that you need a new webpack.config.js file:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = [
    {
        plugins: [
            new MiniCssExtractPlugin({
                filename: 'bundle.css',
            }),
        ],
        entry: './app.less',
        output: {
            // This is necessary for webpack to compile
            // But we never use style-bundle.js
            filename: 'style-bundle.js',
        },
        module: {
            rules: [
                {
                    test: /\.less$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                        },
                        {
                            loader: 'css-loader',
                            options: {
                                importLoaders: 2,
                            },
                        },
                        { loader: 'resolve-url-loader' },
                        {
                            loader: 'less-loader',
                            options: {
                                sourceMap: true,
                            },
                        },
                    ],
                },
                {
                    test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '[name].[ext]',
                                outputPath: 'fonts/',
                            },
                        },
                    ],
                },
            ],
        },
    },
];

To test your webpack configuration, run:

$ npm start

And open http://localhost:8080 in a browser. You should see a blue “Hello World”.

Step 2: Include Less for a component

Now that you have Webpack configured to compile Less into CSS, let’s include the Less files for the colors. First, install the Node dependency:

$ npm i @ids-core/color

We need to tell our app.less to import the Less files for @ids-core/color. Replace your “hello world” version of app.less with this code:

@import '@ids-core/color/src/color.less'

.if.my-container {
    background-color: @color-background-dark-beige;
    height: 20rem;
    width: 100%;
}

Now add some markup:

<body class="if">
    <div class="if my-container">Hello world!</div>
</body>

Now run npm start again and open http://localhost:8080. You should see your container with a background color!

Troubleshooting

If you experience any issues while getting set up with the libraries, please head over to our MS Teams channel . We're always glad to help!

Edit this section

HTML/CSS

Install

Prerequisites

Using npm:

Or yarn:

Getting started

What's included

CDN

CodePen

Usage without preprocessors

Stylus

Step 1: Webpack with Stylus

Step 2: Include Stylus for a component

SASS/SCSS

Step 1: Webpack with SASS/SCSS

Step 2: Include SASS/SCSS for a component

Less

Step 1: Webpack with Less

Step 2: Include Less for a component

Troubleshooting

Table of Contents