CSS Skills Diagram

Key features:

Live data demo

This demo is powered with a tiny Javascript that retrieves data from coderbits.com profile API and pushes it into the diagram. See it in action:

Tip: diagram will look different every time you submit the form

Usage

  1. Download and include skills-diagram.css
    <link rel="stylesheet"
        href="/css/skills-diagram.css" />
  2. Download and include skills-diagram.coderbits.js (requires jQuery)
    <script src="/js/skills-diagram.coderbits.js"></script>
  3. Wherever you wish to show the diagram widget, include following HTML:
    <dl class="skills-diagram" data-cb-username="USERNAME" data-cb-subject="SUBJECT"></dl>
    
    Replace username and subject accordingly. Subject is one of following at the moment of writing (refer to API to see if there are more): skills, languages, environments, frameworks, tools, interests, traits, areas

Static Demo

And this is just a simple static HTML/CSS example based on hard-coded data.

UNIX
5
Ruby
10
Java
3
PHP
8
RegEx
4
HTML5
6
JavaScript
7
CSS
9
C#
2

Usage

  1. Download and include skills-diagram.css
    <link rel="stylesheet"
        href="/css/skills-diagram.css" />
  2. Wherever you wish to show the diagram, include HTML similar to following:
    <dl class="skills-diagram">
      
    UNIX
    5
    Ruby
    10
    Java
    3
    PHP
    8
    RegEx
    4
    HTML5
    6
    JavaScript
    7
    CSS
    9
    C#
    2
    </dl>

Thanks to

TODO

This page is constantly updated and is directly connected to Github repo. Any contribution is appreciated.

Tweet
Fork me on GitHub Resize me!