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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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

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.

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.

In Figure 5-15, we can see that the three buttons are square, irrespective of the size of the button or 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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

In Listing 5-24, the code is almost the same, but we use an attribute, multiple size, and assign the value 10 to it, meaning it will display ten items in the drop-down without the need to click the drop-down icon.

In Figure 5-24, the menu items in the drop-down are shown by default without the need to click the drop-down icon.

Now that we have seen several form components, let’s build a Sign-Up form, which you come across in real-time scenarios.

In Listing 5-25, we create the heading for the form using the <h3> tag and name it Sign Up.

Then, we create the Name form field the usual way: we create a <div> element and assign the field class to it. Then, we create a label by using the label class with the <label> tag. Next we create a child <div> and assign the control class to it. Then we define the <input> tag and assign the input class and type value as text along with a placeholder.

Next, we create the Email form field. Just like the Name form field, we create a <div> element and assign the field class to it. Then we create a label called Email. But here, once we define the Email label, we create a child <div> and assign the control class in conjunction with the has-icons-left and has-icons-right classes. This feature will place icons to the left and right as defined later in the code.

Then we create an <input> tag and assign the input class in conjunction with the is-danger contextual color; we define the type value as email here. Then we define two icons. We create the mail icon using the fas fa-envelope class within the first <span> tag. We also assign the is-small and is-left class to it; this will result in a smaller size icon and pull the icon to the left of the form field. Next, we define another icon using a different <span> tag and assign the is-small and is-right classes to it. The icon here would be an exclamation triangle. As defined, the icon will be of smaller size and pushed to the right of the form field. Then we create a paragraph <p> element and assign the help is-danger class to it along with the message “Do you mean [email protected].”

Similarly, we create another Email field but we do not define a label for it. The placeholder here will be Re-enter your Email. The rest of the code is the same as that of the Email field.

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

Then we define the Password section. Here we use similar code as that of the Name form field. We create a field container and define the label as Password. Then we create a <div> element and assign the control class to it. We create an <input> tag and assign the input class to it. The type here would be text, and thereon we define the placeholder text.

Similarly, we create another Password just like the preceding password form field for the purpose of re-entering the password.

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

In Listing 5-27, we create a parent <div> and assign the field class to it. Then we create a child <div> element and assign the file container class to it. We assign the primary contextual color to it by using the is-primary class in tandem with the file class. Next, we define the label using the file-label class, the actual interactive and clickable part of the element. Then we define an <input> tag and assign the file-input class to it. We define the type as file and name as resume. Then we create a parent <span > tag and assign the file-cta class to it, which will enable the upload call-to-action. Then, we create a child <span> and define the file icon. For this, we assign the file-icon class to the child <span> element. The child span element contains the code for the Font Awesome upload icon. Then we create the second <span> child element, to which we assign the file-label class and the label as Click-to-Upload.

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

In Listing 5-28, we create two radio buttons and a checkbox. Initially, we create a parent <div> element and assign the control class to it. Then we create a <label> and assign the radio class to it. Then we define the <input> tag, to which we assign the radio type attribute. We define the label name as Male. Next, we create the second radio button similar to the first one, but here we define the radio button label name as Female.

Moving forward, we create a checkbox. We create a parent <div> and assign the field class followed by a child <div> element with the field-body class. Then, we create a child <div> element within and assign the field class to it. We define a <div> with the control class followed by a label. The label class is checkbox and the input type is checkbox. We define the label as Subscribe to our Newsletter.

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

The output of the complete code after adding the Submit and Cancel buttons is shown in Figure 5-29.

Summary

In this chapter, we learned about Bulma’s CSS components that will help build complex web sites with ease. These components adhere to the DRY (Don’t Repeat Yourself) paradigm. The common design elements can be reused multiple times, maintaining the concept of clean coding. In the next chapter, we will look at the road ahead for CSS frameworks and the world of possibilities opening up as web design is increasingly leaning toward the digital design paradigm.