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.
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:
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.
<div class="columns">
<div class="column">
First column
</div>
<div class="column">
Second column
</div>
<div class="column">
Third column
</div>
<div class="column">
Fourth column
</div>
</div>
Listing 2-2
Basic Column Structure
Listing 2-3 shows an example of how columns are displayed on a mobile and desktop screen.
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.
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.
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.
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>
</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 fromcat ipsumwill 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.
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.
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.
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.
Figure 2-3
Output on a mobile site
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).
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.
Figure 2-5
Output on a mobile site
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>
</div>
Listing 2-6
Implementing Desktop-Like Column Structure for Mobile Screens
The is-mobileclass 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.
Figure 2-7
Output on a mobile site
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-multilineclass (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.
In Figure 2-9, the columns occupy the defined width and shift to the second row after the 12-column width is surpassed.
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-gaplessclass in conjunction with the columns container element (Listing 2-8).
On comparing Figure 2-10 with Figure 2-9(both have the same content and code except for the implemented gapless classin 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.
<div class="columns">
<div class="column">
<p style="background-color: Gainsboro">cat ipsum dolor sit amet, eos, nostrum amet, sos em... </p>
<div class="columns is-mobile">
<div class="column">
<p style="background-color: Wheat"> cat ipsum dolor sit amet, eos, nostrum eoeamet, sos em... </p>
</div>
<div class="column">
<p style="background-color: Gold"> cat ipsum dolor sit amet, eos, nostrum eoeamet, sos em... </p>
</div>
</div>
</div>
</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-mobileclass 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-gaplessclass for the secondary columns container, which includes the nested columns.
Figure 2-11
Nested columns
The output with no gap between the nested columns is shown in Figure 2-12.
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).
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-quarterclass 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.)
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)
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-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.)
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-vcenteredclass to the columns. Let’s see this in the code example in Listing 2-12.
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-onlyclass, 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-desktopclass, 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 theis-hidden-mobile class).
The output of the code on mobile, tablet, and desktop screens, respectively, is shown in Figure 2-17.
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.
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-italicclass, 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.
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.
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.
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.
