As we recall from our Bootstrap class, Bootstrap is a framework for building responsive, mobile-first web sites using HTML, CSS, and JavaScript. It has predefined CSS codes, design templates, components and utilities for typography, forms, navigation, and more. Once Bootstrap was released as an open source project, many developers adopted it into their own development process.
But some developers we unsatisfied with Bootstrap, for many different reasons, so they set out to develop their own architectures. Bulma is one of the results, of the newer architectures. Like Bootstrap, Bulma is fairly simple to use and is well documented. One of the benefits of Bulma is that it is a standalone platform, and you no longer need external modules, such as jQuery and Popper.
We had previously created our PingPong ScoreKeeper project in which we used CSS entirely, for the styling, that was modeled from an image of the class project.
In this version of our PingPong ScoreKeeper project, (shown below), we are going to using Bulma for our project styling.
Install Bulma
The first thing we need to do in our project, is to install the Bulma Framework. The complete installation process can be found here, but essentially, like Bootstrap you can either install Bulma into your working project folder and link to it in your HTML, or you can link to the online version using either a CSS @import or an HTML Link.
For this project we're going to be using the external HTML Link which goes in the <head> section of our webpage.
*note: this link actually installed a "DARK" version of Bulma, which conflicts with the "Bodingles" layout. So under alternative installations, there is a non-dark version which I copied and pasted into a blank css file I named bulma.css.
So my link in the <head> section is:
<link rel="stylesheet" href="bulma.css">
Create a Card
Bulma works with columns to maintain it's flex based responsiveness. Building a columns layout with Bulma is very simple:
1). Add a columns container
2). Add as many column elements as you want
Unless you specify otherwise, each column will have an equal width, no matter the number of columns.
So we need to create a "container" for our web app (widget) to reside in. In Bulma, this "container" is called a card and this card will contain our project.
There are several "pre-made"templates we can work with, so we are going to go to the Bulma website and look under Components/Card to find one that will fit our needs. The link here is for the card we will be using in this project. Just copy the HTML code and paste it into our project HTML page, which results in the following code:
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item">Save</a>
<a href="#" class="card-footer-item">Edit</a>
<a href="#" class="card-footer-item">Delete</a>
</footer>
</div>
</div>
So, we see that we have a pre-made card as defined by the Bulma card class, created within the 2nd<div> element. Also notice that Bulma is structured similarly to Bootstrap in that it uses pre-defined class names to control the "look and feel" of the page.
And when viewing our project below, the first thing we notice is that the card is 100% wide, so it takes up the entire width of the page, which we don't want. To fix that, we need to change the main column width. Remember that the main column is a single column that contains our project, as seen in the 1st<div> element.
When you start sizing columns, you can either effect a single column, or multiple columns. More info on column sizing can be found here. We are going to be changing the size of a "single" column, our main column which contains our card.
Adding Our Data
The next thing we need to do is to add our data from our PingPong ScoreKeeper app, into our Bulma styling.
First we'll add the image for our project. We are going to add a new <div> between the <div class="card"> and <header class="card-header"> sections. This will be a new <div> with the class="card-image", like so:
<div class="card">
<div class="card-image">
<figure class="image is-2by1">
<img src-"pingPong.png" alt="Ping Pong Paddle">
</figure
</div>
</div>
- <div class="card-image"></div> // defines this div to contain a card image
- <figure class="image is-2by1"> // defines this figure as an image, and sets the display size
After the image, we have a <header> with a class called card-header. Inside this <header>, we have a <p> element with the class "card-header-title", which currently has the text "Component". This is where our "App Title" will go so we're going to be replacing "Component" with "PingPong ScoreKeeper", like so:
Next we're going to add the numbers that display the Player 1 and Player 2 scores. This will go in the <div class="content"> section which is currently occupied with some lorem ipsum text, an anchor tag <a>, and a dateTime element. We are going to be replacing this with:
<p class="title is-1">
<span id="p1Display">0</span>
<span> - </span>
<span id="p2Display">0</span>
</p>
<p class="subtitle">Use the buttons below to increase each players score.</p>
And finally, we need to add the Player Buttons to the bottom of the Bulma template. If you look at the template code above, you will see a footer section with three anchor <a> elements. We will replace these with our Button Code. Now Bulma has a class name for buttons and also for their colors. Refer to the button documentation, here. So the code will be:
<footer class="card-footer">
<button id="p1Button" class="button card-footer-item is-primary">+1 Player One</button>
Use the buttons below to increase each players score.
Playing to:
How to Play
To play the game, you are to assume that two people are playing Ping Pong. And as each player wins a round (determined by you), you award one point to that winner by clicking either the Green or Blue box. You can also Reset the game by pressing the Red box. You also determine what the Winning score is by setting the Playing To: amount.
