👋 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. 🥰
Imagine this ombre cake:
It looks yummy and it has layers.
It is similar with active elements – they must have three levels for the purpose of CSS.
The first level is the textual element itself. The second level holds the function of the active element (e.g., <a> or <button>). The third level is for positioning. Initially, it appears that the default way to put it is this way:
And since this is for the purpose of CSS, we must implement Framing for the textual element and for positioning. These frames will act as hooks for CSS. Look at this example:
<div> <!– Frame for positioning –>
<span> <!– Frame for textual element –>
Here’s a demo to show a floated button:
Oh and by the way, here’s an ombre potato:
Similar to UI State (which only has active or inactive), UI Condition can be anything to describe the condition of an object.
To denote that an article entry does not have content, we add the class
ui-cond__entry--blank which translates to “the UI condition of entry is blank”.
<div class="ui-cond__entry–blank"> … </div>
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
There are several blog entries in Design DriveThru about the practical application of HTML and CSS, simple ideas as well. In order to put these entries in a clearer light, there needs to be specific categories where they fall under. This will put things in context so that the reader would know to which extent the entry applies to him or her.
For example, as we talk about Notes on SASS File Structure, how does one try to absorb this concept? You might ask if this entry is important for you as a web or front-end designer. The answer can be made easier by categorizing the topics.
Think and Act
The first categories deal with a particular web concept as being either of the two:
Theory deals with general principles.
Theory is a contemplative and rational type of abstract or generalizing thinking, or the results of such thinking. Depending on the context, the results might for example include generalized explanations of how nature works.
An example of a theory is CSS Principles.
Technique on the other hand, deals with practical application.
A technique is a procedure to complete a task.
An example of Technique is Recreating Spotify’s Album Cover.
There could also be an entry with both Theory and Technique as its categories, for example: Using <body> to Define UI States and Types. This entry talks about principles and demonstrates how to apply it.
Brochure and Kiosk
The second part of categories is about the web being generally split into two – it is either:
- web as a document or web as an application
- web as hypertext system (information-oriented) or web as software interface (task-oriented)
The latter is from The Elements of User Experience by Jesse James Garrett.
Web Documents deals mainly with information like Wikipedia or a WordPress blog. This is the primitive beginnings of HTML wherein information are linked to other information via anchor elements.
Web Applications deals mainly with services that foster activities and enable the users to accomplish specific tasks. Good examples range from Google Sheets to InVision.
This category set could be mutual like Flickr, for example – it is a webapp yet it deals with images and videos with rich information.
I would be using these categories to contextualize entries mostly discussing HTML because each web object, whether a simple web document or a webapp deals with HTML.
Hopefully this categorization technique will be useful in mapping the context of Front-End Design entries.
Previously, I’ve discussed a class naming convention in the form of:
In this manner we are using a UI State class located up in the DOM tree – particularly in the
body to manipulate different UI elements under it.
Take this as an example: in a site’s header, both the main navigation and search form are located.
<header> <h2 class="accessible-name">Header Content</h2> <nav class="main-navigation">…</nav> <form class="search-form">…</form> </header>
What benefit do we get in having a global
class located higher in the DOM tree? It lets us control different parts of the UI depending on the site’s or app’s UI Type or UI State.
It is important to reserve the highest element you can put a class on – which is
html (for pertinent class names), thus, the second highest element we could attach a
class attribute to is
Going back to our example, we would use the following UI State class to define the state of the search form:
body class, in words, translates to “The UI State of the Search Form is Active”.
Now, whenever the search form is active, you can already manipulate the main navigation based on that state.
Take a look at the demo on CodePen:
See the Pen Using <body> to Define UI States and Types by Brian Dys Sahagun (@briandys) on CodePen.