|
<div class="content"> |
|
<h1>Responsive Organization Chart (updated)</h1> |
|
<figure class="org-chart cf"> |
|
<div class="board "> |
|
<ul class="columnThree"> |
|
<li> |
|
<span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AA |
|
</span> |
|
</li> |
|
<li> |
|
<span > |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AA |
|
</span> |
|
</li> |
|
<li> |
|
<span > |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AA |
|
</span> |
|
</li> |
|
</ul> |
|
<ul class="columnOne"> |
|
<li> |
|
<span class="lvl-b"> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AA |
|
</span> |
|
</li> |
|
</ul> |
|
<ul class="columnTwo"> |
|
<li> |
|
<span > |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AA |
|
</span> |
|
</li> |
|
<li> |
|
<span > |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AA |
|
</span> |
|
</li> |
|
</ul> |
|
<ul class="columnTwo"> |
|
<li> |
|
<span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AA |
|
</span> |
|
</li> |
|
<li> |
|
<span > |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AA |
|
</span> |
|
</li> |
|
</ul> |
|
</div> |
|
<ul class="departments "> |
|
<li class="department "> |
|
<span class="lvl-b"> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AB |
|
</span> |
|
<ul class="sections"> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AA |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>BB |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>BB |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>BB |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>BB |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>BB |
|
</span> |
|
</li> |
|
</ul> |
|
</li> |
|
<li class="department "> |
|
<span class="lvl-b"> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AB |
|
</span> |
|
<ul class="sections"> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>CC |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AA |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>CC |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>CC |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>CC |
|
</span> |
|
</li> |
|
</ul> |
|
</li> |
|
<li class="department "> |
|
<span class="lvl-b"> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AB |
|
</span> |
|
<ul class="sections"> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AA |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>BB |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>BB |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>BB |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>BB |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>BB |
|
</span> |
|
</li> |
|
</ul> |
|
</li> |
|
<li class="department central"> |
|
<span class="lvl-b"> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AB |
|
</span> |
|
<ul class="sections"> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AA |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>CC |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>CC |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>CC |
|
</span> |
|
</li> |
|
</ul> |
|
</li> |
|
<li class="department "> |
|
<span class="lvl-b"> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AB |
|
</span> |
|
<ul class="sections"> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AA |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>BB |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>BB |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>BB |
|
</span> |
|
</li> |
|
</ul> |
|
</li> |
|
<li class="department "> |
|
<span class="lvl-b"> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AB |
|
</span> |
|
<ul class="sections"> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>CC |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AA |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>CC |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>CC |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>CC |
|
</span> |
|
</li> |
|
</ul> |
|
</li> |
|
<li class="department "> |
|
<span class="lvl-b"> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AB |
|
</span> |
|
<ul class="sections"> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AA |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>BB |
|
</span> |
|
</li> |
|
</ul> |
|
</li> |
|
</ul> |
|
</figure> |
|
<p> |
|
This is an updated version of "Responsive Organization Chart" from <a href="http://codepen.io/siiron/">Ronny Siikaluoma</a>'s Pen <a href="http://codepen.io/siiron/pen/aLkdE/">Responsive Organization Chart</a>. |
|
</p> |
|
<h2>Improvments:</h2> |
|
<ul> |
|
<li>media queries are separated in one place only and not all over the css (more control on it)</li> |
|
<li>3 new style of line (a 3 block column line; a 2 block column block line; a single block line)</li> |
|
<li>use SCSS to maange easly varaibles and breakepoint</li> |
|
<li>separated the list of departments from board area (more control and less ul insie ul inside ul inside ul)</li> |
|
<li> |
|
7 column on the department area |
|
</li> |
|
</ul> |
|
<h1>Responsive Example <h1> |
|
<div class="responsive-content"> |
|
<figure class="org-chart cf"> |
|
<div class="board "> |
|
<ul class="columnThree"> |
|
<li> |
|
<span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AA |
|
</span> |
|
</li> |
|
<li> |
|
<span > |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AA |
|
</span> |
|
</li> |
|
<li> |
|
<span > |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AA |
|
</span> |
|
</li> |
|
</ul> |
|
<ul class="columnOne"> |
|
<li> |
|
<span class="lvl-b"> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AA |
|
</span> |
|
</li> |
|
</ul> |
|
<ul class="columnTwo"> |
|
<li> |
|
<span > |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AA |
|
</span> |
|
</li> |
|
<li> |
|
<span > |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AA |
|
</span> |
|
</li> |
|
</ul> |
|
<ul class="columnTwo"> |
|
<li> |
|
<span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AA |
|
</span> |
|
</li> |
|
<li> |
|
<span > |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AA |
|
</span> |
|
</li> |
|
</ul> |
|
</div> |
|
<ul class="departments "> |
|
<li class="department "> |
|
<span class="lvl-b"> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AB |
|
</span> |
|
<ul class="sections"> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AA |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>BB |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>BB |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>BB |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>BB |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>BB |
|
</span> |
|
</li> |
|
</ul> |
|
</li> |
|
<li class="department "> |
|
<span class="lvl-b"> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AB |
|
</span> |
|
<ul class="sections"> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>CC |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AA |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>CC |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>CC |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>CC |
|
</span> |
|
</li> |
|
</ul> |
|
</li> |
|
<li class="department "> |
|
<span class="lvl-b"> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AB |
|
</span> |
|
<ul class="sections"> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AA |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>BB |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>BB |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>BB |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>BB |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>BB |
|
</span> |
|
</li> |
|
</ul> |
|
</li> |
|
<li class="department central"> |
|
<span class="lvl-b"> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AB |
|
</span> |
|
<ul class="sections"> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AA |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>CC |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>CC |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>CC |
|
</span> |
|
</li> |
|
</ul> |
|
</li> |
|
<li class="department "> |
|
<span class="lvl-b"> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AB |
|
</span> |
|
<ul class="sections"> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AA |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>BB |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>BB |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>BB |
|
</span> |
|
</li> |
|
</ul> |
|
</li> |
|
<li class="department "> |
|
<span class="lvl-b"> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AB |
|
</span> |
|
<ul class="sections"> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>CC |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AA |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>CC |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>CC |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>CC |
|
</span> |
|
</li> |
|
</ul> |
|
</li> |
|
<li class="department "> |
|
<span class="lvl-b"> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AB |
|
</span> |
|
<ul class="sections"> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>AA |
|
</span> |
|
</li> |
|
<li class="section"> <span> |
|
<strong>Position Name</strong> |
|
<br>Name Surname |
|
<br>BB |
|
</span> |
|
</li> |
|
</ul> |
|
</li> |
|
</ul> |
|
</figure> |
|
</div> |
|
</div> |