Day 16 of #100DaysOfCode: Design a Layout for Articles with Bootstrap Card

#100daysofcode #bootstrap #design #webdev

Introduction

For card style's design, we can use CSS Grid as I mentioned on Day 1.

More detail: https://dev.to/jenhsuan/day-1-of-100daysofcode-design-a-layout-for-shopping-cart-template-with-css-grid-and-media-query-2hfn

However, we have to use Media query to complete the layout for the mobile version. One of advantages for using Bootstrap Card is that we don't have to write Media query additionally.

Implementations

Link
https://jenhsuan.github.io/ALayman/articles.html
Screen shot for the desktop version
Screen shot for the mobile version

Code

HTML

...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="views/js/articles.js" ></script>
...
<div class="container">
    <div id="medium" class="row item"></div>
</div>

JavaScript (append child nodes dynamically by AJAX)

...
function appendArticleChild(ele) {
    var div = document.createElement('div');
    div.className = 'col-md-6 col-xs-12'

    var card = document.createElement('div');
    card.className = 'card'

    var cardBody = document.createElement('div');
    cardBody.className = 'card-body'

    var cardTitle = document.createElement('h1');
    cardTitle.className = 'card-title'

    var cardBlock = document.createElement('div');
    cardBlock.className = 'card-block'

    cardBody.appendChild(cardTitle)
    cardBody.appendChild(cardBlock)
    card.appendChild(cardBody)
    div.appendChild(card)

}