W3.CSS Succinctly®
CHAPTER 15
W3.CSS Example Code
We’ve covered a lot of classes and examples in this book. In this chapter, we will explore in detail one of the examples from the W3.CSS site. The email template is a good, simple demo of a responsive website for a mail client. Figure 56 shows the sample template.
Figure 56: Email template
Head section
The <head> section of most templates will look very much the same, including the W3.CSS style sheet, possibly using an external web font.
Code Listing 72
<!DOCTYPE html> <html> <head> <title>W3.CSS </title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=RobotoDraft"> |
In this example, we are using a Google font called RobotoDraft, and linking it into our website. While the use of external web fonts is optional, you can improve the overall look of the site easily with minimal code changes.
Font Awesome
Font Awesome is a very popular library of icons, defined as CSS classes. You can explore the library here.
To add Font Awesome to the site, the following line is added to the <head> section.
Code Listing 73
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudfare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> |
To use the fonts, you simply add the class name to any element, and the appropriate icon will appear. The following example shows some Save and Cancel buttons taking advantage of the Font Awesome library.
Code Listing 74
<button class="fa fa-save w3-text-green w3-xlarge w3-padding"> Save changes</button> <button class="fa fa-times w3-text-red w3-xlarge w3-padding"> Cancel</button> |
This produces the buttons shown in Figure 57.
Figure 57: Font Awesome buttons
HTML entities
Throughout the course of this book, we also took advantage of some HTML entities to add small icons to a few of our examples. Some useful HTML entities are:
- ☰ Hamburger menu
- 📅 Calendar
- 🔍 Search icon
- ✎ Edit pencil
- જ Cancel icon
- ઎ Scissors
- ☎ Telephone
- ⦻ Circle with X
While HTML entities are easy to use, not all entities will work with all fonts. Be sure to test your entities against your website font or use the Font Awesome library, which imbeds its own font.
Setting the font family
The final step when using a web font is to adjust the styles on various elements to use the new font family. The final piece of code in the <head> section does that.
Code Listing 75
<style> html, body, h1, h2, h3, h4, h5, h6 { font-family: "RobotoDraft","Roboto", sans-serif; } .w3-bar-block, .w3-bar-item { padding:16px; } </style> |
Body section
The body section consists of a sidebar menu for navigation among the email folders (the inbox, sent items, drafts, and deleted items). Note that there is no implementation code for these folders; it would typically be an Ajax call to gather all the items within the folder and display them.
Sidebar
The following code creates the sidebar navigation menu (some classes are removed for readability).
Code Listing 76
<nav class="w3-sidebar w3-bar-block w3-collapse w3-card" id="mySideBar" style="width:200px;"> <a href="#" onclick="w3_close();" title="Close side menu" class="w3-bar-item w3-button w3-hide-large">Close <i class="fa fa-remove"></i></a> <a href="#" class="w3-bar-item w3-button w3-left-align" onclick="document.getElementById('id01').style.display='block'"> New Message <i class="w3-padding fa fa-pencil"></i></a> <a id="myBtn" href="#" onclick="myFunc('Demo1');" class="w3-bar-item w3-button"> <i class="fa fa-inbox w3-margin-right"></i>Inbox <span class="w3-tag w3-circle">3</span> <i class="fa fa-caret-down w3-margin-left"></i></a> <a href="#" class="w3-bar-item w3-button"> <i class="fa fa-paper-plane w3-margin-right"></i>Sent</a> <a href="#" class="w3-bar-item w3-button"> <i class="fa fa-houeglass-end w3-margin-right"></i>Drafts</a> <a href="#" class="w3-bar-item w3-button"> <i class="fa fa-trash w3-margin-right"></i>Trash</a> </nav> |
Although the code uses several classes and structures, there are a few items worth noting. First is the w3-hide-large class on the Close sidebar menu item. This indicates that the Close option will not appear on larger devices, where it’s assumed there is enough screen room for both the sidebar menu and the email contents.
Compose new mail
When the user clicks on a new email, a modal dialog will be displayed to get the information for the email.
Code Listing 77
<!-- Modal that pops up for new message --> <div id="id01" class="w3-modal"> <div class="w3-modal-content w3-animate-zoom"> <div class="w3-container w3-padding w3-red "> <span onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-right w3-xxlarge"> <i class="fa fa-remove"></i> </span> <h2>Send Mail</h2> <!-- Form elements... --> </div> </div> </div> |
Notice that the pop-up dialog uses the zoom animation to appear on the screen, and the header section provides the ability to close the dialog.
The button code shown in the following code snippet will close the dialog box once the user either sends or cancels the email.
Code Listing 78
<a class="w3-button w3-red" onclick="document.getElementById('id01').style.display='none'"> Cancel <i class="fa fa-remove"></i></a> <a class="w3-button w3-right" onclick="document.getElementById('id01').style.display='none'"> Send <i class="fa fa-paper-plane"></i></a> |
Summary
The templates and example code on the site are a great way to see the framework with some working code examples.
- 1800+ high-performance UI components.
- Includes popular controls such as Grid, Chart, Scheduler, and more.
- 24x5 unlimited support by developers.