galiminus / pinout.css

CSS rules to make super basic pinout diagrams

pinout.css

CSS rules to make super basic pinout diagrams.

Usage

Here's the pinout description of the 6507 processor shown above.

    <div class="po-chip">
      <div class="po-side-left">
        <div class="po-pin">
          <span class="po-pin-number">1</span>
          <span class="po-pin-label po-pin-in">RES</span>
        </div>

        <div class="po-pin">
          <span class="po-pin-number">2</span>
          <span class="po-pin-label">VSS</span>
        </div>

        <div class="po-pin">
          <span class="po-pin-number">3</span>
          <span class="po-pin-label po-pin-in">RDY</span>
        </div>

        <div class="po-pin">
          <span class="po-pin-number">4</span>
          <span class="po-pin-label">VCC</span>
        </div>

        <div class="po-pin">
          <span class="po-pin-number">5</span>
          <span class="po-pin-label po-pin-out">A0</span>
        </div>

        <div class="po-pin">
          <span class="po-pin-number">6</span>
          <span class="po-pin-label po-pin-out">A1</span>
        </div>

        <div class="po-pin">
          <span class="po-pin-number">7</span>
          <span class="po-pin-label po-pin-out">A2</span>
        </div>

        <div class="po-pin">
          <span class="po-pin-number">8</span>
          <span class="po-pin-label po-pin-out">A3</span>
        </div>

        <div class="po-pin">
          <span class="po-pin-number">9</span>
          <span class="po-pin-label po-pin-out">A4</span>
        </div>

        <div class="po-pin">
          <span class="po-pin-number">10</span>
          <span class="po-pin-label po-pin-out">A5</span>
        </div>

        <div class="po-pin">
          <span class="po-pin-number">11</span>
          <span class="po-pin-label po-pin-out">A6</span>
        </div>

        <div class="po-pin">
          <span class="po-pin-number">12</span>
          <span class="po-pin-label po-pin-out">A7</span>
        </div>

        <div class="po-pin">
          <span class="po-pin-number">13</span>
          <span class="po-pin-label po-pin-out">A8</span>
        </div>

        <div class="po-pin">
          <span class="po-pin-number">14</span>
          <span class="po-pin-label po-pin-out">A9</span>
        </div>
      </div>

      <div class="po-chip-body">
        <div class="po-chip-notch"></div>
        <span class="po-chip-name">6507</span>
      </div>

      <div class="po-side-right">
        <div class="po-pin">
          <span class="po-pin-number">28</span>
          <span class="po-pin-label po-pin-out">Ф2</span>
        </div>

        <div class="po-pin">
          <span class="po-pin-number">27</span>
          <span class="po-pin-label po-pin-in">Ф0</span>
        </div>

        <div class="po-pin">
          <span class="po-pin-number">26</span>
          <span class="po-pin-label po-pin-out">R/W</span>
        </div>

        <div class="po-pin">
          <span class="po-pin-number">25</span>
          <span class="po-pin-label po-pin-inout">D0</span>
        </div>

        <div class="po-pin">
          <span class="po-pin-number">24</span>
          <span class="po-pin-label po-pin-inout">D1</span>
        </div>

        <div class="po-pin">
          <span class="po-pin-number">23</span>
          <span class="po-pin-label po-pin-inout">D2</span>
        </div>

        <div class="po-pin">
          <span class="po-pin-number">22</span>
          <span class="po-pin-label po-pin-inout">D3</span>
        </div>

        <div class="po-pin">
          <span class="po-pin-number">21</span>
          <span class="po-pin-label po-pin-inout">D4</span>
        </div>

        <div class="po-pin">
          <span class="po-pin-number">20</span>
          <span class="po-pin-label po-pin-inout">D5</span>
        </div>

        <div class="po-pin">
          <span class="po-pin-number">19</span>
          <span class="po-pin-label po-pin-inout">D6</span>
        </div>

        <div class="po-pin">
          <span class="po-pin-number">18</span>
          <span class="po-pin-label po-pin-inout">D7</span>
        </div>

        <div class="po-pin">
          <span class="po-pin-number">17</span>
          <span class="po-pin-label po-pin-out">A12</span>
        </div>

        <div class="po-pin">
          <span class="po-pin-number">16</span>
          <span class="po-pin-label po-pin-out">A11</span>
        </div>

        <div class="po-pin">
          <span class="po-pin-number">15</span>
          <span class="po-pin-label po-pin-out">A10</span>
        </div>
      </div>
    </div>