👋 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. 🥰
The world is expected to grow 3.2 percent in 2015 and 3.7 percent next year after expanding 3.3 percent in each of the past two years, according to a Bloomberg survey of economists. China, the Philippines, Kenya, India and Indonesia, which together make up about 16 percent of global gross domestic product, are all forecast to grow more than 5 percent in 2015.
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:
- comp – short for component
- axn – short for action
Only comp is suggested to have a separate class name for CSS debugging purposes.
The syntax is:
List of Generic Class Names
- comp – component
- cr – container
- ct – content
- hr – header
- name – title or heading
- desc – description
- grp – group or parent of number of items
- item – part of a number of items
- accessible-name – official name
- friendly-name – custom displayed name
- nav – navigation
- axn – action
- notice – notification message
- datetime – time
- sep – separator, divider
- pred_label – (predicate) verb part of a label or phrase; e.g., in the phrase “Edit Entry”, “Edit” is the predicate
- subj_label – (subject) noun part of a label or phrase; in the example above, “Entry” is the subject
- prep_label – preposition
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.
Stages in Front-end Design
- Write the content in text format
- write the important information ahead of the less important (which comes first, an item’s name or its thumbnail?)
- think of it as words which will only be dictated by voice (like a screen reader)
- the information you are writing will be printed on paper (no images, only text in serif)
- only include images (icons, symbols) if they need to be translated or described in words, otherwise tackle during CSS stage
- e.g., should you write in text “cog icon” to represent it beside the “Settings” link?
- elements like <img> has the alt attribute which could contain a description of the image on display – this element, especially if a photo that supplements a text must be included with a <caption>
- Markup in HTML
- don’t use <div> or <span> (yet)
- if a text doesn’t match with any existing HTML element, use <p>
- for headings, use <h1> (change later when in context)
- add <a> for links and action elements
- always link up the web product’s name to the Home view
- related: HTML Outline
- separate objects and components with one vertical space (return)
- Add classes to elements
- start with generic class names (e.g., name, desc, axn, comp)
- Add HTML attributes
- HTML attributes are arranged by id, class, others
titleattribute to <a> elements accessed via tooltip; use it to display supplementary information
- Componentize the elements
- wrap the grouped elements in <div>generic name of components is “comp”
- provide for specific class names in this syntax: specific-name_generic-name for a name grouping, separate with a hyphen (-)
- underscore(_) separates the specific from the generic
- put comment tag at the end of the component using the specific name
Write the content in text format
HopScotch Champion of Content Structure
Markup in HTML
<h1> <a>HopScotch</a> </h1> <p>Champion of Content Structure</p>
Add classes to elements
<h1 class="name"> <a class="axn">HopScotch</a> </h1> <p class="desc">Champion of Content Structure</p>
Add HTML attributes
<h1 class="name"> <a class="axn" title="Go to Home">HopScotch</a> </h1> <p class="desc">Champion of Content Structure</p>
Componentize the elements
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 –>
comp is one of the standalone generic class names.
- don’t stress too much on class names – the important factor here is consistency
- the result is far from its final look since this component will still be put into context along with the site’s other components
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:
- updates in content structure
- improvements in standardization (element naming for HTML and CSS)
- development towards being “pluggable” both in WordPress platform and in CSS
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.