
👋 Oi, mga repapips, Brian Dys here! I love music, photography, and creative stuff like UX design and art. This is a place where I collect my thoughts and works. Apart all these, I’m Jaycelle’s better half and Bryce’s dad. 🥰
I’m currently researching on how to design the content structure of article bylines – that section wherein you see the author’s name and the date the article was published.
The byline on a newspaper or magazine article gives the date, as well as the name of the writer of the article.
Byline from Wikipedia
Chikka v6.2 is here – featuring Group Chat.
The main idea behind generic class names is to have a standard naming convention for common HTML patterns and attaching it to specific class names.
For example, here’s a simple HTML markup of Skip Link component:
<div class="comp skip-link_comp">
<a class="skip-link_axn" href="#content">Skip to content</a>
</div><!-- skip-link_comp -->
Notice that there are two generic class names attached to specific class names:
Only comp is suggested to have a separate class name for CSS debugging purposes.
The syntax is: specific-name_generic-name
Post in context: I am “refactoring” the existing HopScotch Free WordPress Theme . This is due to several improvements in standardization and content structure.
The example that I will be using is the most common element of web sites – the web site name and description. One encounters this in the form of web site logos and the usually the description is hidden from view.
Here are my notes as I go each step of the front-end design process.
title
attribute to <a> elements accessed via tooltip; use it to display supplementary informationrole
attributeHopScotch Champion of Content Structure
<h1> <a>HopScotch</a> </h1> <p>Champion of Content Structure</p>
<h1 class="name"> <a class="axn">HopScotch</a> </h1> <p class="desc">Champion of Content Structure</p>
<h1 class="name"> <a class="axn" title="Go to Home">HopScotch</a> </h1> <p class="desc">Champion of Content Structure</p>
Only generic names:
<div class="comp"> <h1 class="name"> <a class="axn">HopScotch</a> </h1> <p class="desc">Champion of Content Structure</p> </div>
The HTML markup of product-header_comp
with specific class names:
<div class="comp product-header_comp"> <h1 class="product_name"> <a class="product-name_axn">HopScotch</a> </h1> <p class="product_desc">Champion of Content Structure</p> </div><!– product-header_comp –>
Note that comp
is one of the standalone generic class names.
—
As of this moment, HopScotch has gotten 1,470 downloads since it launched on November last year – and for that, thank you and I hope this theme has been useful for your web sites.
I am currently refactoring HopScotch for the following reasons:
This endeavor will affect current users of this theme especially if you’ve customized it directly or through a child theme.
My only suggestion is when the update comes is to update to version 3.
Discovery has always been part of our experience in using web sites and apps. They could be in any form:
…and the list goes on.
One UI element that helps us in most discovery processes is the tooltip. Users of Windows or Mac have surely encountered it when you hover your mouse cursor on certain items in your computer desktop (maybe by chance or out of curiosity if you don’t want to click something). It is in the form of a box with text label or description.
Commenting is disabled.