Github Many-faced Cards - most efficient implementation
Example of the "more efficient" integration of a Github Many-faced Card.
by tsucres
HTML
<link rel="stylesheet" href="https://cdn.rawgit.com/tsucres/GithubManyfacedCards/master/dist/themes/gh_recommendation/gh_recommendation.min.css">
<!-- 1) Don't forget to put the css file in the head (checkout out the ressources of this jsFiddle -->
<!-- ... -->
<!-- 2) Place your card(s) -->
<!-- 2.1) fill the "data-gmc-repo" attribute -->
<div data-gmc-repo="tsucres/GithubManyfacedCards">
<!-- 2.2) Paste the markup of the skin from the file <theme_name>.html -->
<!-- This one comes from https://github.com/tsucres/GithubManyfacedCards/blob/master/dist/themes/gh_recommendation/gh_recommendation.html -->
<div class="gh p-rel">
<div class="only-if-loading full-absolute p-1">
<div class="d-flex">
<div class="mr-3">
<span class="d-block content-placeholder" style="width:48px;height:48px;"> </span>
</div>
<div style="width: 100%;">
<div class="d-inline-block mb-1">
<span class="d-block content-placeholder" style="width:180px;width:15em;height:22px;"> </span>
</div>
<div class="mt-2">
<span class="content-placeholder mb-1 d-block" style="width:85%;height:13px;"> </span>
<span class="content-placeholder mb-1 d-block" style="width:45%;height:13px;"> </span>
</div>
<p></p>
<div class="mb-2">
<span class="d-inline-block">
<span class="content-placeholder mr-2" style="width:60px;height:24px;"> </span>
</span>
<span class="d-inline-block">
<span class="content-placeholder mr-2" style="width:90px;height:24px;"> </span>
</span>
<span class="d-inline-block">
<span class="content-placeholder mr-2" style="width:70px;height:24px;"> </span>
</span>
<span class="d-inline-block">
<span class="content-placeholder mr-2" style="width:65px;height:24px;"> </span>
...