Dev Networks Flairs

To start using Dev Networks Flairs you must include some resources on your web page. The resources that will be included depend on how you want your flair to looks.

The only you need is to include the script of Dev Networks Flairs:

For a full use of theme, with Material Design colors, you must include the following styles:

And then, you need to include the themes's templates through the following file:

You may experience some issues because of the cache of JSDelivr CDN, in that case you can reference the files directly from GitHub:

If you decide to use our themes, after include the necessary files (styles and scripts) you only need to write a wrapper with the convenient data of your developer network user, it means your GitHub username or your Stack Overflow user id.

Attributes of the wrapper

Attribute	Description
data-color	It sets the name of the color to fill the flair. See the Material Design color scheme table below.
data-flair	It sets the developer network over which will be retrieve the information. The value can be set to "github" or "stackoverflow".
data-user	It sets the username of GitHub or the user id of Stack Overflow, to retrieve the information.
data-theme	It sets the theme (structure of html) to use. The value can be "githubFlair", "githubCards", "stackofFlair" or "stackofCards".

Material Design color scheme

black	white	red	pink	purple	deepPurple	indigo
blue	lightBlue	cyan	teal	green	lightGreen	lime
yellow	amber	orange	deepOrange	brown	grey	blueGrey

GitHub examples

<div class="network-flair rounded flair github" data-color="indigo" data-flair="github" data-user="Microsoft" data-theme="githubFlair"> </div> <div class="network-flair rounded cards github" data-color="indigo" data-flair="github" data-user="Microsoft" data-theme="githubCards"> </div>

Stack Overflow examples

<div class="network-flair rounded flair stackoverflow" data-color="indigo" data-flair="stackoverflow" data-user="6107280" data-theme="stackofFlair"> </div> <div class="network-flair rounded cards stackoverflow" data-color="indigo" data-flair="stackoverflow" data-user="6107280" data-theme="stackofCards"> </div>

Themes options

The themes have some classes that allows you to customize a little the flair.

Class	Description
rounded	It sets a border radius of 4 píxels (4px) to the box of the element. In the above examples, this class was used to rounded the flair boxes.
circle	It sets a border radius of 50 percent (50%) to the box of the element, that means the box will become in a circular element. In the above examples, this class was used to make circular the image (avatar) of the user. Remove this class to make the image cuadratic.
flair-text-light	It sets the white color for all text and the corner. It allows to force using the white color for text over any background color.
flair-text	It sets the black color for all text and the corner. It allows to force using the black color for text over any background color.

Yuo can choose another theme from the available list in Theme List.

If you are not pleased with available themes, you can design your own and share with the community.
Follow this guidelines to achieve that.

If you are not comfortable with the themes provided by Dev Networks Flairs, you can build your own theme and choose where to put each field retrieved from the network API.

To start, you must to write a wrapper like above examples, and then write inside it the structure you want.

Keep in mind that to put each specific data of your developer network profile inside an HTML tag, you must to add a new attribute "data-property" and as the value the field of your profile.

GitHub fields

Field	Description
username	Username of the GitHub website.
fullname	Your full name.
avatar	Your GitHub picture/avatar url.
url	Url of your GitHub dashboard/profile.
company	Your current employer.
location	Your current job location.
website	Your personal website/portfolio.
repos	Number of repositories that you have in GitHub.
forks	Number of fork repositories that you have in GitHub.
sources	Number of source repositories (not fork) that you have in GitHub.
gists	Number of public gists that you have in GitHub Gist.
followers	Number of followers that you have in GitHub.
hireable	A boolean that say if you are currently looking for a job or open to job offers.
bio	An extract of your bio in GitHub.

Stack Overflow fields

Field	Description
userid	The id of your Stack Overflow user.
fullname	Your full name.
avatar	Your Stack Overflow picture/avatar url.
url	Url of your Stack Overflow dashboard/profile.
location	Your current job location.
website	Your personal website/portfolio.
reputation	Your current reputation on Stack Overflow.
answers	Number of answers in Stack Overflow.
questions	Number of questions in Stack Overflow.
badge-bronze	Number of bronze badges in Stack Overflow.
badge-silver	Number of silver badges in Stack Overflow.
badge-gold	Number of gold badges in Stack Overflow.

Link attribute

If you want to set a link (<a>), you can use the "data-link" attribute to get the desired result.

Value	Description
link	It sets the value of the href attribute with the url and sets the link text empty. It is useful when you want a link without text, just an icon for example.
text	It sets the value of the href and the link text with the url. It is more convenient to use when you want to show a link with the url itself.
src	It sets the value of the src attribute with the url and sets the link text empty. It is useful when you want to show an image, picture or avatar.
profile field	It sets the value of the href attribute with the url provided by an specific field and don't touch the link text. It is useful when you want to show a field data as a link, with the url of another field. An example could be the GitHub username linked to the real GitHub profile.

Custom theme example

<div class="network-flair rounded flair github" data-color="indigo" data-flair="github" data-user="Microsoft"> Blog / Website </div>

If you want to contribute with new features, code optimization or simply offer a new theme template; just follow instructions in CONTRIBUTING.md