CSS Skills Diagram

Key features:

• Mobile-ready
• Core is done in pure CSS
• Pieces are not tightly coupled
• Can easily work with external data sources

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

• ExecuteBook for being so inspirational! I did this experiment right after reading it.
• Scott Smith for great coderbits API and for the idea to connect this diagram to it
• Darek Nędza for intensive testing
• Vernon Adams for lovely font "Oswald" I'm using on this page
• subtlepatterns.com for lovely texture I'm using here for background.
• ..and everyone who was giving their feedback. Thank you all!

TODO

• Add caption on hover
• Support multi lines
• Drop jQuery from skills-diagram.coderbits.js
• Find a way to render relatively small values

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