September 2021

Brian Dys

Creative Leadership

About Snippet

Brian Dys

Hey there! Brian Dys here — I’m a visual and visceral person at heart. Ever since my mom lent me her old film camera, I fell in love with photography. All of my creative musings were exemplified by my second brain, the computer. This journey is a topsy-turvy ride of creative pursuits — from electronic music to UX design.

I enjoy every dull and wild moments of it — yes, this life of mine that I share with a woman named Jaycelle and a boy named Bryce. Take a peek into my kaleidoscope!

The Ride Category Archive Index
351

Sit back, put your feet up and enjoy the ride.

Categories

Structural Classes

04:51:33
04:51:33
Brian Dys Avatar Brian Dys
0
Comment

Structural Classes are classes that denote hierarchy in HTML tags particularly in div tags.

Example: Structure of a Component

[html]
<div class="comp">
<div class="cr">
<h class="accessible-name"></h>
<div class="ct">
Content
</div>
</div>
</div>
[/html]

Please note that h denotes a heading tag that varies from 1 to 6 depending on the HTML 4 outline.

The Structural Classes in this example are the following:

  • comp (component)
  • cr (container)
  • accessible-name (heading or official name)
  • ct (content).

Maximum Number of Classes

While building the structure, we will put generic and specific class names into each area. The suggested maximum number of classes to add into a single div is two (2).

The first class to be added is the generic class – which is basically, what the component is. The second class – if available – is the category it belongs to – which will become the specific class – this is usually inherited from its parent.

Example of Generic Class

In this example, we’ll use the Author Component.

The Author Component is part of an article byline wherein the name of the author is indicated (along with the date the article was published).

Name of component (generic class): Author
Category of component (specific class): Article Entry

Using this information, we can plot the classes into the structure.

[html]
<div class="comp author_comp article-entry-author_comp">
<div class="cr author_cr article-entry-author_cr">
<h class="accessible-name"></h>
<div class="ct author_ct article-entry-author_ct">
Content
</div>
</div>
</div><!– article-entry-author_comp –>
[/html]

This structure now features the following:

  • a generic class (author_comp) which will be used in any instance of author in the HTML document
  • specific class (article-entry-author_comp) which could be used to directly select the component (e.g., for use in CSS)

Other Guidelines

The objects inside ct (content) could simply have their generic classes – just like with the heading tag which only has accessible-name as its class.

Categories

Introducing UI View and UI Container

14:28:34
14:28:34
Brian Dys Avatar Brian Dys
0
Comment

There’s a need for web pages to be defined in which view it is in and in which type of container the whole view is in.

In this regard I am using ui-view--<view name> and ui-cr--<container name> (cr short for container).

UI View

UI View is the representation of the totality of the page or screen the user is in. Common examples of this is the Sign In screen of web apps, Dashboard, or Home views.

Example: If you are on the Terms & Conditions page or a web site, you could classify it as:

<div class="ui-view--terms-conditions">

UI Container

UI Container, on the other hand, is the type of user interface that contains the components or even the whole view (in this case, it is usually called screen or page).

Example: Using the example above, the page is contained in some sort of container – it is usually contained in a page or screen. For the sake of being device-agnostic, I would define it as screen – it being displayed thru a screen.

<div class="ui-cr--screen">

Other types of UI Containers are:

  • screen
  • dialog box
  • drawer
  • panel
  • pop-over
  • overlay

Erratum

In my entry, UI Type and State Class Naming Convention, I used UI Type to define a dialog box – while in this entry, I used dialog box as one of the standard UI Containers.

I am now using UI Type to define a specific UI – something that one invents and not a standard in the community. For example, you’ve created a three-column panel that slides one by one – you could dub it as “three-col-panel” thus <div class="ui-type--three-col-panel">

UI Container is a modifier – once you’ve added this class to a component, it modifies its standard structure to take the form of the said container. The same can be said for UI Type, but what it modifies is the whole view, including the containers. Simply put, you may be in Terms & Conditions view, and while it is contained in a screen or page, once you’ve added a three-column-panel UI Type, the layout transforms into a three-column type of layout.

Categories

Philippines Is on a Roll

10:44:52
10:44:52
Brian Dys Avatar Brian Dys
0
Comment

The 20 Fastest-Growing Economies This Year

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

Categories

Generic Class Names and IDs

17:46:17
17:46:17
Brian Dys Avatar Brian Dys
0
Comment

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:

  • 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: specific-name_generic-name

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
      • nav-grp
      • nav-item
      • axn – action
      • axn-grp
      • axn-item
      • notice – notification message
      • datetime – time
      • sep – separator, divider
      • label
      • 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
      • verb_label
      • noun_label
      • adj_label
      • form
      • field
      • field_cr
      • field-axn
      • field-axn_cr

– adjective

    • colon_label – colon
    • comma_label
    • info

Standalone Generic Class Names

  • comp
  • nav
  • axn-comp

List of IDs

  • comments
Categories

Notes in Front-end Design

15:03:36
15:03:36
Brian Dys Avatar Brian Dys
0
Comment

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

HTML

  1. 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>

    [html]
    HopScotch
    Champion of Content Structure
    [/html]

  2. 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)

    [html]
    <h1>
    <a>HopScotch</a>
    </h1>

    <p>Champion of Content Structure</p>
    [/html]

  3. Add classes to elements
    • start with generic class names (e.g., name, desc, axn, comp)

    [html]
    <h1 class="name">
    <a class="axn">HopScotch</a>
    </h1>

    <p class="desc">Champion of Content Structure</p>
    [/html]

  4. Add HTML attributes
    • HTML attributes are arranged by id, class, others
    • add title attribute to <a> elements
      • accessed via tooltip; use it to display supplementary information
    • add 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]

  5. 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

    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.

—

Conclusion

  • 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

Related Reading