Important information:

Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Integrator

Everything you should know to start using our HTML/CSS/Javascript responsive library.

last modified: 01/01/1601 01:00:00

Tools installation

As integrator, you will need some tools like Visual Studio Code, Turtoise Git, IIS, Gulp, NVDA...
Please, contact Shelly Van Dam to follow the process to install them.

Visual Studio Code extensions

On Visual Studio Code, you could install extensions. If you are lucky, you could directly install them via the Marketplace. If not, you have to manualy install VSIX files (click on 3 dots on the top right, Install from VSIX...)

ASP.NET Helper 0.6.4
Auto Rename Tag 0.1.9
C# 1.23.12
Git History 0.6.19
GitLens -- Git supercharged 11.2.1
indent-rainbow 8.2.2
IntelliSense for CSS class names in HTML 1.20.0
Prettier - Code formatter 7.1.1
Sass 1.8.18

You can also find VSIX files on our Teams Group (GRP DHC/DST Integrators), Files > visual-studio-plugins

Make your HTML accessible

This is one of the most important rule to follow.

Discover accessibility guidelines

BOSA Accessibility Check bookmarklet

Check your page to be conform to accessibility standard.

More info

NVDA

NVDA is a screen reader for Windows computers.
It's very important to test your page with NVDA to ensure its accessibility.
You can find a user guide and a quick reference of keyboard shortcuts to help you using it.

last modified: 01/01/1601 01:00:00

Zurb Foundation 5.1.2

Our library is based on Foundation v5.1.2 (Documentation) New window.

When you add content after page loaded, you may sometimes need to reinitialize Foundation via $(document).foundation();

CSS and JS package

Never copy the packages!

Otherwise you will be desynchronized from the libraries meaning your project will probably be quickly outdated and unsupported.

Simply link your projects to the following files:

CSS: /.resources/cdn/cis/css/iportal-all-css-pack.css
JS: /.resources/cdn/webcomponents/packs/iportal-all-pack.js

You can easily check JS library's version via the console by typing inception.VERSION and inception.BUILD

last modified: 01/01/1601 01:00:00

Think Mobile first

Make your code mobile first and as simple as possible.
Code duplication for different breakpoints is totally forbidden.

IDs must be unique

Even if you already know it, don't hesitate to check your page to be sure.

Copy from page source

Always copy code from page source (Ctrl + U), never from the inspector. You will save a lost of mistakes and time!

Debug

On <html> tag, add rs-debug class to see structure.