├── README.md ├── index.html ├── process_diagram.css └── screenshot.png /README.md: -------------------------------------------------------------------------------- 1 | # A Process Diagram with pure CSS & HTML 2 | 3 | This gives a basic styling for a diagram of processes. It’s a proof-of-concept of what can be realised just with CSS & HTML. 4 | 5 | ![Screenshot](screenshot.png) 6 | 7 | To get a clue of the semantics, read further and take a look into the [`index.html`](http://github.com/arolle/css_process_diagram/index.html) source. 8 | 9 | Tested to work with Chrome 24, Firefox 16 and Opera 12 and above. 10 | 11 | --- 12 | 13 | Each node in the graph is wrapped into a `div` tag, as follows: 14 | 15 |
16 | 17 |
18 | 19 | If there are two or more items that should be displayed parallel in the graph these shall be put inside a `ul`-list. For parallel process-lines the ordering is unimportant. Thats why to take a `ul` in that case. 20 | 21 | 26 | 27 | As third type for structuring we have `ol`s. These will be displayed one after another. So ordering is important. 28 | 29 |
    30 |
    2. 31 | 32 |
33 | 34 | The Graph should always be wrapped in a `ol` with class `process_diagram`: 35 | 36 |
    37 |
    2. 38 | 39 |
-------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | process diagram 6 | 7 | 8 | 9 |
    10 |
  1. All this magic is pure CSS & HTML
    2. 11 |
  2. 12 | 47 |
    3. 48 |
  3. 49 | 56 |
    4. 57 |
  4. Node 3
    5. 58 |
  5. Finally see the sources github.com/arolle/css_process_diagram
    6. 59 |
60 | 61 | 62 | -------------------------------------------------------------------------------- /process_diagram.css: -------------------------------------------------------------------------------- 1 | /* All parameters */ 2 | :root { 3 | --linethick: 3px; 4 | --linewidth: 1.8em; 5 | } 6 | 7 | /* node style */ 8 | .process_diagram li > div { background-color:#eef; color:#666; border-style:solid; border-color:#900; text-align:left; } 9 | 10 | /* connecting lines between nodes */ 11 | .process_diagram li:before, 12 | .process_diagram li:after, 13 | .process_diagram ul:before, 14 | .process_diagram ul:after, 15 | .process_diagram div:before, 16 | .process_diagram div:after {border-style:solid; border-color:#000;} 17 | 18 | /* debug connecting lines * / 19 | .process_diagram div:before, 20 | .process_diagram div:after {border-color:green;} 21 | .process_diagram ul:before, 22 | .process_diagram ul:after {border-color:red;} 23 | /**/ 24 | 25 | /************************************************************/ 26 | 27 | /* positioning for the diagram */ 28 | .process_diagram, 29 | .process_diagram ol, 30 | .process_diagram ul, 31 | .process_diagram li {margin:0 auto; padding:0; display:block; list-style:none; text-align:center; vertical-align:middle;} 32 | 33 | .process_diagram li {position:relative;} 34 | 35 | .process_diagram, 36 | .process_diagram ol {display:table; width:100%; border-collapse:collapse; } 37 | 38 | .process_diagram > li, 39 | .process_diagram ol > li {display:table-cell; } 40 | 41 | .process_diagram > li, 42 | .process_diagram ol > li, 43 | .process_diagram ul > li {padding:.5em 0} 44 | 45 | /* a dash before and behind all uls */ 46 | .process_diagram ul {position:relative; padding:0 var(--linewidth);} 47 | .process_diagram ul:before, 48 | .process_diagram ul:after {position:absolute; content:""; top:50%; width: var(--linewidth); display:block; border-width:var(--linethick) 0 0; } 49 | .process_diagram ul:before {left:0;} 50 | .process_diagram ul:after {right:0;} 51 | 52 | /* put connecting vertical lines */ 53 | .process_diagram ul > li:after, 54 | .process_diagram ul > li:before {position:absolute; content:""; top:0; bottom:0; width:var(--linewidth); height:100%; display:block;} 55 | .process_diagram ul > li:before {left:0; border-width:0 0 0 var(--linethick);} 56 | .process_diagram ul > li:after {right:0; border-width:0 var(--linethick) 0 0;} 57 | 58 | /* correct length and position of dashes for first and last li-item in ul */ 59 | .process_diagram ul > li:first-child:before, 60 | .process_diagram ul > li:first-child:after {top:50%; bottom:auto; height:50%; } 61 | .process_diagram ul > li:last-child:before, 62 | .process_diagram ul > li:last-child:after {top:0; bottom:auto; height:50%;} 63 | .process_diagram ul > li:first-child:last-child:before, 64 | .process_diagram ul > li:first-child:last-child:after {top:0; bottom:auto; height:50%;} 65 | 66 | /* put left and right dashes */ 67 | .process_diagram li > div {position:relative; margin:0 var(--linewidth); padding: 1em; border-width:var(--linethick); } 68 | .process_diagram li > div:before, 69 | .process_diagram li > div:after {content:""; top:50%; width:var(--linewidth); position:absolute; border-width:var(--linethick) 0 0; height:50%;} 70 | .process_diagram li > div:after {right: calc(0em - var(--linewidth)); margin-right: calc(0px - var(--linethick));} 71 | .process_diagram li > div:before {left: calc(0em - var(--linewidth)); margin-left: calc(0px - var(--linethick));} 72 | .process_diagram li:last-child > div:after, 73 | .process_diagram li:last-child > div:before {top:0; border-width: 0 0 var(--linethick);} 74 | 75 | /* remove dash for the very first/last nodes keeping margin and padding */ 76 | .process_diagram > li:first-child > div:before, 77 | .process_diagram > li:first-child > ul:before, 78 | .process_diagram > li:first-child > ul > li:before, 79 | .process_diagram > li:first-child > ul > li > div:first-child:before, 80 | .process_diagram > li:first-child > ul > li > ol > li:first-child > div:before, 81 | .process_diagram > li:last-child > div:after, 82 | .process_diagram > li:last-child > ul:after {border:0;} 83 | 84 | /* remove double dashes */ 85 | ol.process_diagram > li > div:after, 86 | .process_diagram ol > li > div:after, 87 | ol.process_diagram > li > ul:after, 88 | .process_diagram ol > li > ul:after {display:none} 89 | ol.process_diagram > li > div, 90 | .process_diagram ol > li > div {margin-right: 0;} 91 | ol.process_diagram > li > ul, 92 | .process_diagram ol > li > ul {padding-right: 0;} 93 | 94 | /* last dashes are not double and need to be recovered */ 95 | ol.process_diagram > li:last-child > div:after, 96 | .process_diagram ol > li:last-child > div:after, 97 | ol.process_diagram > li:last-child > ul:after, 98 | .process_diagram ol > li:last-child > ul:after {display:block;} 99 | ol.process_diagram > li:last-child > div, 100 | .process_diagram ol > li:last-child > div {margin-right: var(--linewidth);} 101 | ol.process_diagram > li:last-child > ul, 102 | .process_diagram ol > li:last-child > ul {padding-right: var(--linewidth); } 103 | 104 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arolle/css_process_diagram/16bf50435fb2782619e7e4d25429242f5ed0e0ff/screenshot.png --------------------------------------------------------------------------------