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
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
The latest major versions of If Design System and their corresponding CDN links are:
Version | Release Date | CDN link |
---|---|---|
17.0.47 | 11/15/2023 | https://static.design.if.eu/ids-core/17.0.47/ifdesignsystem.min.css |
16.0.37 | 3/14/2023 | https://static.design.if.eu/versions/16.0.37/ifdesignsystem.min.css |
15.0.13 | 1/9/2023 | https://static.design.if.eu/versions/15.0.13/ifdesignsystem.min.css |
14.29.10 | 11/29/2022 | https://static.design.if.eu/versions/14.29.10/ifdesignsystem.min.css |
13.12.2 | 10/27/2021 | https://static.design.if.eu/versions/13.12.2/ifdesignsystem.min.css |
12.15.1 | 08/24/2021 | https://static.design.if.eu/versions/12.15.1/ifdesignsystem.min.css |
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 .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:
- 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!