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 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.

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.

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

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.

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

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.

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.

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.

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.

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.

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.

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

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.

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.

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

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

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.

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.

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

<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.

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.

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.

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

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.

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

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.

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 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.

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.

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:

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.

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.

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.

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.

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:

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.

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.

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.