Please don't forget to read Usage part of each element.
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.
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.
Zurb Foundation 5.1.2
Our library is based on Foundation v5.1.2 (Documentation) .
When you add content after page loaded, you may sometimes need to reinitialize Foundation via
CSS and JS package
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
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!
class to see structure.