A. ShenoyLearning Bulmahttps://doi.org/10.1007/978-1-4842-5482-0_2

2. Grids and Utility Classes

Aravind Shenoy¹

(1)

Mumbai, Maharashtra, India

Bulma is an intuitive framework adhering to the mobile-first approach. In this well-connected era, people prefer mobile web sites compared with traditional desktop web sites and other media. Moreover, a mobile-first paradigm accounts for better semantics, simplified code structure, and a superlative user experience.

Bulma is genetically tailored for the mobile platform. It includes simple modules and components; using them, your web site can be tweaked for desktop and widescreen display too. Bulma follows a minimalistic approach, as the focus is completely on interactive web site design and rapid development

In this chapter, we will learn about grids and utility classes in Bulma including columns, offsets, gaps, and helper classes that render ultimate flexibility and simplicity for creating immersive web sites.

Note: In this book, we will be using Notepad++ as the default editor for all the code examples. Sample content from www.catipsum.com is used for the code examples in the book.

The best way to learn web design is to start coding and learning it practically instead of wandering through loads of theory—so let’s start working with Bulma immediately.

Bulma Prototype/Starter Template

Like all CSS frameworks, Bulma has the basic prototype with the CDN and supported icon links that will be a part of all the code examples in this book.

Listing 2-1 depicts the Bulma starter template with all the necessary links and attributes.

<!DOCTYPE html>

<html>

<head>

<title>Hello Bulma!</title>

</head>

<body>

Welcome to Bulma- a simple and effective framework

</h1>

</div>

</section>

</body>

</html>

Listing 2-1

Bulma Starter Template

In Listing 2-1, you can see the various links and styles in the <head> section. In the <head> section, the charset meta tag is used to define an HTML document’s character set. The viewport meta tag helps web designers control the viewport (viewport is the portion of the web page visible to the users). While the width=device-width attribute sets the width of the page as per the device screen, initial-scale=1.0 instructs the device to display the page without any zooming.

Next, we define the following CDN link for incorporating Bulma’s ingrained CSS styles:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">

In addition, you can use the Font Awesome icons by using the following JavaScript link:

<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>

Finally, after placing all the required links in the <head> tag, we proceed with the <body> tags where we write the code and markup for the output. This basic starter template will be used for all the examples in the book. In the next section, we will learn about the Flexbox-powered grid layouts.

Flexbox-Powered Grid Layout

A grid layout helps achieve good readability, higher flexibility, and page cohesiveness. Bulma is a mobile-first framework, where you create a mobile web site and then tweak it for the desktop interface.

The 12-column grid layout in Bulma is easy to understand. By default, all the columns in Bulma will be stacked on top of each other, owing to its mobile-first paradigm. Thereon, by adding different classes and attributes, columns are defined in a default 12-column grid structure.

In Bulma, columns are defined as per their size and varying classes to create the grid. Bulma’s Flexbox-powered grid depicts excellent adaptability with the mobile platform. Even customizing it for tablet, desktop, and widescreen size-screens is quite simple; Bulma is purely CSS-based and, with minimal use of JavaScript, you can build responsive, interactive sites quickly and easily.

Well-equipped with a plethora of alternative styles, all you need to do is use is— or has— as the modifiers. Bulma columns are defined with a columns container with a <div> element using the columns class. Then, within this main columns container, you need to define columns with the column class. Listing 2-2 shows the prototype for constructing columns. It contains a columns container and four columns.

First column

</div>

Second column

</div>

Third column

</div>

Fourth column

</div>

Listing 2-2

Basic Column Structure

Listing 2-3 shows an example of how columns are displayed on a mobile and desktop screen.

<body>

cat ipsum dolor sit amet, eos, nostrum and aspernatur. Eum. Nisi corporis so velit. Rem vitae. Do irure. Sed. Corporis ab or in perspiciatis.cat ipsum dolor sit amet, eos, nostrum and aspernatur. Eum. Nisi corporis so velit. Rem vitae. Do irure. Sed. Corporis ab or in perspiciatis.

</div>

</div>

</div>

</div>

</body>

Listing 2-3

Grid-Based Columns

As seen in the preceding code, we define a container with the columns class. Inside it, we define four columns using the column class. Each column has the cat ipsum sample text. (In further code examples, the entire sample content from cat ipsum will not be shown; it will just be denoted by “cat ipsum dolor sit eos...”)

With each column, we also define the background color using the inline style CSS code.

The output of this code on a small screen or mobile phone is shown in Figure 2-1.

../images/485437_1_En_2_Chapter/485437_1_En_2_Fig1_HTML.jpg — Figure 2-1
Columns on a mobile site

On a desktop screen, the columns are next to each other as shown in Figure 2-2.

../images/485437_1_En_2_Chapter/485437_1_En_2_Fig2_HTML.jpg — Figure 2-2
Output on a desktop site

As you can see, the columns are responsive because they adapt well to the desktop size screen as well. You will also observe that if the width is not specified, all the columns automatically have equal width.

Adding Custom Width

Although the columns have equal width in a 12-column grid layout, the settings are not in stone. You can change the width by assigning custom values to the column size.

You can allocate a specific size to each column. There are several ways of doing it in Bulma. One way is using fractions in conjunction with the column class. The other way is using numbers to define the column size for a default 12-column grid.

Using Fractions

You can use fractions to denote the required size. Let’s look the following classes:

is-three-quarters
is-two-thirds
is-half
is-one-third
is-one-quarter
is-full
is-four-fifths
is-three-fifths
is-two-fifths
is-one-fifth

The is-three-quarters class will span 3/4th space of the default 12-column grid.
The is-one-quarter class will span 1/4th space of the default 12-column grid.
The is-full class will span the full width of the default 12-column grid .

Remember that the other columns whose size is not defined will automatically fill up the remaining space. As you can see in Listing 2-4, once we define the columns container, we assign the column is-one-fifth, column is-three-fifth, and column classes to the three columns, respectively.

cat ipsum dolor sit amet...

</div>

cat ipsum dolor sit amet...

</div>

cat ipsum dolor sit amet...

</div>

Listing 2-4

Defining Grid Column Size Using Fractions

Though some of you are familiar with basic CSS and HTML, the following link is included for learning basic CSS easily:

www.quackit.com

The preceding link will get you acquainted with intermediate-grade CSS and is also a good reference.

The one-fifth size spans 1/5th length of a 12-column grid and the three-fifth size spans 3/5th length of a 12-column grid. Since the third column size is not specified, it will automatically occupy the remaining space. The output of the code on a mobile phone, and then on a traditional desktop interface, are shown in the following screenshots.

Colored borders were also assigned to all the columns. You will see that in Figure 2-3 the columns are, by default, stacked on top of each other for a mobile screen, whereas on the desktop interface in Figure 2-4 the columns depict the size as defined in the code.

../images/485437_1_En_2_Chapter/485437_1_En_2_Fig3_HTML.jpg — Figure 2-3
Output on a mobile site

../images/485437_1_En_2_Chapter/485437_1_En_2_Fig4_HTML.jpg — Figure 2-4
Output on a desktop site

Using Plain Numbers

Owing to a 12-column layout, the following syntax can also be used for defining the size of the columns:

is-1
is-2
is-3
is-4
is-5
is-6
is-7
is-8
is-9
is-10
is-11
is-12

The is-1 class will span a length equivalent to 1 column in a default 12-column grid. Similarly, the is-9 class will span the equivalent of 9 columns for a 12-column horizontal column grid (Listing 2-5).

cat ipsum dolor sit amet.....

</div>

cat ipsum dolor sit amet.....

</div>

cat ipsum dolor sit amet.....

</div>

Listing 2-5

Defining Grid Column Size with Numbers

As per the preceding code, the column element with the is-2 class will occupy the space of 2 columns, whereas the column element with the is-7 will occupy the space of 7 columns. The element with the column class, which has not been allocated a specific size, will occupy the remaining space.

The output of the code on the mobile and desktop interfaces is shown in Figure 2-5 and Figure 2-6 respectively.

../images/485437_1_En_2_Chapter/485437_1_En_2_Fig5_HTML.jpg — Figure 2-5
Output on a mobile site

../images/485437_1_En_2_Chapter/485437_1_En_2_Fig6_HTML.jpg — Figure 2-6
Output on a desktop site

Observe that the elements are stacked on top of each other by default. However, if you want the mobile version to show the same number of columns as the desktop interface, you can add the is-mobile class to the columns container class (Listing 2-6).

cat ipsum dolor sit amet, eos, nostrum and aspernatur...

</div>

cat ipsum dolor sit amet, eos, nostrum and aspernatur...

</div>

cat ipsum dolor sit amet, eos, nostrum and aspernatu...

</div>

cat ipsum dolor sit amet, eos, nostrum and aspernatur...

<div>

</div>

Listing 2-6

Implementing Desktop-Like Column Structure for Mobile Screens

The is-mobile class facilitates the display of four columns, akin to the desktop interface. The output of the code on a mobile platform and desktop platform, respectively are displayed in Figure 2-7 and Figure 2-8 respectively.

../images/485437_1_En_2_Chapter/485437_1_En_2_Fig7_HTML.jpg — Figure 2-7
Output on a mobile site

../images/485437_1_En_2_Chapter/485437_1_En_2_Fig8_HTML.jpg — Figure 2-8
Output on a desktop site

Multiline Columns

In Bulma, by default, the number of columns defined within the columns container are placed in a single row. If you want to define the next row, you usually use another columns container and define columns for that container.

However, you can use more rows using a single columns container by adding an is-multiline class (Listing 2-7). That way, all the included columns within that container will occupy space as per the defined size. Once the space of a 12-column grid is occupied, the following columns will occupy the defined space in the next row.

cat ipsum dolor cat ipsum dolor sit amet, eos..

</div>

cat ipsum dolor cat ipsum dolor sit amet, eos...

</div>

cat ipsum dolor cat ipsum dolor sit amet, eos...

</div>

cat ipsum dolor cat ipsum dolor sit amet, eos...

</div>

Listing 2-7

Multiline Columns Component

In Figure 2-9, the columns occupy the defined width and shift to the second row after the 12-column width is surpassed.

../images/485437_1_En_2_Chapter/485437_1_En_2_Fig9_HTML.jpg — Figure 2-9
Multiline columns

The column is-2 and column is-10 classes for the first two elements enable it to occupy the first row. In the next row, you can see the remaining two elements with the column is-9 and column is-3 class.

Gaps

In Bulma, the default gap size on each side of a column is equal to 0.75rem. That effectively increases to 1.5rem between the two adjacent columns. Looking at the previous multiline output in Figure 2-9, you can see that there is a gap on either side of the columns. You can remove this gap by using the is-gapless class in conjunction with the columns container element (Listing 2-8).

cat ipsum dolor cat ipsum dolor sit amet, eos...

</div>

cat ipsum dolor cat ipsum dolor sit amet, eos...

</div>

cat ipsum dolor cat ipsum dolor sit amet, eos...

</div>

cat ipsum dolor cat ipsum dolor sit amet, eos...

</div>

Listing 2-8

Using Gapless Class to Remove Default Gaps

The output code is displayed in Figure 2-10.

../images/485437_1_En_2_Chapter/485437_1_En_2_Fig10_HTML.jpg — Figure 2-10
Gapless columns

On comparing Figure 2-10 with Figure 2-9 (both have the same content and code except for the implemented gapless class in the latter screenshot), there is no gap between the columns in Figure 2-10.

Nested Columns

Nesting of columns is quite easy in Bulma. Let’s see how it works with an example, as shown in Listing 2-9.

<p style="background-color: Gainsboro">cat ipsum dolor sit amet, eos, nostrum amet, sos em... </p>

<p style="background-color: Wheat"> cat ipsum dolor sit amet, eos, nostrum eoeamet, sos em... </p>

</div>

<p style="background-color: Gold"> cat ipsum dolor sit amet, eos, nostrum eoeamet, sos em... </p>

</div>

Listing 2-9

Nested Columns Code Structure

As you see in Listing 2-9, we use the columns container. Then, we define a main element with the column class inside the main container and give a background Gainsboro color to the element. Next, we define a second container inside the preceding column using the columns container class, and we also assign an is-mobile class so that it shows the nested output design even on the mobile screen interface.

Next, we define two columns within the secondary container and assign the Wheat and Gold colors to them.

The output of the code is shown in Figure 2-11. In The figure, you can see a gap between the nested secondary columns. This is a default feature and, if needed, can be removed using the is-gapless class for the secondary columns container, which includes the nested columns.

../images/485437_1_En_2_Chapter/485437_1_En_2_Fig11_HTML.jpg — Figure 2-11
Nested columns

The output with no gap between the nested columns is shown in Figure 2-12.

../images/485437_1_En_2_Chapter/485437_1_En_2_Fig12_HTML.jpg — Figure 2-12
Nested gapless columns

Offsets

Offsets in Bulma help you move columns to the right, meaning you can push them for more spacing. Let’s see a code example (Listing 2-10).

cat ipsum dolor sit amet, eos, nostrum so velit......

</div>

<a class="button is-success is-medium"> Submit </a>

<a class="button is-info is-medium"> Cancel </a>

</div>

Listing 2-10

Offset Classes Pushing Columns to the Right

The preceding code defines a main container using the columns container class. Next, we define an element inside that container using the column class. To the same element, we add the is-half class so that it spans half the length of the 12-column sized grid in the same row. We append an is-offset-one-quarter class to it so that it is offset by 1/4 of the default 12-column size grid, meaning the element is pushed to the right by an equivalent space of three columns.

(We can create another container below the main container and define colored buttons; we will get to that part later on.)

The output of the code is shown in Figure 2-13.

../images/485437_1_En_2_Chapter/485437_1_En_2_Fig13_HTML.jpg — Figure 2-13
Offset

In the preceding screenshot, you can see that the element is offset by a quarter of the space assigned to a 12-column grid size.

To show the effect of the is-pulled-left and is-pulled-right classes, the Submit and Cancel buttons were added, wherein the classes were applied to them, respectively. By using these classes, the Submit button is pulled to the left and the Cancel button to the right of the container, respectively, as shown in Figure 2-14. (Refer to the last <div> element in Listing 2-10 code for the Submit and Cancel buttons)

../images/485437_1_En_2_Chapter/485437_1_En_2_Fig14_HTML.jpg — Figure 2-14
Push and pull buttons

Now that we took a look at the grids layout and the varied alternatives to define columns, we will move to Bulma’s helper classes/utility classes in the next section.

Utility Classes

Utility classes are handy helpers that impact the styling of elements in the markup without using CSS style sheets. Since they are directly used in the markup, they speed up the work substantially. They are reusable and provide a high level of consistency in the code.

In this section, we will be discussing the color modifiers, responsive helpers, alignment helpers, and typography helpers baked into the Bulma framework.

Color Modifiers

Built-in color modifiers help render a certain color to the elements in Bulma.

Let’s examine the functionality with a code example, as shown in Listing 2-11.

<a class="button is-danger is-loading is-small"> Click Here </a>

<a class="button is-warning is-loading is-small"> Click Here </a>

<a class="button is-link is-small"> Click Here </a>

<a class="button is-success is-small is-outlined"> Click Here </a>

Listing 2-11

Bulma’s Contextual Colors

In the preceding code, we define four progress bars in this example; we create four <progress> elements and assign the progress class to each of them. Then we define the length parameters of the progress bars and the respective percentages w.r.t. of these progress bars. Under each progress bar, we add a button.

With each progress element we use a color helper class, namely is-danger class for the first progress bar as well as the button below it. Next, we assign the is-warning class to the second progress bar and the button below it.

Moving forward, we add different colors to the remaining <progress> elements and define colors and attributes to the buttons below it. (We have assigned a size class and the outlined shape as well as different status for the buttons, but we will learn about it further on in the book when we get to the buttons section.)

The output of the code is shown in Figure 2-15.

../images/485437_1_En_2_Chapter/485437_1_En_2_Fig15_HTML.jpg — Figure 2-15
Color helpers

Alignment, Responsive, and Typography Helpers

This section deals with alignment, responsive, and typography utility elements. Initially, we will take a look at the alignment helper, followed by a code example for responsive helpers, and finally deal with the typography helpers,

Alignment Helper

Bulma can assign columns vertically, if necessary. All you need to do is assign the is-vcentered class to the columns. Let’s see this in the code example in Listing 2-12.

<p>cat ipsum dolor cat ...</p>

</div>

<p>cat ipsum dolor cat ...</p>

</div>

Listing 2-12

Assigning Columns Vertically

In Listing 2-12 we assign the is-vcentered class to the columns container.

Then we create two column elements inside it and assign a different color to each of them.

The output of the code is seen in Figure 2-16.

../images/485437_1_En_2_Chapter/485437_1_En_2_Fig16_HTML.jpg — Figure 2-16
Vertical column alignment

Next, we discuss the responsive helpers.

Responsive Helpers

You can show/hide content depending on different-sized screens, namely, mobile phone, tablet, desktop, and widescreen.

In Listing 2-13 we use the is-hidden-mobile class for the first element, meaning the content will be shown in all devices apart from mobile screens. Then we insert an image within the first <div> element, using the image <img> tag.

Next, we create another <div> element and insert a different image; but here we use the is-hidden-tablet-only class, due to which the image can be seen on all screen-sizes except for tablet-sized screens. Moving forward, we create another <div> element and insert a different image; here we use the is-hidden-desktop class, meaning this image will be seen on a mobile as well as a tablet screen but will not be visible on desktop and larger than desktop screens. If we use the only attribute, it means that only on that viewport the content will not be visible. But if we do not use only, then all the screens pertaining to that viewport screen or larger will not be displayed (except in the case of the is-hidden-mobile class).

</div> <br>

</div> <br>

</div>

Listing 2-13

Responsive Helpers

The output of the code on mobile, tablet, and desktop screens, respectively, is shown in Figure 2-17.

../images/485437_1_En_2_Chapter/485437_1_En_2_Fig17_HTML.jpg — Figure 2-17
Content responsively displayed on the mobile, tablet, and desktop screens

Typography Helpers

Finally, let’s look at typography helpers. They generally help us change the size and color of the text on multiple viewports (as defined at the breakpoints), if needed. Let’s look at the code example in Listing 2-14.

Hello World!

</h1>

Bulma---> awesome, rockin' & intuitive

</p>

</div>

</section>

Listing 2-14

Different Typography Utilities

In Listing 2-14, we use a <section> element as the container. Following this, we create a heading <h1> element and assign the title class to it.

Then, we define the size and position of the element. Initially we assign the is-size-5-mobile and has-text-centered-mobile classes to the <h1> element. This means that the element will be of size 5 and the text will be centered on a mobile phone screen.

Next, we assign the is-size-3-tablet and has-text-right-tablet-only classes to the same <h1> element; this defines size 3 for the text on a tablet and the alignment of the text to the right side of the screen on a tablet screen only.

Moving forward, we assign the is-size-1-desktop and has-text-left-desktop classes to the same <h1> element. This effectively assigns size 1 to the text and aligns the text to the left on a desktop screen.

For more information related to text size, refer to Table 2-1.

Table 2-1

Font Size Chart

Class	Font-Size
is-size-1	3rem
is-size-2	2.5rem
is-size-3	2rem
is-size-4	1.5rem
is-size-5	1.25rem
is-size-6	1rem
is-size-7	0.75rem

Thereon, for the same <h1> element, the is-uppercase is applied, thereby rendering the text in uppercase text. Then, we finally apply the has-text-success class to the same element for it to display the respective green color.

Now that we have applied all these classes to the <h1> element, we will move on to create a paragraph <p> element. We apply the subtitle class followed by the is-italic class, which will apply the typography style and display the text in italics. Later on, we use the has-text-weight-light class to it for defining the font-weight. Finally, we use the is-capitalized and has-text-link classes, due to which the text is shown in capitalized case with the blue link color.

The output of the code on a mobile screen is shown in Figure 2-18.

../images/485437_1_En_2_Chapter/485437_1_En_2_Fig18_HTML.jpg — Figure 2-18
Content displayed on a mobile screen

From Figure 2-18, you can see that the Hello World! text is in uppercase and centered on the mobile screen. The size (size-5) and color are also displayed as defined in the code.

Similarly, when you see the same output on a tablet screen it is different, as shown in Figure 2-19.

../images/485437_1_En_2_Chapter/485437_1_En_2_Fig19_HTML.jpg — Figure 2-19
Content displayed on a tablet screen

As you can see from the preceding screenshot, the Hello World! text is aligned to the right on a tablet screen. You can also see the difference in the font-size (size-3) as defined in the code. In Figure 2-20, the Hello World! text is aligned to the left on a desktop screen. You can also see the bigger font-size (size-1) as defined in the code.

../images/485437_1_En_2_Chapter/485437_1_En_2_Fig20_HTML.jpg — Figure 2-20
Content displayed on a desktop screen

Finally, you can also the text Bulma---> Awesome, Rockin' & Intuitive text in capitalized case with italics styling on all three screens as per the defined markup.

Summary

In this chapter, we looked at various grid features, including columns, offsets, gaps, and other different ways of styling columns. We also looked at the utility helpers and modifiers that are quite handy in web design and also speed up your website significantly. In the next chapter, we will look at in-depth content and code for the Layout CSS helpers in Bulma, such as tiles, box elements, media objects, and cards, to mention a few. So, stay tuned for more.

A. ShenoyLearning Bulmahttps://doi.org/10.1007/978-1-4842-5482-0_3

3. Layout CSS Helpers

Aravind Shenoy¹

(1)

Mumbai, Maharashtra, India

In modern layouts, texts are not placed in an ad-hoc way compared to the archaic ways used in old, legacy web sites. Containers are an awesome control for placing and grouping text, images, graphics, headings, buttons, and glyphicons in a single group.

It is quite handy, as you can resize, move, adjust, modify, or place the entire container group instead of moving each individual element inside it. Containers, levels, media objects, banners, tiles, cards, boxes, and panels are the various containers in Bulma that help enclose different types of content within it.

In this chapter, we will look at these Bulma containers, which are quite useful in modern layouts in this digital era. Let’s get started right away.

Containers and Levels

In Bulma, the container control centers the content horizontally. In addition, Bulma’s container element is responsive and brings out a certain consistency across different devices, specifically tailored for mobile platforms.

In Listing 3-1, we will learn how to use the container element. However, we will first define the columns grid container and then create a separate container control, to show the difference between the grid columns container and the separate container control.

<p>

cat ipsum dolor sit amet...

</p>

</div>

<p>

cat ipsum dolor sit amet, ....

</p>

</div>

Listing 3-1

Grid Container vs. Standalone Container Element

In Listing 3-1, we define the columns grid, which is centered. We use the is-full class for the columns so that it occupies all 12 columns of the grid. We assign a border and wheat color to it.

Then we create an independent container element using the container class. We assign a border and wheat color to it just like we did for the columns container.

The output of the code is shown in Figure 3-1.

../images/485437_1_En_3_Chapter/485437_1_En_3_Fig1_HTML.jpg — Figure 3-1
Grid column full width vs. normal container

As you can see in Figure 3-1, the output varies. The initial output container is the 12-grid columns container, while the container below is designed with the container class. You can see the space and padding around the content, which results in a different output compared with the 12-column full-width grid layout.

Even the container element in Bulma comes in regular, full width, and widescreen sizes. For a full HD screen, all you need to do is add the is-fullhd class to the container class. In Listing 3-2, we have just added the is-fullhd class to the container class from the previous code Listing 3-1.

<p> cat ipsum dolor... </p>

</div>

<body>

<div class="container is-fullhd" style="background-color: Wheat;">

<p> cat ipsum dolor.... </p>

</div>

Listing 3-2

Grid Column Full Width vs. Full HD Container

The output of the code is seen in Figure 3-2.

../images/485437_1_En_3_Chapter/485437_1_En_3_Fig2_HTML.jpg — Figure 3-2
Grid column full width vs. full HD container

The full HD container is wider; therefore, the content is stretched to the right and left occupying more space due to the is-fullhd class.

To see the difference between a normal container and a full HD container more clearly, let’s see the code in Listing 3-3.

<div class="container" style="background-color: Wheat;">

<p>

cat ipsum dolor...

</p>

</div>

<br>

<div class="container is-fullhd" style="background-color: Wheat;">

<p>

cat ipsum dolor...

</p>

</div>

<br>

</div>

Listing 3-3

Normal Standalone Container vs. Full HD Container Component

The output of the code is seen in Figure 3-3.

../images/485437_1_En_3_Chapter/485437_1_En_3_Fig3_HTML.jpg — Figure 3-3
Normal container control vs. full HD container

In Figure 3-3, you can see the normal container element followed by that of the full HD container element. You can now clearly see the difference between the normal and full HD container, as the content occupies more space to the right and left of the viewport for the full HD element (remember that the content is the same for both these containers).

Bulma also has a levels container, which can be used for most of the web site’s elements. The difference between levels and container control is that the elements within the levels control are centered vertically by default.

Let’s look at the code for the levels container in Listing 3-4.

<p class="level-item"><a class="button is-primary"><strong> Bulma Mail</strong></a></p>

<p class="level-item"><a class="button is-info"><strong>Compose</strong></a></p>

<p class="level-item"><a class="button is-info"><strong>Delete</strong></a></p>

</div>

</div>

</p>

<strong>Search</strong>

</button>

</p>

</div>

</nav>

</div>

Listing 3-4

Levels Container Element

In Listing 3-4, we used the container element for an element. Inside the column of the container, we created a <nav> tag to which we assigned the level class. Moving forward, we create a <div> element to which we assign the level-left class. This will align the element to the left of the container. We create four paragraph <p> elements with the level-item class. We include links within each <p> tag and design button for each link using the button class. We use different contextual colors for each of the four buttons: primary, link, info, and success.

Next, we create another <div> element and assign a level-item class to it and include the has-text-centered class. This will align the content in the center of the levels container. We also include an image inside this <div> element, which is also centered.

Further, we create the third <div> element and assign the level-right class to it. Then we define a level-item class for a <div> element inside the third <div>element. We create a search box. Initially, for creating the search box we define a <div> and assign the field class to it. Then we create a paragraph element <p> and assign the control class to it. We then use the input class with the type as text and include a placeholder. Next, we create the Search button. For this we add the has-addons class to the field class, using which we had created the search box. Now we create a button element below the <p> tag and assign the same control class to it. Then we name the button as Search.

The output of the code is shown in Figure 3-4.

../images/485437_1_En_3_Chapter/485437_1_En_3_Fig4_HTML.jpg — Figure 3-4
Levels container

As you can see, the level-left class has pulled the content to the left, whereas the level-right class has pushed the content to the right of the levels container.

Media Objects

Social media web sites usually have text next to several graphical formats such as images, icons, infographics, or videos. Media objects help you in designing this structure, wherein data or information is placed alongside graphical content in a hassle-free, uncomplicated manner. This UI component is quite handy in repetitive design like blog posts, comments, tweets, etc.

Bulma’s media objects can be better understood by the following code:

</figure>

<p>

<strong>Shrek</strong>

<br>

Havana brown. Malkin...

<br>

</a> ········ <a> <strong>Reply all :-<span class="icon is-small"><i class="fas fa-reply"></i></span></strong></a> ········ <strong>3 days</strong> </small>

</p>

</div>

</article>

Listing 3-5

Media Object with Image and Content

In Listing 3-5, we defined a main <article> tag to which we assign a media class. Then, we use the <figure> tag to which we assign the media-left class and insert an image source using the <img> tag. After the media is defined, we create a <div> element within the main <article> tag below the <figure> tag and assign the media-content class to it. Then we create another element inside it, assign the content class, and enter the sample prose. Once the sample prose has been entered, we define the three icons below it using the Bulma supported icon tags (we will get to icons in later chapters). See Figure 3-5.

../images/485437_1_En_3_Chapter/485437_1_En_3_Fig5_HTML.jpg — Figure 3-5
Main media object with the image and the content

Moving forward, we will nest a text area below this media object as seen in Listing 3-6.

</p>

</div>

<button class="button is-success">Submit comment</button>

</p>

</div>

</article>

<br>

</article>

Listing 3-6

Adding a Text Area Box

In Listing 3-6, we nest a text area akin to the one seen in a form. This text area will be nested inside the main <article> tag used at the first line of code in Listing 3-5. For designing the text area, again we use an <article> tag (think child article), and assign the media class to it. Since there is no image in the text area code, we directly use a <div> element and assign the media-content class to it. Then we create a paragraph element and assign the control class to it. We define a text area element with the textarea class. Below the textarea element, we define another <div> and assign the field class to it. Next we define a paragraph tag and assign the same control class to it as the one used in the text area code. Then we create a button using the button element and assign the is-success contextual color to it (the color is similar to spring green and is a built-in contextual color.

The output of the code so far is seen in Figure 3-6.

../images/485437_1_En_3_Chapter/485437_1_En_3_Fig6_HTML.jpg — Figure 3-6
Text area below the main media object

Following this, we nest a media object below the text area, as seen in Listing 3-7.

</figure>

<p>

<strong> ORACLE </strong>

<br>

Malkin scottish fold....

<br>

</a> ········ <a> <strong>Reply all :- <span class="icon is-small"><i class="fas fa-reply"></i></span></strong></a> ········ <strong> 1 day</strong> </small>

</p>

</div>

</article>

Listing 3-7

Nested Media Object Below the Parent Media Object

In Listing 3-7, we define a nested <article> element. We assign the media class to it. Then we use a <figure> tag to which we assign the media-left class. Next we insert an image using the <img> tag. Then we define a <div> to which we assign the media-content class. Next, we define a <div> element within the preceding <div> element and assign the content class to it. The code is same as the one when we created the first media object except that this is a nested article tag and the sample image and content are different.

The output of the code so far is shown in Figure 3-7.

../images/485437_1_En_3_Chapter/485437_1_En_3_Fig7_HTML.jpg — Figure 3-7
Nested media object under the text area

Then we create another media object in a similar manner. The code for the next media object is shown in Listing 3-8.

</figure>

<p>

<strong> ORACLE </strong>

<br>

Malkin scottish fold. Singapura abyssinian kitty and manx balinese . Tiger manx so norwegian forest but british shorthair. Mouser xega

<br>

</a> ········ <a> <strong>Reply all :- <span class="icon is-small"><i class="fas fa-reply"></i></span></strong></a> <strong> 1 day</strong> </small>

</p>

</div>

</article>

Listing 3-8

Adding the Other Nested Media Object

The output of the entire code is shown in Figure 3-8.

../images/485437_1_En_3_Chapter/485437_1_En_3_Fig8_HTML.jpg — Figure 3-8
Entire media object code output

Banners

The Hero banner is a UI component in Bulma used to highlight the site’s most essential content. Hero banners draw user attention, making it useful from a saleable aspect in modern web site layouts, akin to traditional banners and posters in traditional advertising.

In line with the “pictures speak louder than words” viewpoint, Hero banners help in products/solutions promotion on web sites. Bulma’s Hero banners help add images and aesthetical content, well suited for those web layouts where there is usually minimal data, prevalent in single page design.

To understand banners really well, let’s see an example in Listing 3-9.

Banner Main Title

</h1>

Banner Subtitle

</h2>

</div>

</section>

Listing 3-9

Basic Hero Banner

In Listing 3-9, we have used a section tag and assigned a hero class to it. The <div> within the <section> tag has been assigned the hero-body class. We create another <div> with the container class and then define the title and subtitle for the Hero banner.

The output of the code is shown in Figure 3-9.

../images/485437_1_En_3_Chapter/485437_1_En_3_Fig9_HTML.jpg — Figure 3-9
Basic Hero banner

We can add contextual colors to the banner. We need to add the specific contextual color class to the <section> tag to which the hero class is assigned. Let’s see an example where we have assigned the contextual color success (a shade of green) to it.

<section class="hero is-success">

Banner Main Title

</h1>

Banner Subtitle

</h2>

</div>

</section>

Listing 3-10

Creating a Hero Banner with a Contextual Color

The output of the code is shown in Figure 3-10.

../images/485437_1_En_3_Chapter/485437_1_En_3_Fig10_HTML.jpg — Figure 3-10
Success contextual color for the Hero banner

You can establish a gradient feel to any color by adding the is-bold class in conjunction with the color class of the banner. You can also define difference sizes for the banner by using the respective medium, large, and fullheight classes. Let’s see an example in Listing 3-11, where we have used the gradient bold class and the fullheight class alongside the hero class.

<section class="hero is-bold is-success is-fullheight">

Banner Main Title

</h1>

Banner Subtitle

</h2>

</div>

</section>

Listing 3-11

Adding a Gradient to Contextual Color Alongside the Fullheight Attribute

The output of this code is shown in Figure 3-11.

../images/485437_1_En_3_Chapter/485437_1_En_3_Fig11_HTML.jpg — Figure 3-11
Hero banner with the success color gradient and fullheight size

In a full-height Hero banner, we can define the navigation in the top section by using the hero-head class. Then we can define the banner body by using the hero-body class. Finally, we can design the footer of the Hero banner using the hero-foot class.

Let’s understand it by means of the example in Listing 3-12.

<br>

<ul>

<li><a href="#" class="has-text-white">About</a></li>

<li><a href="#" class="has-text-white">Portfolio</a></li>

<li><a href="#" class="has-text-white">Services</a></li>

<li><a href="#" class="has-text-white">Blogs</a></li>

</ul>

</nav>

</div>

Shrek Solutions

</h1>

Web Matrix Architecture

</h2>

</div>

</nav>

</div>

</section>

Listing 3-12

Hero Head and Body Code

In Listing 3-12, we have defined the code for the Hero head and Hero body sections. Initially, we use the code for creating a full-height banner. We assign the hero, is-bold, is-primary, and is-fullheight classes to the <section> tag. The banner therefore is a full-height hero banner with a gradient color shade of the primary contextual color.

Then we define the enclosed <div> with the hero-head class. Within this we include another <div> element and assign the container class to it, to create a container-based padded layout. Then we use a <nav> navigation element and assign the breadcrumb class to create a navigation breadcrumb. We further use the is-centered class to the <nav> element so that the breadcrumb is positioned at the center in the hero-head section.

Moving forward, we create an unordered list using the <ul> tag and the <li> tags within the <ul> tags. Once we have defined the name of the navigation options, we move on to the body section of the banner.

In the banner body section, we create a separate <div> element and assign the hero-body class to it. We define a container for the body section using the container class for the enclosed <div> element. We define the headings using the title and subtitle classes. Once we code the names of the headings, we move on to executing this part of the code.

The output of the code so far is shown in Figure 3-12.

../images/485437_1_En_3_Chapter/485437_1_En_3_Fig12_HTML.jpg — Figure 3-12
Hero banner head and body sections

Then, we proceed to creating the footer section of the Hero banner. The code is shown in Listing 3-13.

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

</nav>

</div>

Listing 3-13

Adding the Footer Section

As you can see from the preceding code, we first create a separate <div> element, to which we assign the hero-foot class. Then we enclose a <nav> tag inside it and add the tabs class to create a navigation element at the bottom in the footer. We design the box for the footer and give it complete width using the is-boxed and is-fullwidth classes. Next, we create a container control using the container class. Inside the container, we create an unordered list and include the various list items using the <ul> and <li> tags. To those items, we assign the link using the <a> tag for each list item. We then assign a white border to those list items. You will observe that we used the socicon classes for each social media icon in the <li> tags.

For this, we have used the icons from the free Socicon web site at the following web address:

www.socicon.com

Note

For this example, we have used the Socicon CDN link on AWS servers in the <head> section of the Hero banner code along with the CDN link for Bulma CSS. Without adding the CDN link for Socicon, the code will not work; so make sure you include it in the <head> section.

<link rel="stylesheet" href="https://s3.amazonaws.com/icomoon.io/114779/Socicon/style.css?u8vidh">

After adding the respective socicon class (based on different social media icons), we can now see the final output in Figure 3-13.

../images/485437_1_En_3_Chapter/485437_1_En_3_Fig13_HTML.jpg — Figure 3-13
Full-height hero banner breadcrumb navigation & footer

As you can see, we have a full-height Hero banner with a breadcrumb navigation and a footer with several social media icons and other buttons like Share and Mail, to name a few.

Cards and Tiles

Cards are UI controls that help incorporate relevant information such as titles, user names, images, icons, and call-to-action buttons uniformly in a card format. All this data is shown with visuals on an equal pane. The flexibility and modular approach is prevalent across different sites like news postings, Tinder interfaces, and pictures seen under the Images tab in Google search, to name a few.

The card format delivers substantial information in a compact way with proper whitespace usage. It can also be used to group similar information in a consistent format across all viewpoints, ranging from desktops to mobile phones. For example, on an e-commerce site, information related to a specific genre of products is displayed in different rectangular cards along with their respective images with the same call-to-action functionality.

UI/UX designers promote the use of card-like design for its interactive and user-satisfying capabilities, as they can make effective use of the whitespace and deliver information in a compact form without clutter or noise. Moreover, cards demonstrate excellent responsiveness across all device or screen sizes, thereby bringing ultimate consistency and flexibility to your web site designing projects. Bulma also has an ingrained tile component, which is a card-like, metro-style container—a design previously observed in legacy Windows phones (think circa 2008–2010). Known as flat-and-modular design, it provides a high degree of readability of text and visuals, apart from ensuring a satisfying and interactive user experience across all breakpoints.

Let’s explore cards and tiles using simple examples. Initially we will see an example of cards before proceeding to tiles.

For the cards component, we will be using the card class. The card-image class is for images to be used in the card. The card-content class is for the titles and subtitles for the card and other text. For the footer, Bulma uses the card-footer class.

</figure>

</div>

Listing 3-14

Creating a Basic Card and Adding an Image

In Listing 3-14, we define a main <div> and use the card class with it. Then, we create another <div> element and assign the card-image class to it. Then, using the <figure> element, we insert an image source in the <img> tag.

The output of the code is shown in Figure 3-14.

../images/485437_1_En_3_Chapter/485437_1_En_3_Fig14_HTML.jpg — Figure 3-14
Image for the card on a mobile screen

Below the image, we define the card content. We create a <div> element and assign the card-content class to it. We assign a title and subtitle with different heading tags, using the title and subtitle class. Whereas we assign the is-4 class text size for the title, we use is-7 class text size for the subtitle. We also define a light grey color to the subtitle text using the has-text-grey-light class. Refer to Listing 3-15.

<p class="title is-4">SHREK CAFE</p>

<p class="subtitle is-7 has-text-grey-light"> Italian & American Coffee</p>

European-influenced coffee shop for international snacks and coffee drinks using espresso bases

</div>

<b> Reservation--> Book Now </b>

</p>

Listing 3-15

Adding Content to the Image

The output of the card on a mobile screen after adding the content is shown in Figure 3-15.

../images/485437_1_En_3_Chapter/485437_1_En_3_Fig15_HTML.jpg — Figure 3-15
Card with the content and image

Then we define the footer for the card using the footer tags as shown in Listing 3-16:

</footer>

<br>

</footer>

<br>

</footer>

Listing 3-16

Defining the Footer for the Card

In Listing 3-16, we create three <footer> elements. For each <footer> tag, we use the card-footer class.

In the first <footer> element, we create three links and assign the card-footer-item classes to them. We then jot down the booking timings as 5:00 p.m., 7:00 p.m., and 9:00 p.m.

In the second <footer> element, we create three links and assign the card-footer-item class to three items. However, we define the Font Awesome icons for Mail, Share, and Comments. We also increase the size of the icons by using the icon is-large and the exponential fa-2x classes for them.

In the third <footer> element , we create three links and assign the card-footer-item class to each of them. We then use the Socicon links for the five social media sites (Facebook, Twitter, Snapchat, Pinterest, and LinkedIn).

The output of the complete code is seen in Figure 3-16.

../images/485437_1_En_3_Chapter/485437_1_En_3_Fig16_HTML.jpg — Figure 3-16
Card with the content, image, and footer

In Figure 3-16, we can see the entire card we have created for Shrek Café.

Now, we look at the flat-design tile element. We define the tile by using the tile class with an element. In Bulma, the tiles have a particular hierarchy. Initially, the hierarchy is as follows:

tile is-ancestor

|---------tile is-parent

|--------- tile is-child

The is-ancestor class is the highest followed by the is-parent class, which in turn is followed by is-child, which is the lowest in the hierarchy. You can also nest tiles deeper than that. Following is the hierarchy for deeper child elements within connecting parent elements:

tile is-ancestor

| ─tile is-vertical

| |

| | |───tile

| | |

| | |───tile is-parent is-vertical

| | | └──tile is-child

| | | └───tile is-child

| | |

| | └───tile is-parent

| | └───tile is-child

| |

| └───tile is-parent

| └───tile is-child

└──tile is-parent

└───tile is-child

Let’s further understand this using a code example.

<p class="title">Column Ia</p>

<p>Cat ipsum dolor ...amet </p>

</div>

<p class="title">Column Ib</p>

<p> Cat ipsum dolor ...amet </p>

</div>

<p class="title">Column Ic</p>

<p> Cat ipsum dolor ...amet </p>

</div>

<p class="title">Column II</p>

<p>Lorem ipsum dolor sit...ut quam </p>

</div>

Listing 3-17

Creating Basic Tiles

In Listing 3-17, we initially create the main <div> element and assign it the tile is-ancestor class. Then we create the first child <div> element and assign it the tile is-parent and is-8 classes to define it as a parent element and the 8-column size it occupies. Within this parent, we have created three <div> elements. We assign a title and sample text for each of them. But the only difference in the three <div> child elements of the parent is the size allocated to each of them. The first child is four columns long due to the is-4 class. The second <div> child element is five columns long due to the is-5 class. The third <div>, whose size is not defined, takes up the remaining space automatically. We also assign a box class to each child in conjunction with the size and child class to create a box container.

Then we create a separate <div> for the second parent of the ancestor tile. We assign the tile is-child and box classes to the child inside the second parent. We also define the title and sample content for this child.

The output of the code is shown in Figure 3-17.

../images/485437_1_En_3_Chapter/485437_1_En_3_Fig17_HTML.jpg — Figure 3-17
Basic tile structure

As you can see, the first parent occupies eight columns space and contains three child elements. The second parent has taken the remaining space of four columns automatically, as the size is not defined.

In Bulma, you can also stack tiles vertically. Let’s understand it by using the example shown in Listing 3-18.

<p class="title">Column Uno</p>

<p> Cat ipsum dolor sit .... cupidatat </p>

</div>

<p class="title">Column Dos</p>

<p> Cat ipsum dolor sit .... cupidatat </p>

</div>

<p class="title">Column Tres</p>

<p>Cat ipsum dolor sit .... cupidatat</p>

</div>

<p class="title">Column Four Lorem</p>

<p>Lorem ipsum ... ut quam Column</p>

Listing 3-18

Stacking Tiles Vertically

In Listing 3-18, we create one ancestor containing two parents. The first parent <div> is assigned a space of nine columns. We use the notification class to give it a bland contextual color. We also allocate the is-vertical class to this element. This will ensure that the child elements of the first parent tile will be stacked vertically. We create three child elements using the is-child class for each child <div> element.

For the first child element, we assign a tile of 12 columns of the parent size by using the tile is-12 class, and we also use the notification is-danger class to define the contextual color. Finally, we use the box class to create a box container for the first child. Thereon, we define the title and sample content for that child.

Similarly, we create two more child <div> elements. We assign the size of 12 columns for this child tile and define the is-primary and is-info classes to define its contextual colors. We also define a box container for their content using the box class, including the title and headings.

Following this, we create the second parent of the ancestor and define the contextual success color to the parent. Then we create a child for this parent and assign the contextual warning color to it. Moving forward, we define the title and sample content for this child.

The output of this code is shown in Figure 3-18.

../images/485437_1_En_3_Chapter/485437_1_En_3_Fig18_HTML.jpg — Figure 3-18
Child tiles stacked vertically for first parent, and second parent-child defined normally

As you can see, the first parent containing Column I Uno, Column I Dos, and Column I Tres child tiles are stacked vertically and occupy 12 columns horizontally. The second parent is a normal one with a single child. All parent columns and child columns show the size as defined in the code.

As explained earlier, you can have child elements much deeper within various parents. Let’s see a code example.

<p class="title is-size-4"><b>Column I Uno </b></p>

<p>Cat ipsum dolor... cupidatat</p>

</div>

<p class="title is-size-4"><b>Column I Dos Sub-Child I </b> </p>

<p> Cat ipsum dolor... cupidatat </p>

</div>

<p class="title is-size-4"><b>Column I Dos Sub-Child II </b></p>

<p> Cat ipsum dolor... cupidatat </p>

</div>

<hr>

<p class="title"><b>Column II </b></p>

<p>Lorem ipsum dolor... orci, </p>

</div>

Listing 3-19

Nested Child Element Under Various Parent Tiles

In Listing 3-19, we create a main <div> with the tile is-ancestor class. Then we create the first parent element and give it a size of eight columns with the is-vertical class so that its child elements are stacked. We give it a danger contextual notification color.

Then we create a 12-column child element under the first parent element and assign the primary contextual color to it. We create another 12-column element child element under the first parent. Under the second child element, we create a parent element and create a nested tile that is six columns wide, and a second child element that will occupy the remaining space with the info primary color.

Now we have designed the first parent tile and its child tiles, followed by a nested parent inside the second child element, which in turn contains two child tiles.

So, at the start of the code we used the ancestor tile. Under the ancestor child tile, we create the second parent tile and use the notification color for the second parent and assign the success contextual notification color to it. Then we define the title, subtitle, and sample content inside it.

The output of the complete code is shown in Figure 3-19:

../images/485437_1_En_3_Chapter/485437_1_En_3_Fig19_HTML.jpg — Figure 3-19
Parent child, child tile, and nested child tiles

Callout Panels and Box

Callout panels are containers with padding that create an inset box effect and highlight the content that separates it from the other usual content on a traditional web page. Apart from panels, Bulma also has a simple box element. Whereas boxes are used for normal content, panels are used for multiple elements like information sets and data tables, and may occasionally include forms. From a web design perspective, panels and boxes do not incorporate media and graphic content like cards or tiles do.

An important use of callout panels, in modern layouts especially, is to make the call-to-action elements stand out among the different content blocks. By singling out important information by adding more emphasis to a section or content, panels help get effective responses from the users.

We will see a step-by-step example of callout panels in Bulma in Listing 3-20.

<b> Brands </b></p>

<a>Refurbished</a>

</p>

<a class="panel-block is-active">Samsung </a>

<a class="panel-block"> Nokia </a>

<a class="panel-block"> OnePlus </a>

<a class="panel-block"> Honor </a>

<a class="panel-block"> Redmi </a>

<a class="panel-block"> Huawei </a>

<a class="panel-block"> Motorola </a>

<a class="panel-block"> Apple </a>

</nav>

</div>

Listing 3-20

Creating the First Panel

In Listing 3-20, we create the panel heading. Initially, we create a main <div> element and assign the is-multiline class to it in conjunction with the columns class. The entire code for the panels will be contained in the main <div> element.

Then, we define the column and assign a five-column width to it. Then we create the <nav> navigation element and assign the panel class to it. We move ahead to create a paragraph <p> element and assign the panel-heading class to it. We assign the Brands name as the panel heading. Then we create the panel tabs by using the panel-tabs class. Then we assign the names (All, New, and Refurbished) for the panel tabs. We add an is-active to the first panel tab, All.

Once the panel tabs are created, we create the list items using the <a> link tabs. For each link, we assign the panel-block class. We use the is-active class only for the first link, so that it shows that link chosen by default. Then we name different brand names of mobiles such as Samsung, Nokia, and Honor, to name a few.

The output of the code is shown in Figure 3-20.

../images/485437_1_En_3_Chapter/485437_1_En_3_Fig20_HTML.jpg — Figure 3-20
Panel with mobile phone brands

In Figure 3-20, we can see that the panel heading, panel tabs, and panel items are arranged as defined in the code. Then we define the second panel in the 12-column grid, which is assigned a size of 2 columns. We also use the is-offset-1 class so that this panel is one column away from the first panel. Let’s see the entire code for the second panel in Listing 3-21.

<b>Price</b>

</p>

<= $100

</a><a class="panel-block">

<= $300

</a><a class="panel-block">

<= $500

</a>

<= $750

</a>

</nav>

</div>

Listing 3-21

Creating the Second Panel

In Listing 3-21, we use the <nav> tag and assign the panel class to it. We define the panel-heading as Price, followed by the links containing the price rate range.

The output of this code is shown in Figure 3-21.

../images/485437_1_En_3_Chapter/485437_1_En_3_Fig21_HTML.jpg — Figure 3-21
Second price range panel next to the first panel

We then create another panel right below the second Price range panel.

<b>Color</b>

</p>

</p>

</p>

</p>

</p>

</p>

</nav>

Listing 3-22

Creating the Third Panel Below the Second Panel

In the preceding code, we use a navigation <nav> element and then define the panel heading as Color. We create five color contextual buttons panel blocks using the <a> link with the panel-block class.

The output of the code so far is shown in Figure 3-22.

../images/485437_1_En_3_Chapter/485437_1_En_3_Fig22_HTML.jpg — Figure 3-22
Three panels for brands, price, and color

Bulma also has a box layout, which we used previously in code. Let’s see an example of the box container in Listing 3-23.

<p>

<strong class="is-size-4">Shrek-in-Matrix </strong>

<br>

Havana brown. Malkin. ..kittenz

<br>

</a> <a> <strong>Reply<span class="icon is-medium"><i class="fas fa-reply"></i></span></strong></a> ········ <strong><a>Share <span class="icon is-medium"><i class="fas fa-share-alt-square"></i></span></strong><a>

</small>

</p>

</div>

</article>

</div>

Listing 3-23

Defining the Box Container

In Listing 3-23, we define a <div> class with the box class. Thereon, we define the <article> tag and assign the media class to it. Then, we create an element with the content class and add the heading and sample content in it. We also create three icons for Like, Reply, and Share using the Font Awesome-supported icon elements.

The output of the code is shown in Figure 3-23:

../images/485437_1_En_3_Chapter/485437_1_En_3_Fig23_HTML.jpg — Figure 3-23
Box layout container

Incorporating Footers

Footers help designers add common information and navigation options at the bottom of the web pages. Copyright information, sitemaps, privacy policies, and contact information are usually included in the footer section. Links to important pages of the web site are normally a part of the footer section (more so in single-page web site design). Streamlining the footer information is also a way to enhance the SEO and UX/UI aspects of your web site (think good usability and readability practices), specifically on mobile and tablet devices.

Let’s see an example of a <footer> element in the following code (Listing 3-24). The Hero banner was explained earlier in the chapter; you may refer to that in Listing 3-12, which does not include the Hero footer part but does have sample content for the banner headings and body section. Only the footer section is explained here.

<br>

<br>

<p>Cat ipsum dolor ...for cupidatat </p>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

</nav>

</footer>

Listing 3-24

Creating Footer Design

We use the <footer> element and assign the Aqua color to it. We enter the copyright sample message in the enclosed <p> tags. Then, we proceed to use a navigation <nav> element and assign the tabs, is-boxed, and is-fullwidth classes to it. Within that, we define a Bulma container using the container class. Similar to the Hero code, we create an unordered list of social media links from the Socicon web site.

The output of the code is shown in Figure 3-24.

../images/485437_1_En_3_Chapter/485437_1_En_3_Fig24_HTML.jpg — Figure 3-24
Footer section highlighted in a red box

Summary

In this chapter, we explored the different types of layout helpers such as containers, boxes, panels, media objects, and Hero banners, among others. These containers can be an alternative for grid structures, depending on the web site requirements.

In the next chapter, we will look at navigation and media components. These UI components are quite useful in building interactive web sites, a best fit for today’s effective digital layouts.

A. ShenoyLearning Bulmahttps://doi.org/10.1007/978-1-4842-5482-0_4

4. Navigation and Media Components

Aravind Shenoy¹

(1)

Mumbai, Maharashtra, India

This chapter examines Bulma’s navigation and media components. Bulma’s intuitive and easy-to-use navigation components enable access to content and commercial functionalities such as checkout areas, while the media attributes enable sophisticated web design. Bulma’s navigation components enable users to find content quickly and easily. They also help organize content in a streamlined manner, kind of a hallmark for efficient web design. Let’s take a look at the various navigation and media elements.

Navigation Components

Navigation elements are an imperative aspect in designing modern layouts. They are used as a roadmap for the content on your site interface. Aesthetics account for nothing if your users cannot interact with your site easily. Therefore, navigation elements help visitors access that information quickly, eliminating the guesswork of finding the solution/content, which encouraged them to explore your web site in the first place. On a pan-optic level, navigation elements increase the user–site engagement and conversion rate while reducing the bounce rate significantly.

Bulma has several navigation components that streamline the usability factor significantly in a minimalistic way, without the bulk or clutter.

Bulma’s navigation elements comprise breadcrumbs, drop-down menus, navbar (think navigation bar), and tabs that enable rapid user accessibility in a “no-frills” way.

Breadcrumbs

Breadcrumbs are a type of navigation system, which pinpoint the user location on the web app or web site. Breadcrumbs also improve site accessibility and exploration immensely, since they show the user location. The user can understand the hierarchy, and thus this navigation element is quite handy when there is massive content in the site.

Breadcrumbs are a common feature in web apps or sites that have several categories of displayed products/goods—this makes it easier to navigate to a particular category in case you want to check out the different products of similar make/genre. With an ultimate focus on site hierarchy, it enhances the way in which users are aware of the web page or any specific content location, paving the way for an excellent user experience.

Listing 4-1 explains the basic code for breadcrumbs.

<ul>

<li><a href="#">Documentation</a></li>

<li><a href="#">Downloads</a></li>

<li><a href="#">Support</a></li>

<li><a href="#">Blogs</a></li>

<li><a href="#" aria-current="page">Gallery</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

</div>

Listing 4-1

Basic Breadcrumb Code

In Listing 4-1, we create a box container by using the box class with a <div> element. Then we add a navigation element with the <nav> tag. We go on to assign the breadcrumb class to the <nav> tag. We create an unordered list using the parent <ul> and its child <li> tags.

To the first <li> tag, we assign the is-active class and name it Home. The is-active class will indicate the first <li> tag as the current active item. We then create six more <li> tags and name them accordingly, as seen in Listing 4-1.

The output of the code is shown in Figure 4-1.

../images/485437_1_En_4_Chapter/485437_1_En_4_Fig1_HTML.jpg — Figure 4-1
Basic breadcrumb

In the Bulma breadcrumb component, you can align the breadcrumb to the right or center. Bulma supports different separators like bullet separator, has-succeeds separator, and the arrow separator.

In Listing 4-2, we align the breadcrumb to the right and change the separator to an arrow separator.

<ul>

<li><a href="#">Documentation</a></li>

<li><a href="#">Downloads</a></li>

<li><a href="#">Support</a></li>

<li><a href="#">Blogs</a></li>

<li><a href="#" aria-current="page">Gallery</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

Listing 4-2

Right-Align Breadcrumb with Arrow Separator

As you see, most of the code is the same as in Listing 4-1. Instead of the box layout, we use the container class as the main <div> element instead of a box layout.

Coming back to the relevant stuff, we add the classes has-arrow-separator and is-right alongside the default breadcrumb class in the <nag> tag. The rest of the code is the same, where we create an unordered list and define the name for each list item.

The output of the code is shown in Figure 4-2.

../images/485437_1_En_4_Chapter/485437_1_En_4_Fig2_HTML.jpg — Figure 4-2
Right-aligned breadcrumb with an arrow separator

Moving forward, in Listing 4-3 we have an example of breadcrumbs aligned to the center of the layout. Breadcrumbs in Bulma have small, medium, and large classes apart from the default normal class, using which you can change the size of the breadcrumb as in Listing 4-3.

<ul>

<li><a href="#">Documentation</a></li>

<li><a href="#">Downloads</a></li>

<li><a href="#">Support</a></li>

<li><a href="#">Blogs</a></li>

<li><a href="#" aria-current="page">Gallery</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

</div>

<ul>

<li><a href="#">Documentation</a></li>

<li><a href="#">Downloads</a></li>

<li><a href="#">Support</a></li>

<li><a href="#">Blogs</a></li>

<li><a href="#" aria-current="page">Gallery</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

</div>

Listing 4-3

Centered Breadcrumb with Different Sizes and Separators

In Listing 4-3, we create a container for the first breadcrumb. We use the is-small class, is-centered, and has-bullet-separator in conjunction with the breadcrumb class for the first breadcrumb. The rest of the code for the first breadcrumb is similar to the earlier code listings, where we create an unordered list to define names for the breadcrumbs.

Then we create the second breadcrumb inside another container where we add the is-large class, is-centered, and has-succeeds-separator classes in conjunction with the breadcrumb class. The rest of the code is the same as earlier examples, where we create an unordered list and define the names of the breadcrumb items.

The output of the code is shown in Figure 4-3.

../images/485437_1_En_4_Chapter/485437_1_En_4_Fig3_HTML.jpg — Figure 4-3
Centered breadcrumbs in small and large sizes

As you can see in Figure 4-3, both the breadcrumbs are aligned to the center. While the first breadcrumb is small in size, the breadcrumb below is large in size. Observe the bullet separator and has-succeeds separators for the first and last breadcrumbs, respectively.

You can also use icons in conjunction with the breadcrumb items. Listing 4-4 shows an example of merging icons with the breadcrumbs in Bulma.

<ul>

<li>

<a>

</a>

</li>

<li>

<a>

<span>Downloads</span>

</a>

</li>

<li>

<a>

<span>Products</span>

</a>

</li>

<a>

<span>Support</span>

</a>

</li>

<li>

<a>

</a>

</li>

<li>

<a>

<span>Blogs</span>

</a>

</li>

<li>

<a>

<span>Contact</span>

</a>

</li>

</ul>

</nav>

</div>

Listing 4-4

Merging Icons with Breadcrumbs

In Listing 4-4, we define a main <div> with the container class. Inside we create another <div> element and assign the breadcrumb class in conjunction with the is-centered class to position the breadcrumb at the center of the row.

Then we create the breadcrumb using the unordered lists with the <ul> and <li> tags. The only difference is that we use the <span> element within each <li> class and define an icon next to the breadcrumb item name. For example, within the <a> tags within the first <li> tag, we define a Home icon within the span tags using the following line of code.

creates an empty space after the icon. We have also used the is-small class in the span tag and the home icon within the <i> tags, which are within the <span> tags.

We have used the latest Font Awesome 5.x icons. For that, we have used the following link in the <head> section before the <body> section of the code:

Then, we define different icons within each <li> tag for each breadcrumb item based on the relevant names. Also, we have kept the Support breadcrumb item as the current item using the is-active class.

The output of the code is shown in Figure 4-4.

../images/485437_1_En_4_Chapter/485437_1_En_4_Fig4_HTML.jpg — Figure 4-4
Breadcrumb with icons

Drop-Downs

Drop-downs are usually created to show the different items/content in a compact way—for example, the distinct categories commonly seen on e-commerce web sites are designed in a panel-like drop-down. You can design an apt site structure and include diverse menu items in a drop-down, eliminating too many links or congestion on the web page. Apart from a clean layout, it also eliminates the need to scroll repeatedly, as the user can access specific information from the links in the drop-down list.

From a UX/UI perspective, you have to consider the mobile platform, where it becomes a different ballgame altogether due to the touch feature and highly compact screens. Also, the links, data, or information in a drop-down should be well organized in line with the user needs. Bulma’s drop-down feature is tailored for all platforms, and is especially compatible with the mobile screen interface owing to its mobile-first paradigm.

Let’s see the process of creating drop-down menus in Bulma (Listing 4-5).

<span>Services</span>

</span>

</button>

</div>

Web Design

</a>

Mobile app Development

</a>

SEO

</a>

</a>

PPC

</a>

UX/UI design

</a>

Email Marketing Creative Design

</a>

Logo & Brand Identity Design

</a>

</div>

Listing 4-5

Creating a Drop-Down Menu

In Listing 4-5, we create a <div> element with the dropdown class to make it a main container. For the drop-down button, we create another <div> element and assign the dropdown-trigger class to it. Within this <div>, we define the drop-down button with a white background and, using the icon in conjunction with the button element, we create a small drop-down arrow.

Once we are done with the drop-down button, we create a separate drop-down menu where we will define the drop-down content. We create a <div> and assign the dropdown-menu class to it. Within that <div>, we create a child <div> and assign the dropdown-content to it. Next, we create several links using the anchor <a> link tags with the dropdown-item classes.

After we define four links, we create a drop-down divider using the <hr> tags with the dropdown-divider class. Thereon, we create three more links using the <a> tags with the dropdown-item class for each link.

The output of the code is shown in Figure 4-5.

../images/485437_1_En_4_Chapter/485437_1_En_4_Fig5_HTML.jpg — Figure 4-5
Drop-down menu

You can also use prose content instead of links in the drop-down content. For that, use <div> for each drop-down item instead of the <a> link tags. You can also use a hover effect, which will display the drop-down menu items on hover.

<span>Services</span>

</span>

</button>

</div>

Cat ipsum dolor sit amet, molestiae deserunt. Quam lorem aut. Ipsa magnam yet quo

</div>

Adipisci sit but omnis quae. Aute eius for exercitationem occaecat commodi so abb

</div>

sit amet, molestiae deserunt. Quam lorem aut. Ipsa magnam yet quo aut. Ipsa magnam

</div>

Listing 4-6

Using Content for Drop-Downs with Hover Facility

In Listing 4-6, we create similar drop-down functionality but we add the is-hoverable class in conjunction with the dropdown class for the main <div> element. Then, we create the drop-down button as in the earlier example.

The difference is when we create the drop-down menu. Within the <div> with the dropdown-content class, we create <div> elements and assign the dropdown-item class to each of the menu items as shown in Listing 4-6.

The output of the code will display a drop-down button called Services and, on hovering over it, you can see the drop-down menu items as shown in Figure 4-6.

../images/485437_1_En_4_Chapter/485437_1_En_4_Fig6_HTML.jpg — Figure 4-6
Drop-down menu with prose content on hover action

Tabs

Tabs are an excellent navigation system due to the linear representation of the site structure. Tabs not only help you divide the content into separate sections but also provide a way to access that content. Their intuitive architecture makes users aware of their location on the site quickly.

However, the usability factor of the navigation tabs element depends on how you organize and use their functionality—for example, the heading for each tab should have minimal characters or shorter lengths. Tabs are quite effective when you want to show a string of similar categories/similar genres.

Bulma’s tabs component is quite easy to design and helps site/app’s visitors to access chunks of data in a simple way. However, web designers/developers should take into account the specific user needs, amount of data, and how rapidly users can access that content.

Let’s look at the procedure to create tabs in Bulma, as seen in Listing 4-7.

<ul>

<li><a>About</a></li>

<li><a>Downloads</a></li>

<li><a>Support</a></li>

<li><a>Gallery</a></li>

<li><a>Tutorials</a></li>

<li><a>Documentation</a></li>

<li><a>Contact</a></li>

</ul>

</div>

Listing 4-7

Creating Basic Tabs

In Listing 4-7, we create a main <div> element and assign the tabs class to it. Then we create an unordered list within that <div> using the <ul> and <li> tags. We assign the is-active class to the first <li> tag to make it the current item.

The output of the code is shown in Figure 4-7.

../images/485437_1_En_4_Chapter/485437_1_En_4_Fig7_HTML.jpg — Figure 4-7
Tabs navigation system

As you can see, we have a simple navigation system.

You can also align the tabs at the center or right and change the size to small, large, or medium using the respective classes. You can use icons for each tab in tandem with the name. Apart from that, you can create a classic tabs look using the boxed functionality, as shown in Listing 4-8.

<ul>

<a>

</a>

</li>

<li>

<a>

<span>Downloads</span>

</a>

</li>

<li>

<a>

<span>Products</span>

</a>

</li>

<li>

<a>

<span>Support</span>

</a>

</li>

<li>

<a>

</a>

</li>

<li>

<a>

<span>Blogs</span>

</a>

</li>

<a>

<span>Contact</span>

</a>

</li>

</ul>

</div>

Listing 4-8

Defining Classic-Style Tabs with Boxed Attribute

In Listing 4-8, we create the parent <div> and assign the tabs class to it as seen in the earlier example. In conjunction with the tabs class, we also use the following classes:

is-centered class for aligning tabs to the center
is-large class for creating large-sized tabs
is-boxed class for the classic tabs look

Within the parent <div>, we create an unordered list using the <ul> and <li> tags. We use the <span> tags within link <a> tags for each <li> tags as shown in the following line of code:

Similarly, we create several tabs items.

The output of the code is shown in Figure 4-8.

../images/485437_1_En_4_Chapter/485437_1_En_4_Fig8_HTML.jpg — Figure 4-8
Boxed tabs with icons at the center

As you can see from the output, the tabs are positioned at the center of the row and have the relevant items next to the tab names. Moreover, you can also see the classic boxed look for the Home tab, which is the default current tab as defined in the code.

You can also define an exclusive look to each tab, where each tab will have a border. This is done with the toggle class. You can also use rounded borders for the first and last tabs, as shown in Listing 4-9.

<ul>

<a>

</a>

</li>

<li>

<a>

<span>Downloads</span>

</a>

</li>

<li>

<a>

<span>Products</span>

</a>

</li>

<li>

<a>

<span>Support</span>

</a>

</li>

<li>

<a>

</a>

</li>

<li>

<a>

<span>Blogs</span>

</a>

</li>

<li>

<a>

<span>Gallery</span>

</a>

</li>

<li>

<a>

<span>Contact</span>

</a>

</li>

</ul>

</div>

Listing 4-9

Rounded Shape Tabs with Exclusive Borders

In Listing 4-9, we use the is-boxed and is-toggle classes together in conjunction with the tabs class to allocate a boxed border for each tab. We also use another class, is-toggle-rounded, in conjunction with those classes to give a rounded border for the first and last tabs.

The rest of the code is similar to the earlier example, where we have created tabs with icons using an unordered list.

The output of the code is shown in Figure 4-9.

../images/485437_1_En_4_Chapter/485437_1_En_4_Fig9_HTML.jpg — Figure 4-9
Boxed border for all tabs with rounded borders at each end

Navbar

Bulma’s navbar element helps design a horizontal list of links enabling site visitors to access any section in the site. However, from a UI/UX perspective, it has to be minimalistic and simple. The headings should be short in length and the number of headings should be not more than 5 or 6, as it may create unnecessary clutter. You should never design a navbar first and then fit in the content. In fact, it should be the other way around—the navbar should be designed keeping content at the crux of your site structure, to ensure high-degree of readability and rapid access.

Let’s examine the navbar design in Bulma, as shown in Listing 4-10.

</a>

</a>

</div>

<a href="#" class="navbar-item has-text-white is-active"><b>Horoscope</b></a>

<a href="#" class="navbar-item has-text-white"><b>Astrology</b></a>

<a href="#" class="navbar-item has-text-white"><b>Psychics Experts</b></a>

<a href="#" class="navbar-item has-text-white"><b>Predictions</b></a>

<a href="#" class="navbar-item has-text-white"><b>Occult</b></a>

</strong>

</div>

<strong>Login</strong>

</a>

</div>

</nav>

Listing 4-10

Creating a Simple Navbar

In Listing 4-10, we define a navigation element <nav> and assign the navbar class to it. The navbar class results in a navigation bar container. Within the <nav> tags, we create a main < div> tag and assign the navbar-brand class to it. This navbar-brand element is the left side of the navbar, which is always visible and usually contains logo and links. Thereon, we create an anchor tag and assign the navbar-item class to it. The navbar-item class usually is used for various items on the navbar, but here we use it for the anchor link, pointing toward a site. Then we define the logo using the <img> tag.

Next, we create the hamburger icon, which is called the navbar-burger in Bulma. For this, we create another anchor tag and assign the navbar-burger class to it. We use a burger class in conjunction with the navbar-burger class to facilitate action using JavaScript. We set a data-target attribute and assign the value Navicon to it. We create three <span> elements without any label or name for creating three lines of the hamburger icon functionality.

Once we are done with the navburger, we create a separate <div> and assign the navbar-menu class to it. We also assign an id, whose value is the Navicon, which incidentally is also the value of the data-target attribute mentioned earlier.

Then we create another <div> tag within the preceding <div> and define the navbar-start class to it, which will align the navbar menu to the left of the logo. We move on to create five anchor links and assign the navbar-item class to each of them, and define the menu items on the navbar at the left of the logo.

Next, we create another <div> and assign the navbar-end class to it. This will align the menu-items defined here to the right of the navbar. We define a <div> element within it and assign the navbar-item class to it. We create a Login button and assign the is-outlined class to it.

The output of the code is shown in Figure 4-10.

../images/485437_1_En_4_Chapter/485437_1_En_4_Fig10_HTML.jpg — Figure 4-10
Navbar with logo and menu items

Media Components

Media components help display media in different ways, depending on their use cases or functionality. In this section, we will look at progress bars, notifications, images, tags, and pagination components in Bulma.

Progress Bars

A progress bar is an excellent way of showing the progress of any action. It is usually an indicator of the downloading process and enables the user to visualize the progression of the download operation.

Bulma’s progress bar is explained in Listing 4-11.

</div>

Listing 4-11

Creating Progress Bars with Contextual Colors

In Listing 4-11, we create a box container and define two progress bars. We use the <progress> element and assign a progress class to it, and also assign a contextual primary color to it using the is-primary class. We set the bar value as 15, with 100 being the maximum value. For this, we use the value attribute and the max attribute.

Next, we similarly define the second progress bar with 35 as the value and a maximum value of 100. We assign the contextual warning color to it.

The output of the code is shown in Figure 4-11.

../images/485437_1_En_4_Chapter/485437_1_En_4_Fig11_HTML.jpg — Figure 4-11
Normal progress bars with different values and contextual colors

In Bulma, you can assign different sizes to the progress bars. In Listing 4-12, we use the is-medium class for the progress bars with different contextual colors.

</div>

Listing 4-12

Creating Progress Bars with Medium Size

In Listing 4-12, we create two progress bars and assign the values 50 and 65 in conjunction with the progress class. We use the is-medium size class for both progress bars. We also define the contextual colors by assigning the is-info and is-success classes to them, respectively.

The output of the code is shown in Figure 4-12.

../images/485437_1_En_4_Chapter/485437_1_En_4_Fig12_HTML.jpg — Figure 4-12
Progress bars with medium-size and contextual colors

Next, we see the effect of the large class, which results in large-sized progress bars, in Listing 4-13.

</div>

Listing 4-13

Creating Large-Sized Progress Bars

In Listing 4-13, we create two progress bars and assign the is-large class in conjunction with the progress class to each of them. We define the link and danger contextual colors to the two progress bars, and also define 77 and 90 as the values for the two progress bars.

The output of the code is shown in Figure 4-13.

../images/485437_1_En_4_Chapter/485437_1_En_4_Fig13_HTML.jpg — Figure 4-13
Large-sized progress bars with contextual colors

If we do not assign any value to the progress bar, it will result in an intermediate buffering state for the progress bar, as shown in Listing 4-14.

</div>

Listing 4-14

Creating Intermediate Buffering State Progress Bars

In Listing 4-14, we have created 2 progress bars with different contextual colors but we have not used a value attribute though we have retained the max attribute.

The output of the code is shown in Figure 4-14.

../images/485437_1_En_4_Chapter/485437_1_En_4_Fig14_HTML.jpg — Figure 4-14
Buffering progress bars without values

Notifications

Notifications are a visual aid to attract the attention of the users. At times, they prompt the users to complete an action; sometimes they may be used to show important/helpful information to the users. Updates/alerts are types of notifications, while push subscription messages/context pop-ups are other use cases usually found in modern layouts.

Bulma’s notification element is quite easy to code, as shown in Listing 4-15.

cat ipsum dolor sit amet, eos...

</div>

cat ipsum dolor sit amet, eos...

</div>

cat ipsum dolor sit amet, eos...

</div>

Listing 4-15

Creating Basic Notifications

In Listing 4-15, we first create a columns container and assign the is-multiline class in conjunction with the columns class. Then we define three columns of different sizes. Inside each <div> element column, we use the notification class and also create a delete button for those notifications by using the delete class for each <button> element.

The first column occupies the space of five columns, whereas the second column is allocated a space of five columns and is offset by one column. The third column is assigned the space of half the 12-column grid and is assigned an offset of two columns. While the first notification is assigned a primary contextual color, the second notification is assigned the link contextual color using the is-primary and is-link classes, respectively. The third notification is not assigned any color and will take up the default color for the notification attribute.

The output of the code on a tablet screen is shown in Figure 4-15.

Images

Bulma’s image element is a container for responsive images or pictures. Bulma’s image element can not only be used for creating rounded and Retina images but also for defining ratio-based responsive images—for example, images used in still photography displayed consistently on various devices/screen-sizes.

To understand Bulma’s image component, let’s look at the Listing 4-16.

</figure>

</figure>

Listing 4-16

Creating Two Different Image Sizes for the Same Picture

In Listing 4-16, we use two <figure> tags for the same image, with the image class assigned to each of them. We use the <img> tag for defining the source of the image. While the first image is assigned a size of 48×48 using the is-48×48 class, the second image is assigned a size of 128×128 using the is-128×128 class in conjunction with the image class.

The output of the code is seen in Figure 4-16.

../images/485437_1_En_4_Chapter/485437_1_En_4_Fig16_HTML.jpg — Figure 4-16
Same image with different sizes

You can add a rounded shape to the image, as shown in Listing 4-17.

</figure>

Listing 4-17

Defining a Rounded Image Container

In Listing 4-17, we use the <figure> tag and assign a size of 128×128 to the image. Next, for the <img> tag, we assign the is-rounded class, which gives a rounded border shape to the image.

The output of the code is shown in Figure 4-17.

../images/485437_1_En_4_Chapter/485437_1_En_4_Fig17_HTML.jpg — Figure 4-17
Rounded border image

If you do not know the exact dimensions, you can still define a ratio for the images.

Bulma has the following 16 ratio modifiers for the image element:

image is-square
image is-1by1
image is-5by4
image is-4by3
image is-3by2
image is-5by3
image is-16by9
image is-2by1
image is-3by1
image is-4by5
image is-3by4
image is-2by3
image is-3by5
image is-9by16
image is-1by2
image is-1by3

Let’s see an example of a ratio modifier using the image element in Listing 4-18.

</figure>

Listing 4-18

Creating Ratio Modifier-Based Image Containers

In Listing 4-18, we use the <figure> tags and use the is-3by2 ratio modifier class in conjunction with the image class. Then we define the image source using the <img> tag.

The output of the code is seen in Figure 4-18.

../images/485437_1_En_4_Chapter/485437_1_En_4_Fig18_HTML.jpg — Figure 4-18
Image ratio modifier (3by2)

Pagination

Pagination is quite useful in segregation of content in multiple pages and indicates the toggling effect, helping users find the specific content easily. It prevents users from getting overwhelmed with content overload and divides the content into discrete pages, resulting in remarkable readability. Thus, pagination helps reduce complexities and enhances content exploration in a well-organized way.

Bulma has a responsive pagination module, an example of which can be seen in Listing 4-25.

<a class="pagination-previous">Previous</a>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</nav>

Listing 4-25

Creating a Simple Pagination Module

In Listing 4-25, to create the pagination, we initially create a navigation <nav> element and assign a pagination class to it. Then we create two links and assign the pagination-previous and pagination-next classes to it, respectively.

Then we create the pagination buttons by using an unordered list. The parent <ul> tag is assigned the pagination-list class. Within the <ul> element, we create the list items using anchor <a> tags.

First, we create an anchor link <a> and assign the pagination-link class to it. We also assign the is-current class to it to make it look like the current page. We assign 1 as the starting number of the page.

Then we create the second <li> tag and use a <span> element and assign the pagination-ellipsis class to it. The ellipsis creates dots, which is the range separator. Within the <span> tags, we insert the … to complete the functionality of the ellipsis.

We move on to create the third anchor link tag and assign the pagination-link class to it and enter the page number as 4. Similarly, we create another pagination list item and name it as 5 for the page number.

The output of the code is shown in Figure 4-25.

../images/485437_1_En_4_Chapter/485437_1_En_4_Fig25_HTML.jpg — Figure 4-25
Normal pagination

Bulma has integrated small, medium, and large sizes for the pagination feature shown in Listing 4-26.

<a class="pagination-previous">Previous</a>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</nav>

<a class="pagination-previous">Previous</a>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</nav>

<a class="pagination-previous">Previous</a>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</nav>

Listing 4-26

Creating Different-Sized Pagination Modules

The code example in Listing 4-26 for creating the pagination is the same as in Listing 4-25.

Instead of a single <nav> element, we create three separate <nav> elements. The first <nav> element is assigned the pagination is-small class (instead of the pagination class in default size) to create a small-sized pagination feature.

For medium-sized and large-sized pagination output, we use the pagination is-medium and pagination is-large classes for the second and third <nav> elements, respectively.

The output of the code is shown in Figure 4-26.

../images/485437_1_En_4_Chapter/485437_1_En_4_Fig26_HTML.jpg — Figure 4-26
Small-, medium-, and large-sized pagination components

You can change the alignment of the pagination component. You can center it or align it to the right. Apart from that, you can also use the disabled attribute to disable a link. You can also create rounded pagination components by using the is-rounded class.

Let’s go to Listing 4-27 to understand it better.

<a class="pagination-previous" disabled>Previous</a>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</nav>

<a class="pagination-previous" disabled>Previous</a>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</nav>

Listing 4-27

Pagination Modules with Different Alignment and Rounded Shape

In Listing 4-27, the process to create the pagination is the same. The specific difference is that for the first <nav> element, we assign the is-rounded class in conjunction with the pagination class for defining the rounded shape for the pagination component. Thereon, we also assign the is-right class, which will align the pagination component to the right of the web page.

Then, in the first <a> element with the pagination-previous class, we add the disabled attribute to show that the link is disabled. The rest of the code is the same as that for the pagination components in the earlier examples.

Once we are done with the first pagination component, we create the second pagination component using another <nav> element. We assign the pagination is-rounded class to this <nav> tag. Here, in conjunction with the pagination is-rounded class, we assign an is-centered class to align the pagination component to the center. We also use the disabled attribute in the first anchor tag akin to the previous navigation element resulting in a grayed-out look for the link.

The rest of the code is the same as that of the first <nav> element or the earlier examples.

The output of the code is shown in Figure 4-27.

../images/485437_1_En_4_Chapter/485437_1_En_4_Fig27_HTML.jpg — Figure 4-27
Pagination components to the right and center, respectively

In Figure 4-27, you can see that the first pagination component is aligned to the right. The Previous & Next page labels are shifted to the left due to this alignment. In addition, the Previous label is grayed-out due to the disabled attribute.

As for the second pagination component, the alignment is to the center. Here, the Previous & Next page labels are on opposite ends of the page. Both these screenshots are taken on a tablet-sized screen.

Summary

In this chapter, we looked at navigation elements and media components. In the next chapter, you will learn about buttons, icons, modals, and forms, enabling you to build sophisticated, interactive web pages with ease.

A. ShenoyLearning Bulmahttps://doi.org/10.1007/978-1-4842-5482-0_5

5. CSS Components and Forms

Aravind Shenoy¹

(1)

Mumbai, Maharashtra, India

CSS frameworks have built-in interface elements and components that enable easy and quick development unlike scratch-coding. In this chapter, we will look at useful components like Font Awesome icons, buttons and button-groups, content-wrappers, modals, and forms.

Buttons

Buttons are vital in web design, as they enable the user to interact with your web site, especially in call-to-action scenarios. In modern layouts, you need to follow some basic rules to increase user communication with the buttons. They should prompt the user to click- that’s why it should be easy to locate; you should also ensure consistency from an end-user perspective. When it comes to shape, the design should be uniform all throughout the web site (for example, if you are using square buttons, ensure that all the buttons have a square design). However, the size of important buttons can be a bit larger and noticeable. You can use focus and hover functionalities for enhanced usability. An important aspect is that users should get relevant responses once they click the button. For example, you are filling a form, and after entering the required details, you click on Submit. A message stating “Your form has been submitted successfully” or “We have received your application and will get back to you soon” will reassure the user that the required action has been implemented.

Bulma has responsive buttons where you can define different sizes, colors, outlined patterns, display width, shapers, button group, and lists, to mention a few.

Initially, we will look at the different types of buttons in Bulma shown in Listing 5-1.

<a class="button">Link Button</a>

<button class="button">Normal Button</button>

Listing 5-1

Button Types

As seen in Listing 5-1, we use an anchor link <a>, <button>, and <input> tags to define buttons. Initially, we use the anchor link <a> tag and use the button class to form a button with a link. The <button> tag can be assigned a button class to define a button.

In forms, we tend to use the < input> tags. Here, in the first <input> tag, we assign a button class in conjunction with the submit type attribute. We use the value Submit Input as the name of the button.

In the last code line, we use an <input> tag again, to which we also assign the button class. We also assign it the reset type attribute and set the value as Reset Input, which will be the name of the button.

The output of the code is shown in Figure 5-1.

../images/485437_1_En_5_Chapter/485437_1_En_5_Fig1_HTML.jpg — Figure 5-1
Different button types

In Figure 5-1, we can see normal buttons as defined in the code.

In Bulma, you can assign a few basic colors as well as the ingrained contextual colors. Listing 5-2 depicts a few of the color buttons in Bulma.

<a class="button is-light">Link Button</a>

<button class="button is-black">Normal Button</button>

Listing 5-2

Colored Buttons

As you can see in Listing 5-2, we have used an anchor link initially and assigned the button class in conjunction with the is-light color class. For the second button, we use the button class in conjunction with the is-black color class. The third button using the input tags is assigned the button class in conjunction with the is-primary class. For the fourth button, we use the is-warning class in conjunction with the button class.

The output of the code is shown in Figure 5-2.

../images/485437_1_En_5_Chapter/485437_1_En_5_Fig2_HTML.jpg — Figure 5-2
Few colored buttons

In Bulma, you can allocate different sizes to the buttons, as shown in Listing 5-3.

<a class="button is-light is-small">Hyperlink-Button</a>

<button class="button is-black is-normal">Normal Button</button>

Listing 5-3

Different Button Sizes

Listing 5-3 uses almost the same code as Listing 5-2 except for the size classes. For the first button, we use the is-small class, which will result in a small-sized button. For the second button, we use the is-normal class, which is the default size. For the third button, we do not use any button size class, as a result of which it will be of normal size just like the second button. In the fourth button code, we use the is-medium class, whereas in the fifth button code line, we use the is-large class, resulting in medium- and large-sized buttons, respectively.

The output of the code is shown in Figure 5-3.

../images/485437_1_En_5_Chapter/485437_1_En_5_Fig3_HTML.jpg — Figure 5-3
Different button sizes

If all the buttons are of the same size, then wrap them in a buttons parent using the buttons are-small, buttons are-medium, and the buttons are-large classes depending on the requirement. If you want one button of a different size in a group, you need to assign a different size for only that button in the group as shown in Listing 5-4.

<div class="buttons are-medium">

<a class="button is-success">Medium</a>

<a class="button is-success is-normal">Normal</a>

<a class="button is-success">Medium</a>

</div>

Listing 5-4

Buttons Parent with Buttons, with One Different-Sized Button

Listing 5-4 we use a parent <div> element and assign the buttons are-medium class to it. This will allocate a medium-size to all the buttons in the group by default. However, in the third line of code, we use the is-normal class. As a result, all the buttons will be medium-sized except for the third button, which will end up as a normal sized button owing to the is-normal class.

The output of the code is shown in Figure 5-4.

../images/485437_1_En_5_Chapter/485437_1_En_5_Fig4_HTML.jpg — Figure 5-4
Medium-sized button group with a single, normal-sized button

Bulma has an outlined feature for its buttons, which will only assign a border for the button, with no color fill-up except for the text. Refer to Listing 5-5 to see an example:

<a class="button is-outlined is-danger">Link Button</a>

<button class="button is-outlined is-black">Normal Button</button>

Listing 5-5

Outlined Buttons

In Listing 5-5, we create four buttons. The first button is assigned the button is-danger class in conjunction with the is-outlined class. The second button is assigned the button is-black class in conjunction with the is-outlined class. The third button is assigned the button is-primary class in tandem with the is-outlined class. The fourth button is assigned the button is-warning class alongside the is-outlined class.

The output of the code is shown in Figure 5-5.

../images/485437_1_En_5_Chapter/485437_1_En_5_Fig5_HTML.jpg — Figure 5-5
Outlined buttons

Bulma offers a full-width class, using which the button can stretch to the full-width screen as shown in Listing 5-6.

<a class="button is-primary is-small is-fullwidth">SMALL</a>

<a class="button is-info is-normal is-fullwidth">Default</a>

<a class="button is-danger is-medium is-fullwidth">Medium</a>

<a class="button is-warning is-large is-fullwidth">Large</a>

Listing 5-6

Full-Width Buttons

In Listing 5-6, we create four buttons. For the first button, we use the button is-primary class in conjunction with the is-small and is-fullwidth classes. The second button has been assigned the button is-info contextual color class in conjunction with the is-normal and is-fullwidth classes. The third button is created using the button is-danger class in conjunction with the is-medium and is-fullwidth classes. The last button is assigned the button is-warning class in conjunction with the is-large and is-fullwidth classes.

The output of the code is shown in Figure 5-6.

../images/485437_1_En_5_Chapter/485437_1_En_5_Fig6_HTML.jpg — Figure 5-6
Full-width different size buttons

In Figure 5-6, we see that the buttons have the size and contextual colors assigned in the code. All four buttons stretch to the full-width of the screen, as defined in the code.

Bulma also has an ingrained inverted class. The inverted feature takes the color defined for the button and applies it to the text without any fill-up for that button color, as shown in Listing 5-7.

<button class="button is-black is-inverted">Submit</button>

<button class="button is-danger is-inverted">Cancel</button>

<button class="button is-primary is-inverted">Login</button>

Listing 5-7

Inverted Feature

Listing 5-7 assigns the black, info, danger, and primary colors to the buttons in conjunction with the is-inverted class. As a result, we get buttons where the text color for that button is same as that of the color classes, except that the buttons are not colored as defined in the code.

../images/485437_1_En_5_Chapter/485437_1_En_5_Fig7_HTML.jpg — Figure 5-7
Inverted feature

In Bulma, you can assign a rounded shape for the buttons, as shown in Listing 5-8.

<a class="button is-rounded is-light">Link Button</a>

<button class="button is-rounded is-black">Normal Button</button>

Listing 5-8

Rounded Buttons

In Listing 5-8, we create two buttons and assign the is-light and is-black classes in conjunction with the is-rounded class respectively. This will result in a rounded border to the buttons as shown in Figure 5-8.

../images/485437_1_En_5_Chapter/485437_1_En_5_Fig8_HTML.jpg — Figure 5-8
Rounded buttons

You can also assign the hover functionality, which will highlight the button, when you hover over it. In addition, you can also use the focus functionality, which will highlight that button in the code output. Bulma has an active feature, which will display the button as the selected one.

You can also create a static button, which can be used in conjunction with a form label—commonly used in form design in modern layouts. In Bulma, you can also assign an intermediate loading display style to the buttons.

Listing 5-9 shows an example of all these functionalities.

<a class="button is-focused">Button</a>

<a class="button is-hovered">Button</a>

<a class="button is-active">Button</a>

<a class="button is-static">Button</a>

<a class="button is-primary is-loading">Button</a>

Listing 5-9

Focus, Hover, Static, and Buffering (Loading) Status

In Listing 5-9, we create five buttons. We use the is-focused, is-hovered, is-active, is-static, and is-loading classes to show the five functionalities. The output of the code is shown in Figure 5-9.

../images/485437_1_En_5_Chapter/485437_1_En_5_Fig9_HTML.jpg — Figure 5-9
Focus, hover, active, static, and buffering buttons

Bulma helps you group buttons on a single line using the field container and the is-grouped modifier, as shown in Listing 5-10.

</a>

</p>

Sign-Up

</a>

</p>

GitHub

</a>

</p>

</div>

Listing 5-10

Grouping Buttons on a Single Line

In Listing 5-10, we create a parent <div> element and assign it the field and is-grouped classes. Next, we create three <p> paragraph tags. Inside each <p> element, we create three buttons and assign the link, warning, and danger contextual colors to each of them, respectively.

The output of the code is seen in Figure 5-10.

../images/485437_1_En_5_Chapter/485437_1_En_5_Fig10_HTML.jpg — Figure 5-10
Grouping buttons in a single line

You can also connect two buttons with each other as addons. We use the same code as in Listing 5-10, except that we add a has-addons modifier to the parent field container as shown in Listing 5-11.

</a>

</p>

Sign-Up

</a>

</p>

GitHub

</a>

</p>

</div>

Listing 5-11

Addons Combining Three Buttons

From the preceding listing, all we have done is add the has-addons class to the field class.

The output of the code is shown in Figure 5-11.

../images/485437_1_En_5_Chapter/485437_1_En_5_Fig11_HTML.jpg — Figure 5-11
Addons button implementation

In Bulma, you can also create button lists. If the button list contains a lot of buttons exceeding the default 12-column grid space, then it will wrap on multiple lines with equal spacing between all buttons.

In Listing 5-12, we use the buttons class with the <div> element and then define a list of buttons of different colors using the <span> tags. Therefore, the buttons will be displayed in a line.

<span class="button is-success">Login</span>

<span class="button is-success">Login</span>

<span class="button is-success">Login</span>

<span class="button is-success">Login</span>

<span class="button is-success">Login</span>

Listing 5-12

Buttons List

The output of the code is shown in Figure 5-12.

../images/485437_1_En_5_Chapter/485437_1_En_5_Fig12_HTML.jpg — Figure 5-12
Button list wrapping on multiple lines (Tablet Screen)

In Figure 5-12, we can see that the buttons are in a single line; on exceeding the space of one row, they continue in the next line.

Note:

This screenshot was taken using a tablet screen.

So far, we have seen the different button-based aspects; in the next section, we take a look at Bulma’s compatible icons.

Icons

Icons are important in web design from a readability point of view. You can draw the user’s attention using icons due to their aesthetical attribute. For example, a danger sign icon will alert the user about some untoward action; for instance, an antivirus blocks access to some malicious web site or virus-laden portal, and shows a danger sign alerting you to refrain from surfing that web site. It also helps if the danger icon is accompanied with relevant text.

Bulma displays excellent compatibility with Font Awesome icons, Material Design icons, and Open Iconic icons. The latest Bulma release is compatible with the Font Awesome 5.x version and we will learn it in detail.

In Bulma, you can add contextual and built-in color modifiers for icons, as the icon fonts are always fonts. Let’s understand it better using a code sample in Listing 5-13.

</span>

</span>

</span>

</span>

Listing 5-13

Icons with Different Contextual Colors

In Listing 5-13, we use four <span> elements. For each <span> tag, we use the icon class to define the icon container. We use has-text-info, has-text-square, and has-text-warning classes for the first, third, and fourth <span> tags, whereas no text color modifier is added for the second icon. To create an icon, we use Font Awesome and include the fas fa-share-alt-square class, which is an icon for Share, like you usually see in social media sites nowadays (fas is the common syntax for all Font Awesome icons, whereas the type of icon is defined by the latter icon type).

The output of the code is shown in Figure 5-13.

../images/485437_1_En_5_Chapter/485437_1_En_5_Fig13_HTML.jpg — Figure 5-13
Same icon—different colors

Bulma allows you to have icons of different sizes, with an additional capability to magnify the size using multipliers as shown in Listing 5-14.

</span>

</span>

</span>

</span>

</span>

Listing 5-14

Icons with Different Sizes and Magnifiers

In Listing 5-14, we club the icon is-medium and has-text-danger classes together. We use the Font Awesome Share icon. In the next <span> tag, we use the same code but we also add a magnifier fa-2x to magnify that icons size.

Similarly, we create three more <span> tags in the next line where we use the icon is-large class and has-text-success classes together. We define a Font Awesome Share icon using the fa-share-alt-square class. Then we keep the first icon as the default large size but add fa-2x and fa-3x classes to magnify the large icon size

The output of the code is shown in Figure 5-14, where you can see the desired magnifying effect. Below the code output is the table of Bulma’s Font Awesome icon-based different sizes and magnifiers.

../images/485437_1_En_5_Chapter/485437_1_En_5_Fig14_HTML.jpg — Figure 5-14
Code output of different icon sizes and magnifiers, along with Font Awesome 5 size table

In Bulma, if you define a button that contains only an icon, the button will be square regardless of the size of the button or icon. Refer to Listing 5-15.

</div>

</a>

</div>

</a>

</div>

</a>

Listing 5-15

Button with Only an Icon

In Listing 5-15, we create three buttons using the <a> anchor link tags and assign the button is-large class for all of them. We then create a Font Awesome Share icon. For the first button, we keep it as it is by default. The second button and third button are assigned the fa-2x and fa-3x magnifier classes respectively.

The output of the code is shown in Figure 5-15.

../images/485437_1_En_5_Chapter/485437_1_En_5_Fig15_HTML.jpg — Figure 5-15
Button with only an icon

In Figure 5-15, we can see that the three buttons are square, irrespective of the size of the button or icons.

Bulma also allows you to use buttons with icons appended with the button text, as shown in Listing 5-16.

</span>

<span>Messenger</span>

</a>

</span>

<span>Twitter</span>

</a>

</span>

<span>Pinterest</span>

</a>

<span>Reddit</span>

</span>

</a>

<span>SnapChat</span>

</span>

</a>

</p>

Listing 5-16

Buttons with Incorporated Icons

In Listing 5-16, we create a group of buttons. We do that using a buttons group class container with the <p> element. We create five buttons. For the first button, we define an anchor tag <a> and assign it the button is-info class. Within the <a> tag, we use a <span> tag and assign the icon class to it. Then we create an <i> tag where we define the Facebook messenger icon. Moving forward, we create another <span> tag and define the name of the button as Messenger.

Similarly, we use four more buttons using similar code, except that the icons are different and assigned a name as per the social media context—namely, Twitter, Pinterest, Reddit, and Snapchat.

The output of the code is shown in Figure 5-16.

../images/485437_1_En_5_Chapter/485437_1_En_5_Fig16_HTML.jpg — Figure 5-16
Buttons with Icons

In Figure 5-16, we can see that the icons are depicted with the button text as defined in the code.

Now that you are acquainted with icons, we will look at the content class feature in the next section.

Content Wrapper

There are instances when you cannot use CSS classes. In those scenarios, you stick to HTML markup; also, at times you need to use HTML tags only for some text. Bulma’s content element is just what’s needed in such situations as it is a container for any type of content. For example, if you use HTML tags for unordered lists, you can enclose the code inside an element with the content class.

For ordered lists, you can either use the respective HTML attribute value or CSS modifier class.

For example, if we use the type attribute and specify the attribute value as 1, then it will show an ordered list with the numbers 1, 2, 3…and so on. For type value as A, it will show the ordered list as A, B, C… and so on. Similarly, you can define lower character roman letters (i, ii, iii, etc.), uppercase Roman letters (I, II, III, etc.), and lower case alphabets (a, b, c, etc.), using i, I, and a as the type attribute values, respectively.

The other method is to use CSS modifiers like is-lower-alpha, and so on.

Let’s understand the HTML type attribute better from a code example in Listing 5-17.

<li>Maybe</li>

</ol>

<li>Maybe</li>

</ol>

<li>Maybe</li>

</ol>

<li>Maybe</li>

</ol>

<li>Maybe</

</ol>

Listing 5-17

Ordered Lists Within the Content Container

In Listing 5-17, we use a parent <div> element and assign the content class to it (making it a content wrapper). For the first ordered list defined within the <ol> tags, we assign 1 as the value of the type attribute. Next, we define the list items using the <li> tags. For the first ordered lists defined within the <ol> tags, we assign 1 as the value of the type attribute. Next, we define the list items using the <li> tags.

For the second ordered list defined within the <ol> tags, we assign A as the value of the type attribute. Next, we define the list items using the <li> tags. For the third ordered list defined within the <ol> tags, we assign a as the value of the type attribute. Next, we define the list items using the <li> tags. Similarly, for the fourth and fifth ordered list, we use I and I as the type attribute values respectively.

The output of the code is shown in Figure 5-17.

../images/485437_1_En_5_Chapter/485437_1_En_5_Fig17_HTML.jpg — Figure 5-17
Ordered lists within the content wrapper

Therefore, the content wrapper is used to handle WYSIWYG-generated content, specifically where HTML tags are used.

In the next section, we will touch base with modals, which are quite handy at times in modern layouts.

Modals

Modals are basically overlays, essential a float on the web page. Modals are used in the following situations: to collect data, prompt users (alerts & warnings), get user input, or as an intermediary before displaying important content, features, or update announcements.

Though modals are quite useful in grabbing the user’s attention, they should be used sparingly because they distract the user’s focus from the main content. Therefore, it is better to restrict their use to mission-critical data/information or step-by-step wizards. Nevertheless, they save significant UI screen estate, while also being decisive. You should not cram too much content in the modal body, meaning it should be precise and entice the user toward a specific call-to-action. Keep them minimalistic.

Bulma has an intuitive modal component that can be used for diverse use cases; it helps retain user-focus on the context of the current screen without interrupting the workflow. We will see two code examples, one of which is a content modal and the other an image modal.

Listing 5-18 is an example of a content modal. One important thing to note is that Bulma is purely CSS and to trigger a modal action, we have to use a bit of JavaScript.

<button class="button is-success modal-button" data-target="#myModal" aria-haspopup="true"> <b>Content Modal Click </b></button>

Havana brown. Malkin......

</p>

</div>

</div>

document.querySelectorAll('.modal-button').forEach(function(el) {

el.addEventListener('click', function() {

var target = document.querySelector(el.getAttribute('data-target'));

target.classList.add('is-active');

target.querySelector('.modal-close').addEventListener('click', function() {

target.classList.remove('is-active');

});

</script>

Listing 5-18

Content Modal

In Listing 5-18, we first create a modal trigger button, which on being clicked, will display the modal. We assign a modal class to the <button> tag and assign the is-success contextual color to it; we define a modal-button class for it too. Then we use a data-target value as #myModal, which will be used for the JavaScript purposes. We name the modal button Content Modal Click.

Next, we create a <div> class, assign the modal class to it, and assign the id as myModal, which in turn was the value of the data-target value mentioned earlier.

Within the parent <div>, we create a child <div> and assign the modal-background class to it and then use a closing <div> tag. Then we create the second <div> child under the parent <div> and assign the modal-content class to it.

Then we create a paragraph tag and assign the box class to it. Post closure of the parent <div> element, we move on to create a large button and assign the modal-close class to it. Now we write the JavaScript code.

Here, the document.querySelectorAll(‘.modal-button’) method matches all the elements in the DOM (Document Object Model) that has the ‘modal-button’ class. Next, we loop through these list of elements with a forEach method and apply a callback function to each of the element that matches that class. When the callback function is applied on each of the DOM elements, it adds an event listener with another callback that would run when that event is triggered.

To explain it further, when there is a click event on any DOM element with the class, ‘modal-button’, a callback is triggered that gets all the element with the ‘data-target’ attribute. When this happens, we add an ‘is-active’ class to that element to signify that we want it to become active.

On the other hand, we then target the DOM element with the ‘modal-close’ class and add an event listener to handle when a user clicks on it. When this happens, we trigger a callback, which helps us to remove/reset the ‘is-active’ class from the modal.

Remember that the entire JavaScript code must come within the <script> before the closing <body> tag. When we execute the code, we can see a Content Modal Click button. On clicking the button, the modal is displayed over the screen.

../images/485437_1_En_5_Chapter/485437_1_En_5_Fig18_HTML.jpg — Figure 5-18
Content modal

For an image modal, the entire code style is similar, including the JavaScript code. All we do is replace the content within the <div>, to which we have assigned the modal-content class. We use the image container and is-4by3 as the ratio modifier. The rest of the code is the same as that of the content modal. Refer to Listing 5-19, which highlights the code that is different. Also, the name of the trigger modal button is changed to Café Modal.

<button class="button is-link modal-button" data-target="#myModal" aria-haspopup="true"><strong> Cafe Modal</strong></button>

<p class="image is-4by3">

<img src="Images/Coffee-Shop-PixaBay.png" alt="Coffee-Shop-PixaBay">

</p>

</div>

</div>

document.querySelectorAll('.modal-button').forEach(function(el) {

el.addEventListener('click', function() {

var target = document.querySelector(el.getAttribute('data-target'));

target.classList.add('is-active');

target.querySelector('.modal-close').addEventListener('click', function() {

target.classList.remove('is-active');

});

</script>

Listing 5-19

Image Modal

The output of the code will show a Café Modal button; clicking it will display an image modal on top of the web page (Figure 5-19).

../images/485437_1_En_5_Chapter/485437_1_En_5_Fig19_HTML.jpg — Figure 5-19
Image modal

After getting to grips with the modal design, we will now move to forms—a common feature in web designing projects.

Forms

Forms are a useful utility that allows users to enter data; the collected data is then sent to the servers for processing purposes. The concept of displaying e-mail addresses on the web site is quite redundant due to phishing or spam bulk mail among other concerns. Thus, web site owners prefer a contact form. Bulma’s forms components are flexible and easy-to-use. In this section, we will look at the procedure of building form fields in an easy-to-follow way.

Initially, we will look at how to create a form field with a label, as shown in Listing 5-20. We will also see different sizes of form fields.

<label class="label is-small">Label</label>

</div>

<br>

<label class="label">Label</label>

</div>

<br>

<label class="label is-medium">Label</label>

</div>

<br>

<label class="label is-large">Label</label>

</div>

Listing 5-20

Form Fields with Different Sizes

Before explaining the code, remember that all the form control classes should be wrapped in a .control container. While combining many form controls, the .field class should be used as a container to maintain equal spacing.

Since we are writing the code for four different form fields in Listing 5-20, we will start with a <div> element and assign the field class to it. For the first form field, we create a <label> tag and assign the label is-small class to it. We then define the input characteristics. For the <input> tag, we assign the input is-small class and type as text. We assign a placeholder for the form field using the placeholder attribute.

For the second form field, we use similar code, but we just enter label as the class for the <label> tag and input as the class for the <input> tag.

For the third, medium-sized form field, we again use similar code but we assign the label is-medium class for the <label> tag and input is-medium class for the <input> tag.

For the large-sized form field, we use similar code but we assign the label is-large class for the <label> tag and input is-large for the <input> tag.

For all the tags, as mentioned in the first form field, we use a placeholder.

The output of the code is shown in Figure 5-20.

../images/485437_1_En_5_Chapter/485437_1_En_5_Fig20_HTML.jpg — Figure 5-20
Different sizes of form fields

Bulma enables you to use addons to attach controls together. In the next example in Listing 5-21, we use addons where we combine buttons with form fields. We can also align the controls to the right, center, and even extend to full width.

</div>

<a class="button is-static"> Search </a>

</div>

</div>

<a class="button is-static">Search </a>

</div>

</div>

<a class="button is-static"> Search </a>

</div>

</div>

<a class="button is-static"> Search </a>

</p>

</div>

Listing 5-21

Control Attached with Addons and Diverse Alignment

In Listing 5-21, we create four addons form control fields.

For the first form field, we create a parent <div> and assign the field has-addons class to it. Then we create a child <div> and assign the control class to it. Within an <input> tag, we assign the input class, type as text, and a placeholder. Then we create the second child <div> and assign the control class to it. We then define a static button using the button is-static class and assign the Search name to it. This will combine the form field with the static button.

For the second form field, we use the same code; but in this case, the only difference is that we assign the has-addons-right class in conjunction with the field has-addons class. This will result in alignment of the form field to the right-side.

Similarly, we create the third form field; we use the same code but here we use the has-addons-centered class in conjunction with the field has-addons class.

As for the fourth form field, we create a full-width form field by using the is-expanded class in conjunction with the control class for the first child <div> in that section. The rest of the code is same as that of the first form field.

The output of the code is shown in Figure 5-21.

../images/485437_1_En_5_Chapter/485437_1_En_5_Fig21_HTML.jpg — Figure 5-21
Form fields with addons with diverse alignment

In the preceding screen-shot, the first form field with the static Search button is aligned to the left by default, the second aligned to the right, the third aligned to the center, and the fourth a full-width form field—each with a static Search button.

We can also create a text area in Bulma, which will be able to encompass quite a lot of content as shown in Listing 5-22. We can also assign a buffering or loading feature in the form fields, which is also shown in this listing.

<div class="control is-loading">

<input class="input is-rounded" type="text">

</div>

<br>

<label class="label">Remarks</label>

</div>

<br>

<label class="label">Complaints</label>

</div>

Listing 5-22

Creating a Text Area Box and Rounded Form Field

In Listing 5-22, we create a Name form field the usual way. But after defining the label, we assign the is-loading class to the control class for the <div> element. Then, we use an <input> tag, and assign the input is-rounded class and type as text.

Now that we have created the first rounded form field, we move on to the next part where we create two text area boxes. For the first text area box, we use a parent <div> with the field class and create a label for the text area box. Next, we use the <textarea> tag and assign the textarea class to it. We move on to add the is-success color modifier to this box and define the placeholder. Next, we define the number of rows as 3 using the rows attribute.

For the second textarea box, we use the same code, but here we give it a danger contextual color modifier instead of the success color modifier in the first. We also define the number of rows as 6.

The output of the code on a tablet is shown in Figure 5-22.

../images/485437_1_En_5_Chapter/485437_1_En_5_Fig22_HTML.jpg — Figure 5-22
Rounded form field and different sized and colored text area boxes

In Figure 5-22, we can see that the first form field has a rounded border. At the right of the form field, you can see the loading status state.

The text-area boxes with a 3-row size and 6-row size with their respective colors are also displayed below the form field.

Moving forward, we will learn about the drop-down menu functionality in forms, as shown in Listing 5-23.

<option value="Electrical Engineering">Electrical Engineering</option>

<option value="Architectural Engineering">Architectural Engineering</option>

<option value="Automotive Engineering">Automotive Engineering</option>

<option value="Aerospace Engineering">Aerospace Engineering</option>

<option value="Mechanical Engineering">Mechanical Engineering</option>

<option value="Computer Engineering">Computer Engineering</option>

<option value="Robotics Engineering">Robotics Engineering</option>

<option value="Chemical Engineering">Chemical Engineering</option>

<option value="Engineering Management">Engineering Management</option>

<option value="Industrial Engineering">Industrial Engineering</option>

</select>

</div>

<button type="submit" class="button is-static">Select your Course</button>

</div>

Listing 5-23

Creating a Drop-Down Select Field

In Listing 5-23, we create a parent <div> and assign the field class to it. Then we create a control by assigning the control class to the child <div>. Within this child <div> we create another child <div> and assign the select class to it in conjunction with the is-fullwidth class. Then we create a <select> tag and assign a name to it.

Then, we create drop-down menu items using the <option> tags. For each <option> tag, we assign a value that is the name of the menu item. Once we are done, after the closing <div> element, we create a <div> element, which is the second child of the main <div> element at the start, and create a button and assign the is-static class to it.

The output of the code is a form field with a static button and drop-down. On clicking the drop-down icon, you can see the different fields in the drop-down menu, as shown in Figure 5-23.

../images/485437_1_En_5_Chapter/485437_1_En_5_Fig23_HTML.jpg — Figure 5-23
Dropdown menu items shown after clicking the drop-down icon

Now, if you want the drop-down to be shown directly without clicking the drop-down icon, you need to make a minor modification in the code as shown in Listing 5-24.

<select multiple size="10" name="Engineering courses">