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
  • To be able to install packages for If Design System, you are required to setup your environment with credentials. Please follow this guide before continuing

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/cdn/ifdesignsystem.min.css All of our CSS Bundled. Always the latest release
CSS https://if-vid-brand-cdn.azureedge.net/cdn/ifdesignsystem-without-icons.min.css All of our CSS bundled, without icons. Always the latest release
CSS https://if-vid-brand-cdn.azureedge.net/cdn/icons.min.css All of our icons. Always the latest release

NOTE! The CSS Bundles is the latest CSS files, and there will be breaking changes. Every breaking change is communicated, so use at own risk.

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

NOTE! This CDN (https://static.design.if.eu/versions/12.6.1/blob/…) will be deprecated in the near future, please use the following setup:

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.

We assume here that you are serving your `index.html` from the `public` folder

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:

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 .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 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:

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:

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!

Table of Contents

Edit this section, Opens in new window
Contact us, Opens in new window