Comic Director - Let's Build a Comic Director Hub Tile

Building graphical elements or objects in your web applications requires a thorough understanding of the fundamentals of web design.  Making proper use of HTML elements and building descriptive class names for your CSS will help you be successful in your coding attempts, and allow you and other developers to build, review and edit your web and application code with ease. This lesson will walk you through the process of building one of the more recognizable graphic elements in Comic Director, the hub tile, while demonstrating these web design essentials.

Comic Director Application Hub Tile

HTML Framework

Begin building your Comic Director hub tile by writing a solid, HTML framework to layout the tile’s basic structure. HTML5 gives you more element options to choose from, and it is important that the proper ones are selected.  The developers of Comic Director have chosen the <figure> element as it is most commonly used to house images and media, and provides the closest description of the hub tile. The <figcaption> element is also an appropriate choice to use in conjunction with image elements that include captions, as is the case with the hub tile. The <small> element was also intentionally used for its strong semantic quality and will house the “Author” text, which also happens to be the smallest text element in the caption block.

<figure>
       <figcaption>
 
             <div>
                   <span></span>
                   <span></span>
             </div>
 
             <div>
                   <h2></h2>
                   <small></small>
             </div>
 
       </figcaption>
</figure>

CSS Classes

Now that the HTML structure is in place, it is time to begin adding CSS class names to the markup. A good rule to follow when coming up with class names is to try and represent what you use the element for and avoid trying to describe what the element looks like. Simple, description based class names can have a high impact over the course of a development project. Hours can be saved by reusing CSS class names to style other elements in your applications. In this example, the hub tile caption background colors and the comic style black border are both style candidates to reuse for other elements in the application.

Comic Director developers chose several class names which will later be assigned style properties that give the tile its color, padding, border and font styles. The following class names were created at this stage:

  • home-tile
  • comic-border
  • comic-title
  • meta
  • meta-title-bar
  • meta-detail
  • author

Both home-tile and comic-border are applied to the <figure> element, providing description and implying function. The other class names follow suit and are applied to the <div> elements inside of the <figcaption> element.

<figure class="home-tile comic-border">
  <figcaption class="meta comic-border">
   
    <div class="meta-title-bar">
      <span class="likes flex"></span>
      <span class="views flex tr"></span>
    </div>
   
    <div class="meta-detail green-bg">
      <h2 class="comic-title"></h2>
      <small class="author"></small>
    </div>
   
  </figcaption>
</figure>

CSS Styles

Now that the HTML has been written, and CSS classes have been assigned to the markup elements, styling of the hub tile can begin.

The home-tile class will establish the size of the outer tile box, font-size and background position. Multiple style properties are defined within the class, which helps to reduce the amount of code needed. The meta-tile-bar and meta-detail classes create the padding and italic font-style for text in the caption box element.

.home-tile {
  width:500px;
  height:280px;
  position:relative;
 
  font-size: 1rem;
 
  margin:2rem 3rem;
  box-sizing:border-box;
 
  background-size:105% auto;
  background-position:center center;
} 
 
.meta-title-bar {
  padding-bottom:5px;
  display:flex;
  font-style:italic;
}
 
.meta-detail {
  padding:5px;
  color:white;
}

More CSS rules define the colors used in the caption background. In this example green is used, but the actual Comic Director application dynamically styles the background colors of the caption box at run time depending on how that particular tile is featured in the main Comic Director hub. Creating these micro-classes can makes it easier to reuse background color styles for other elements inside the web application.

.blue-bg {
  background-color:hsl(200, 50%, 60%);
}
.green-bg {
  background-color:hsl(80, 60%, 40%);
}
.red-bg {
  background-color:hsl(350, 80%, 40%);
}

And finally, the last portion of CSS is written creates the comic style black border seen around the main tile box and the caption box. The developers have assigned a three pixel thick border, and applied some shadowing. Since both the main tile box and the caption box use the same border style, this CSS code needs only be written once.

.comic-border {
                border:3px solid #222;
                box-shadow:5px 5px 0 #222;
                border-radius:3px 0;
}
.comic-border:before,
comic-border:after {
                                  content:" ";
                                  position:absolute;
                                  width: 0;
                                  height: 0;
                                }
.comic-border:before {
                                  border-left: 4px solid transparent;
                                  border-right: 4px solid transparent;
                                  border-top: 5px solid #222;
                                  bottom:-8px;
                                  left:-3px;
                                }
                                .comic-border:after {
                                  border-left: 3px solid transparent;
                                  border-right: 5px solid transparent;
                                  border-bottom: 5px solid #222;
                                  top:-3px;
                                  right:-8px;
                                }

Even a simple element like the Comic Director hub tile requires effort and careful planning. A key point to remember when creating layout objects is to take your time setting up a framework using descriptive HTML elements. Using the proper elements and class names will strengthen your app and streamline your workflow process.

Learn more about web application development at the Intel® Developer Zone. Check out the new Intel® HTML5 Development Environment and look at code examples at the Intel® HTML5 Playground.

Intel® HTML5 Development Environment:

The Intel® XDK is an HTML5 powered mobile application development tool. With it, you can create, debug and build customized, robust HTML5 apps in hours, and the XDK runs on either Mac or PC platforms.

software.intel.com/html5tools

Intel® HTML5 Playground:

The Intel HTML5 Playground provides you with a web based code editor, a live application preview window, and a library of sample code and snippets to use as starting points.  Anything you that you create, can be shared using a permalink.

software.intel.com/appup/html5-playground

Per informazioni complete sulle ottimizzazioni del compilatore, consultare l'Avviso sull'ottimizzazione