Responsive Organization Chart HTML CSS

by
Responsive Organization Chart HTML CSS
Code Snippet:Responsive organogram flow chart CSS only
Author: rene van der lende
Published: January 10, 2024
Last Updated: January 22, 2024
Downloads: 4,351
License: MIT
Edit Code online: View on CodePen
Read More
 Demo
Download (File not found!)

This code helps you to create a responsive organization chart using HTML and CSS. It allows you to visualize the hierarchy of different groups and committees within an organization. The code uses flexible layouts and CSS styles to represent the chart elements, making it responsive to different screen sizes. This chart can be helpful for displaying the structure of your organization in a clear and organized way.

How to Create Responsive Organization Chart HTML CSS

1. First of all, load the Material Icons and Normalize CSS by adding the following CDN links into the head tag of your HTML document.

  1. <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" crossorigin="anonymous">
  2. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

2. Create the basic HTML structure for your organization chart. You can copy and paste the following code into your HTML file:

  1. <body dir="ltr" outlines="0">
  2.     <section band>
  3.         <div data-chart="OC" C>
  4.  
  5.             <div data-knot="branch" C>
  6.                 <div data-knot="node.step.start">
  7.                     <a data-symbol s a href="javascript:void(0)" title="example using <a>nchor">
  8.                         <div class="header" clr="2"><div><i icon>account_balance</i><br>Group Board</div></div>
  9.                     </a>
  10.                 </div>
  11.                 <div data-knot="node.step">
  12.                     <a data-symbol s a href="javascript:void(0)">
  13.                         <div class="header" clr="3"><div><i icon>account_balance</i><br>Board Committees</div></div>
  14.                     </a>
  15.                 </div>
  16.             </div>
  17.  
  18.  
  19.             <div data-knot="branch">
  20.                 <div data-knot="node.lft">
  21.                     <div data-knot="step">
  22.                          <div data-symbol id="symAudit">
  23.                             <div class="header"><div>Audit</div></div>
  24.                         </div>
  25.                     </div>
  26.                 </div>
  27.                 <div data-knot="node.ctr">
  28.                     <div data-knot="step">
  29.                         <div data-symbol>
  30.                             <div class="header"><div>Remune&shy;ration and Human Resources</div></div>
  31.                         </div>
  32.                     </div>
  33.                 </div>
  34.                 <div data-knot="node.ctr">
  35.                     <div data-knot="node.step"><!-- empty data-knot for vertical line --></div>
  36.                 </div>
  37.                 <div data-knot="node.ctr">
  38.                     <div data-knot="step">
  39.                         <div data-symbol>
  40.                             <div class="header"><div>Social Ethics</div></div>
  41.                         </div>
  42.                     </div>
  43.                 </div>
  44.                 <div data-knot="node.rgt">
  45.                     <div data-knot="step">
  46.                         <div data-symbol id="symNominate">
  47.                             <div class="header"><div>Nominations</div></div>
  48.                         </div>
  49.                     </div>
  50.                 </div>
  51.             </div>
  52.  
  53.  
  54.             <div data-knot="branch">
  55.                 <div data-knot="node.lft">
  56.                     <div data-knot="step">
  57.                         <a data-symbol s a href="javascript:void(0)">
  58.                             <div class="header" clr="3"><div><i icon>account_balance</i><br>Compliance Committee</div></div>
  59.                         </a>
  60.                     </div>
  61.                 </div>
  62.                 <div data-knot="node.ctr">
  63.                     <div data-knot="node.step"></div>
  64.                 </div>
  65.                 <div data-knot="node.rgt">
  66.                     <div data-knot="step">
  67.                         <a data-symbol s a href="javascript:void(0)">
  68.                             <div class="header" clr="3"><div><i icon>account_balance</i><br>Executive Committees</div></div>
  69.                         </a>
  70.                     </div>
  71.                 </div>
  72.             </div>
  73.  
  74.  
  75.             <div data-knot="branch">
  76.                 <div data-knot="node.lft">
  77.                     <div data-knot="step">
  78.                          <div data-symbol>
  79.                             <div class="header"><div>Group Searching</div></div>
  80.                         </div>
  81.                     </div>
  82.                 </div>
  83.                 <div data-knot="node.ctr">
  84.                     <div data-knot="step">
  85.                         <div data-symbol>
  86.                             <div class="header"><div>Group Operation</div></div>
  87.                         </div>
  88.                     </div>
  89.                 </div>
  90.                 <div data-knot="node.ctr">
  91.                     <div data-knot="node.step.stop">
  92.                         <div data-symbol>
  93.                             <div class="header"><div>Group Talent</div></div>
  94.                         </div>
  95.                     </div>
  96.                 </div>
  97.                 <div data-knot="node.ctr">
  98.                     <div data-knot="step">
  99.                         <div data-symbol>
  100.                             <div class="header"><div>Group Treasure</div></div>
  101.                         </div>
  102.                     </div>
  103.                 </div>
  104.                 <div data-knot="node.rgt">
  105.                     <div data-knot="step">
  106.                         <div data-symbol>
  107.                             <div class="header"><div>Group Trans&shy;formation</div></div>
  108.                         </div>
  109.                     </div>
  110.                 </div>
  111.             </div>
  112.         </div>
  113.     </section>
  114. </body>

The above HTML code uses custom data attributes (data-chart, data-knot, and data-symbol) to organize the chart elements. You can customize this structure according to your organization’s hierarchy.

3. The following CSS code contains styles for layout, fonts, colors, and animations for the chart. You can further customize the styling according to your needs. Add this CSS code to your proeject.

  1. /************************************************/
  2. /* Convenient global rules             [STABLE] */
  3. /************************************************/
  4. [outlines="1"] * { outline: 1px dashed } /* for debugging */
  5.  
  6.  *         { box-sizing: border-box }
  7. html, body { width: 100%; max-width: 100% }
  8. body       { margin: 0; min-height: 100vh }
  9.  
  10. a { text-decoration: none; color: currentColor }
  11.  
  12. [band] { display: flex; flex-flow: row wrap;
  13.          justify-content: center; align-content: center;
  14.          padding: calc(5vh + 48px) calc(19.5vw - 54.4px) }
  15.  
  16. /* generic flexbox shortcuts */
  17. [F]         { display: flex }
  18. [R]         { flex-direction: row    } /* horizontal: row of 1:N columns (FBL default) */
  19. [C]         { flex-direction: column } /* vertical: column of 1:N rows   */
  20. [W]         { flex-wrap: wrap }
  21.  
  22.  
  23. /*
  24.     KNOT LOGIC
  25.     'branch' - 1:N 'node',1:N 'node.step' and 1:N 'step'
  26.     'node'   - 1:N 'node' and 1:N 'step'
  27.     'step'   - 1 data-symbol
  28.  
  29.     You can use flexbox shortcut attributes R (horizontal) and C (vertical) to 
  30.     determine the nesting direction of 'branch'es and 'node's. (R) is optional
  31.     as horizontal is the default direction. 
  32.  
  33.     (Depending on orientation of the knots, all kinds of nestings might work,
  34.      but that will require trial and error, fiddling.)
  35.  
  36.     SPECIFICATIONS
  37.     1) 'branch' has no specific rules, but acts as a container for 'node's
  38.        and to distinguish from 'node' and 'step'. 
  39.        Add your own rules for specific 'branch' styling like fonts,colors,border,spacing.
  40.  
  41.     2) 'node' and 'step' only use :before and :after to position and draw
  42.        connecting lines.
  43.  
  44.        'node'      horizontal line attachement
  45.        'step'      vertical
  46.        'node.step' both
  47.  
  48.     3) 'node.step' can be empty (no 'data-symbol'), in which case it will only
  49.        draw cross lines.
  50.  
  51.     4) 'start' and 'stop' values are used to prevent drawing of
  52.        starting and ending lines.
  53.  
  54.     5) Knot 'lft', 'ctr' and 'rgt' values define how sibling nodes are connected
  55.        'lft' - left hand node, only one
  56.        'ctr' - center nodes, can be more than one 
  57.        'rgt' - right hand node, only one
  58.  
  59.     My motivation for use of 'data-* attributes' instead of classes is they
  60.     are easy accessible as javascript variables:
  61.  
  62.     someElement.dataset.chart
  63.     someElement.dataset.knot
  64.     someElement.dataset.symbol
  65.     
  66. */
  67.  
  68. /***************/
  69. /* Chart Setup */
  70. /***************/
  71. /* If you want the knots distributed as-is, remove 'align-items' */
  72. [data-chart]        { display: flex; align-items: center } /* align [OPTIONAL], try! */
  73. [data-knot]         { display: flex; flex-grow: 1 }        /* [MANDATORY] */
  74.  
  75. /* default alignments */
  76. [data-knot]         { justify-content: center }
  77. [data-knot*="node"] { align-items: stretch    }
  78. [data-knot*="step"] { align-items: flex-start } 
  79.  
  80. /* this code keeps the lines connect to the symbols */
  81. [data-knot]         { position: relative; z-index: 1 } /* new stacking context */
  82. [data-knot]:before,
  83. [data-knot]:after   { position: absolute; z-index: -1; content: '' }
  84. /* put some character in 'content' to keep track when debugging */
  85.  
  86. /* Horizontal lines ('node') setup */
  87. [data-knot]:before  { top   :  1px } /* adjust -+1 for thickess of outlines */
  88. [data-knot]:after   { bottom: -1px }
  89.  
  90. [data-knot*="node"]:before,[data-knot*="node"]:after
  91. { height: 0px /* for IE11 */; width: 50% }
  92.  
  93. /* Vertical lines ('step') setup */
  94. [data-knot*="step"]:before,[data-knot*="step"]:after
  95. { width: 0px /* for IE11 */; left: 50%; right: 50% }
  96.  
  97. /* positioning of the lines ('lft','ctr','rgt') */
  98. [data-knot*="ctr"]:before,[data-knot*="ctr"]:after
  99. { width: 100%; left: 0 }
  100.  
  101. /* (EITHER) Handles document reading direction (dir="ltr" in <body>), default is 'ltr' */
  102. [dir="ltr"] [data-knot*="lft"]:before, [dir="ltr"] [data-knot*="lft"]:after { left : 50% }
  103. [dir="ltr"] [data-knot*="rgt"]:before, [dir="ltr"] [data-knot*="rgt"]:after { right: 50% }
  104.  
  105. [dir="rtl"] [data-knot*="lft"]:before, [dir="rtl"] [data-knot*="lft"]:after { right: 50% }
  106. [dir="rtl"] [data-knot*="rgt"]:before, [dir="rtl"] [data-knot*="rgt"]:after { left : 50% }
  107.  
  108. /* (OR) For use without [dir]
  109. [data-knot*="lft"]:before, [data-knot*="lft"]:after { left : 50% }
  110. [data-knot*="rgt"]:before, [data-knot*="rgt"]:after { right: 50% }
  111. */
  112.  
  113. /* line coloring */
  114. [data-knot*="node"]:before,/*[data-knot*="node.step"]:after,/* REMOVE */
  115. [data-knot*="step"]:before,[data-knot*="step"]:after { outline: 1px solid #666 }
  116.  
  117. /* no line drawing cases */
  118. [data-knot="step"]:after, /* notice the missing '*' */
  119. [data-knot*="start"]:before ,[data-knot*="stop"]:after { outline: none }
  120.  
  121. /*
  122.     responsive sizes: T/B p1(320,6) p2(1280,24) and L/R p1(320,4) p2(1280,16)
  123.     modify these to meet specific requirements.
  124. */
  125. [data-knot*="step"]         { padding: 1.875vmin 1.25vmin }
  126. [data-knot*="step"]:before  { height : 1.875vmin }              /* Same height as [data-step] T/B padding */
  127. [data-knot*="step"]:after   { height : calc(100% - 1.875vmin) } /* pct to from below (minus T/B padding) */
  128.  
  129. /****************/
  130. /* Symbol Setup */
  131. /****************/
  132. /*
  133.     Chart 'data-symbol's, flexbox intended use
  134.  
  135.     FBL (V)     FBL (H)      Any
  136.     --------    -------      -------
  137.     (S)ymbol -> (H)eader  -> content
  138.              -> (C)ontent -> content
  139.              -> (F)ooter  -> content
  140. */
  141. [data-symbol],
  142. [data-symbol]>*         { display: flex }   /* S,H,C,F are flexbox parent containers */
  143. [data-symbol]>*>*       { flex-grow: 1 }    /* sets default to 'fill' for content of H,C,F */
  144.  
  145. [data-symbol]           { flex-direction: column  } /* a column of 1:N rows */
  146. [data-symbol]>.header   { align-items: center }
  147.  
  148. /* styling */
  149. [data-symbol]           { 
  150.     text-decoration: none;
  151.  
  152.     color: currentColor;
  153.     border: 1px solid gray;
  154.  
  155.     background-color: #efefef;
  156.     border-radius: 50%;
  157.     /* [OPTIONAL], only when using bg color. Make equal to br .header below */
  158. }
  159.  
  160. [data-symbol]>.header {
  161.     padding: .25rem .5rem;
  162.     text-align: center;
  163.     border-radius: 50%;
  164.  
  165.     /* responsive sizes: p1(320,50) p2(1920,180) */
  166.     width : calc(8.125vmin + 24px);
  167.     height: calc(8.125vmin + 24px);
  168.  
  169.     /*
  170.         responsive fontsize: p1(320,6) p2(1920,20)
  171.         Whether this works as expected depends on the minimum browser
  172.         fontsize set by the user (content may overflow .header when set >6px)
  173.  
  174.         Tested defaults on W10:
  175.         Edge2020 overflows, while Chrome, Firefox and IE11 do not
  176.     */
  177.     font-size: calc(.875vmin + 3.2px)
  178. }
  179.  
  180. /**************************************/
  181. /* Google Material Component inspired */
  182. /**************************************/
  183. [icon] {
  184.     display: inline-flex;
  185.     justify-content: center; align-content: center; align-items: center;
  186.  
  187.     /* responsive sizes: p1(320,14) p2(1280,32) */
  188.     width      : calc(1.875vmin + 8px);
  189.     height     : calc(1.875vmin + 8px);
  190.     line-height: calc(1.875vmin + 8px);
  191.     font-size  : calc(1.875vmin + 8px);
  192.     /*
  193.         A bit overdone for just one icon, use inline SVG instead,
  194.         or create a small (subset) iconfont at https://icomoon.io
  195.  
  196.         icon list: https://material.io/resources/icons/?style=baseline
  197.     */
  198.     font-family: 'Material Icons';
  199.  
  200.     font-weight: normal; font-style: normal; letter-spacing: normal;
  201.     text-transform: none; white-space: nowrap; word-wrap: normal;
  202.  
  203.     opacity: 1; /* GMC uses <1 here and 1 on :hover */
  204.     font-feature-settings     : 'liga';
  205.     -moz-osx-font-smoothing   : grayscale;
  206. }
  207.  
  208. [clr="0"]       { background-color: Gainsboro; color: black }
  209. .header,        /* .header here saves coding html */
  210. [clr="1"]       { background-color: #fefefe; color: #1e1e1e }
  211. [clr="2"]       { background-color: #1e1e1e; color: Yellow ; font-weight: bolder }
  212. [clr="3"]       { background-color: #ffcc01; color: #1e1e1e; font-weight: bolder }
  213.  
  214. /*************************************/
  215. /* Generic [S]hading and [A]nimation */
  216. /*************************************/
  217. /* Element [S]hading custom properties */
  218. [S] {
  219.     /* defaults */
  220.     --clr-shadow: 0 0% 0%; /* HSL Black */
  221.  
  222.     /* GMD elevation 1dp, d - default + 0.1 */
  223.     --elevate-d: 0px 2px 1px -1px hsl(var(--clr-shadow) / .20),
  224.                  0px 1px 1px  0px hsl(var(--clr-shadow) / .14),
  225.                  0px 1px 3px  0px hsl(var(--clr-shadow) / .12);
  226.  
  227.     /* when hovered */
  228.     /* GMD elevation 3dp, h - hovered + 0.1 */
  229.     --elevate-h: 0px 3px 3px -2px hsl(var(--clr-shadow) / .20),
  230.                  0px 3px 4px  0px hsl(var(--clr-shadow) / .14),
  231.                  0px 1px 8px  0px hsl(var(--clr-shadow) / .12);
  232. }
  233.  
  234. [S="alt1" i] { /* some alternative shading, just testing */
  235.     --elevate-d: 0 2px 30px 0 hsl(var(--clr-shadow) / .25);
  236.     --elevate-h: 0 2px 50px 0 hsl(var(--clr-shadow) / .7);
  237. }
  238.  
  239. /* Element [A]nimation custom properties */
  240. [A] {
  241.     /* defaults */
  242.     --clr-inset: 0 0% 0% / 1; /* M3 theme default, black inset as outline (a11y) */
  243.  
  244.     --a-opa-d  : 1; /* opacity, set to < 1 if you want some default transparency */
  245.     --a-scale-d: 1; /* scale */
  246.  
  247.     /* when hovered */
  248.     --a-opa-h  : 1   ; /* opacity when animated hover */
  249.     --a-scale-h: 1.02; /* scale when animated and hovered, tweak to your needs */
  250.  
  251.     --outline-d: inset 0 0 0 2px transparent;           /* default */
  252.     --outline-h: inset 0 0 0 2px hsl(var(--clr-inset)); /* hover   */
  253. }
  254. /* [S]hading and [A]nimation defaults */
  255. [S]     { box-shadow: var(--elevate-d) }
  256. [A]     { opacity   : var(--a-opa-d)   }
  257. [S][A]  { box-shadow: var(--elevate-d), var(--outline-d) }
  258.  
  259. /* [A]nimation actions */
  260. [A]:hover { opacity: var(--a-opa-h); transform: scale(var(--a-scale-h)); text-shadow: none }
  261.  
  262. [A]:active:not(:focus), [A]:focus       { transform: scale(var(--a-scale-d)) }
  263.  
  264. /* [S]hading actions, but only when [A]nimated */
  265. [S][A]:hover                            { box-shadow: var(--elevate-h) }
  266. [S][A]:active:not(:focus), [S][A]:focus { box-shadow: var(--elevate-d), var(--outline-h) }
  267.  
  268. [S][A]:active:not(:focus) header,
  269. [S][A]:active:not(:focus) footer { 
  270.     box-shadow: var(--outline-h);
  271. } /* outline only, no shadow below/above */
  272.  
  273. /************************************************/
  274. /* HTML CURSOR OVERRIDES               [STABLE] */
  275. /************************************************/
  276. body  { cursor: default } /* plain arrow for everything, but */
  277. input { cursor: auto    } /* use HTML default cursor on inputs, unless: */
  278.  
  279. input:is([list="datalist"],
  280.          [type="button"  ],
  281.          [type="checkbox"],
  282.          [type="radio"   ],
  283.          [type="color"   ],
  284.          [type="range"   ],
  285.          [type="reset"   ],
  286.          [type="file"    ],
  287.          [type="submit"  ]),
  288. label:not([for=""]),
  289. a,button,select,keygen   { cursor: pointer }
  290. [contenteditable="true"] { cursor: text    }

That’s all! hopefully, you have successfully created a Responsive Organization Chart. If you have any questions or suggestions, feel free to comment below.

Similar Code Snippets:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

F5
X