
Hi, I’m Brian Dys — a photographer from the inside looking out · a composer entangled in electronic music · a UX designer · a spouse, a parent, & everything in between.
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.
Source: The 20 Fastest-Growing Economies This Year on Bloomberg.com
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:
[html]
<div class="comp skip-link_comp">
<a class="skip-link_axn" href="#content">Skip to content</a>
</div><!– skip-link_comp –>
[/html]
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
– adjective
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.
[html]
HopScotch
Champion of Content Structure
[/html]
[html]
<h1>
<a>HopScotch</a>
</h1>
<p>Champion of Content Structure</p>
[/html]
[html]
<h1 class="name">
<a class="axn">HopScotch</a>
</h1>
<p class="desc">Champion of Content Structure</p>
[/html]
title
attribute to <a> elements
role
attribute[html]
<h1 class="name">
<a class="axn" title="Go to Home">HopScotch</a>
</h1>
<p class="desc">Champion of Content Structure</p>
[/html]
Only Generic Names:
[html]
<div class="comp">
<h1 class="name">
<a class="axn">HopScotch</a>
</h1>
<p class="desc">Champion of Content Structure</p>
</div>
[/html]
The HTML markup of product-header_comp
with specific class names:
[html]
<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 –>
[/html]
Note that comp
is one of the standalone generic class names.
—
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.
The Elements of Style Sheets aims to categorize CSS properties into three elements: Nature, Theme, and Layout. It could help a front-end designer’s mental model of building the CSS on top of HTML.
Nature refers to the individual characteristics of an element.
Theme refers to the visual design of an element.
Layout refers to the relationship of elements with one another.
Update
As an example, after building the Content Structure in HTML, the front-end designer, in a mobile-first approach, will focus on styling individual elements – by their Nature first (usually, width is set at 100%). And then style according to Theme and lastly, as the viewport goes wider, the front-end designer styles the Layout.
—