Responsive Organization Chart - CodePen

Créer un organigramme en Html et Css

Afin de réaliser un organigramme (Organization chart en anglais), plusieurs solutions sont disponibles :

Une solution élégante et responsive, en css : http://codepen.io/siiron/pen/aLkdE
Responsive Organization Chart - CodePen

Une solution basée sur Jquery, plutôt bien faite : https://github.com/caprica/jquery-orgchart
V
oir les démos : http://www.capricasoftware.co.uk/projects/jquery-orgchart/demos.html
Caprica Software JQuery Org Chart Live Demos Page

un exemple pour du share point : https://github.com/Aymkdn/OrgChart-JS-Sharepoint

Il existe même une solution proposée par Google : https://developers.google.com/chart/interactive/docs/gallery/orgchart
Visualization- Organizational Chart - Google Charts — Google Developers

 

Ces solution suffisent pour la majorité des cas, mais lorsque ça devient un peu plus compliqué en terme de hiérarchie, on est un peu coincé.

Pour des cas plus évolués,  ma préférence va vraiment à JsPlumb, permettant de relier des éléments entre eux via jquery, les démos sont bluffantes : http://jsplumbtoolkit.com/demo/flowchart/dom.html
jsPlumb 1 6.2 demo - flowchart (Vanilla)

 

Foundation - The Most Advanced Responsive Front-end Framework from ZURB (1)

des colonnes avec la même hauteur avec le framework Foundation

Foundation est un framework css vraiment performant permettant de créer des interfaces fonctionnelles et responsives, que vous pouvez découvrir ici : http://foundation.zurb.com/

Lorsque vous créez vos différentes colonnes en utilisant la grid, il se peut que vous ayez besoin à un moment donné que une 2 ou plusieurs colonnes aient la même hauteur. Voici une solution simple élégante, tout comme ce framework !

La solution proposée est d’utiliser des data-attributes afin d’indiquer quelles sont les blocs où effectuer la modification, et un brin de javascript pour faire fonctionner la magie.

Les attributs : data-match-height et data-height-watch servent à définir le parent des éléments qui doivent avoir la même height, et à définir les blocs enfants qui doivent avoir la même hauteur

et le javascript qui va bien, à inclure sur vos pages, après app.js en fin de page

Pas encore testé de mon côté, mais je dois le tester sous peu ! je vous tiens informé !

FireSizer : et un plugin de Firefox pour toutes les résolutions, les lier…

Firesizer est un des petits plugins de Firefox ayant sa place dans la boîte à outil du Webmaster.
Il permet, comme son nom l’indique, de pouvoir redimensionner à la volée une page de Firefox, afin de voir comment se comporte le design d’un site, l’alignement de certains blocs, voir si le joli background de Khris burton rend bien en  1024 x 768, etc …

Pour l’installer, ça se passe ici : https://addons.mozilla.org/fr/firefox/addon/5792

Un outil similaire est présent dans la barre de Web Developer, mais l’astuce que je vais donner est identique.

En fait, après l’installation, il vous faut rentrer à la main les différentes résolutions que vous souhaitez, puisqu »il ne prend que 1024×768 par défaut.

Voilà un petit panel de résolution à entrer, afin de bien tester vos sites :

1024 x 768
1280 x 800
1280 x 1024
1440 x 900
1680 x 1050
800 x 600
1152 x 864
1366 x 768
1280 x 768
1280 x 960

Ainsi, vous pourrez tester l’affichage de votre page avec  plupart des résolutions d’écrans