Tag: HTML

Generic Class Names
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>
```
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
- colon_label
- comma_label
- info
2015-02-11
Notes in Front-end Design
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>
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)
3. Add classes to elements
  - start with generic class names (e.g., name, desc, axn, comp)
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
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
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 –>
```
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
2015-02-11
Categorizing Topics of Web Concepts
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
- Technique
Theory

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.
Source: Wikipedia

An example of a theory is CSS Principles.

Technique

Technique on the other hand, deals with practical application.

A technique is a procedure to complete a task.
Source: Wikipedia

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.

Webdoc

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.

Webapp

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.

Conclusion

Hopefully this categorization technique will be useful in mapping the context of Front-End Design entries.
2014-12-02
Using to Define UI States and Types
Previously, I’ve discussed a class naming convention in the form of:
```
<generic>__<identifier>–<specific>
```
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>
```
How would you be able to affect the main navigation depending on the state of the search form if its class is only confined within its container? The answer might be “thru JavaScript” – undeniably, we would need JS in this topic but only for manipulating class names. The trick lies in putting the UI Type or UI State class in a place wherein both main navigation and search form are under it.

Why <body>?

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

Going back to our example, we would use the following UI State class to define the state of the search form:
```
<body class="ui-state__search-form–active">
```
The 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.
2014-11-14
Press Time: Using CSS Transform to Nudge a Button

Two of the ways in which you can show an illusion of a button being pressed are: darkening the background-color and nudging its vertical position.

See the Pen Press Time by Brian Dys Sahagun (@briandys) on CodePen.

It is important to provide for a hint when a user activates an element in your user interface (in this example, a button). The feedback assures the user that the element “responds” to his action.

The advantage of using transform: translateY is that it does not affect the elements around it (unlike using margin or padding).

2014-09-03
The Separation of HTML and CSS
An illustration of HTML on the left and CSS on the right.

In its basic sense, HTML is standalone. It is independent from CSS especially from the perspective of screenreaders and search engine crawlers. This goes to show about the importance of semantics and content structure in the HTML markup.

In this regard, I strongly advocate for the manipulation of the style sheet instead of the manipulation of the HTML markup.

Consider the scenario wherein you, as the front-end designer, have only 3 chances in having control over the HTML markup and on the other hand, an unlimited number of revisions and updates on the visual design aspect of the project.

This indeed is a far-fetched situation – but it definitely will get us creative in setting up the HTML markup or in planning ahead. This scenario encourages us to use semantic names in the class attribute of the HTML markup as opposed to peppering it with presentational class names which are heavily tied up with the style sheet.

In this basic HTML and CSS tutorial, we are going to demonstrate the following:
- the separation of HTML (content structure) and CSS (visual design)
- how to position a secondary element (like a graphic element or a label) thru CSS position: absolute and padding
And some disclaimers:
- while it discusses semantics, it does not tackle accessibility attributes (say, ARIA)
- it does not show any SEO / screenreader test results regarding the benefits of an HTML markup with intentions on content structure or semantic HTML markup
- it only translates into HTML and CSS a specific component (from a much complicated whole), although the HTML and CSS process remains the same if applied to a whole
Separation of HTML and CSS

HTML markup is intended for chunks of text content to have meaning for web browsers (screenreaders and search engine crawlers too, among others that I am not aware of) so that they could very well translate the content into something that people would understand easily.

The text content along with its HTML markup must stand alone without the CSS layer. The content structure must remain intact and must be established before fully considering the visual design. Imagine writing a document in rich text format wherein you could create headings, lists, etc.

This separation prevents the compromise of the content structure. For example, in a visual design mock-up it is shown that the navigation is located on top of the brand logo – in the HTML, should the author be putting the navigation markup first before the brand name markup or vice versa?

In web design, it is not our ultimate goal to only replicate the visual design mock-up using HTML and CSS. While it is important to achieve visual quality, there’s an optimal approach in doing it while adhering to HTML’s semantic intentions. And semantics is the way to properly communicate with search engine crawlers and screenreaders. And of course, ultimately the people to whom the information is served.

The Example

The “Next Post” and “Previous Post” links are common in blog websites. Sometimes they also contain the article titles. Here’s a sample screenshot from PetaPixel.

Step 1: Establish the content structure

Let’s say we want to show the article titles along with their respective labels; the raw content would follow this structure:
```
Previous Post: Previous article title
Next Post: Next article title
```
We give importance to the previous article that’s why it’s on top. But if our intention is for the reader to read forward to newer posts, we put the next article on top.

Step 2: Markup using HTML
```
<label>Previous Post:</label> <a>Previous article title</a>
<label>Next Post:</label> <a>Next article title</a>
```
Marking up in HTML involves semantics – meaning, assign the HTML element that conveys the meaning of that content. Sometimes it is objective and sometimes it depends on the HTML author’s intention.

In our example, the objective nature of “Previous Post:” is that it is a label and it is also our intention – for it to be a simple text label that’s why we marked it up by the HTML label tag. For the article title, our intention is for it to be a link, so we marked it up by the HTML a tag.

But since the label tag is intended for form elements, we choose another HTML tag that could convey the label meaning. Unfortunately, there isn’t any other HTML element intended for labels outside of forms. Here will come in handy, the generic inline tag which is span. Only use it as a last resort if you can’t match the content with its semantic HTML tag.
```
<span>Previous Post:</span> <a>Previous article title</a>
<span>Next Post:</span> <a>Next article title</a>
```
Step 3: Put the proper HTML attributes
```
<span class="label">Previous Post:</span> <a href="#">Previous article title</a>
<span class="label">Next Post:</span> <a href="#">Next article title</a>
```
Since span is a generic element, we must put a class attribute with a class name to make it semantic.

Step 4: Label the component
```
<span class="label">Post Navigation</span>
<span class="label">Previous Post:</span> <a href="#">Previous article title</a>
<span class="label">Next Post:</span> <a href="#">Next article title</a>
```
Consider these links as one control – a type of navigation that aids the reader to navigate through old and new articles. In this regard, we could label it “Post Navigation”.

Step 5: Check the HTML document in a web browser

CodePen Embed Fallback

Remember about the separation of HTML and CSS? Apart from giving importance to the content structure (the arrangement of content according to its importance from top to bottom), we should also give importance to the bare HTML document that is displayed in the web browser.

Does the content displayed conveys the content structure? Does it show hierarchy of information? Or the very least, is it readable? One could argue that it is readable – although we could further improve its readability by further improving its sematics.

Step 5: Level up the semantics

We will be adding several HTML tags not to “fix” the layout of what the browser displays but to be more semantic which in turn, positively affects the way the content is displayed and laid out in the web browser.
```
<div class="post-navigation">
    <span class="label">Post Navigation</span>
    <ul>
        <li><span class="label">Previous Post:</span> <a href="#">Previous article title</a></li>
        <li><span class="label">Next Post:</span> <a href="#">Next article title</a></li>
    </ul>
</div>
```
Here comes the importance of knowing if an HTML element is block-level element or an inline-level element. To simply put, block-level elements simply block off the entire width of the space it occupies while inline-level elements could be joined together on a line – just like in our example on Step 5.

So, basically, span is an inline-level element, as well as a that’s why they are displayed all on one line.

On using <div>

Use div to contain components or content when there’s no appropriate HTML elements that match. Another thing is div provide for the flexibility to nest or contain any kind of HTML element unlike p, HTML standards does not allow it to contain a div, for example.

On using <p>

Personally, I would use p or the paragraph tag as a substitute for div as a block-level element. This is OK for simple text content.

On using <ul>

ul stands for unordered list. I intend to treat the previous and next content to be a list of actions. Though one could also simply intend to treat them as they are, like:
```
<div class="post-navigation">
    <p class="label title">Post Navigation</p>
    <p class="previous-action"><span class="label">Previous Post:</span> <a href="#">Previous article title</a></p>
    <p class="next-action"><span class="label">Next Post:</span> <a href="#">Next article title</a></p>
</div>
```
But I prefer using ul as it conveys structure.

Step 6: Check the HTML document in a web browser

CodePen Embed Fallback

That’s more readable, right? While its underlying markup wasn’t constructed to convey layout but meaning.

Step 7: Pre-CSS – classify HTML elements

Now that we got it going for us in terms of readability, we can now proceed to setting-up our HTML markup for CSS considerations.

While the HTML markup of the example above is OK on its own, we must remember that working with CSS requires us to easily pinpoint or target HTML elements directly or at least using fewer selectors, otherwise it would be very difficult to style such elements. We could achieve this by naming HTML elements thru the class attribute. And these attribute values we will use as selectors to pinpoint the HTML element.
```
<div class="post-navigation">
    <p class="label title">Post Navigation:</p>
    <ul class="action-list">
        <li class="previous-action"><span class="label">Previous Post:</span> <a href="#">Previous article title</a></li>
        <li class="next-action"><span class="label">Next Post:</span> <a href="#">Next article title</a></li>
    </ul>
</div>
```
Here, we specifically classified “previous-action” and “next-action” so that we could easily pinpoint it during the CSS phase. Of course, apart from CSS considerations, this approach is an added semantics to our HTML document because apart from marking up the content as a list, we specified what type of content are contained within each list item.

At this point, I wouldn’t say that classifying each HTML element is purely for semantic purposes only because we are already transitioning towards the CSS phase, thus pre-CSS.

Watch our for the second and last part of this tutorial tomorrow wherein we will demonstrate that CSS could simply transform the content displayed top to be laid out at the bottom (or anywhere else).
2014-08-07
I Agree to the Terms of Agreement

A while ago, I was connecting my HTC phone to Mac and it needed a piece of app to do so. Of course, there’s a requirement to agree to something I seldom read.

My behavior is to press on the label “I agree to the terms of the license agreement” instead of on the checkbox hoping that this will also tick the box.

But nothing happens because the label is a mere label unconnected from the form element (checkbox).

How do we make it easier for the user?

We must provide an action whether the user’s behavior is to press on the checkbox or on the label – the box should toggle.

(more…)

2014-06-13
Recreating Spotify’s Album Cover

Ever use Spotify? It’s been around for many years now but just two months ago it landed here in Philippines – making everyone curb their Aegis.

Circular images everywhere

No doubt that the traditional rectangle image has lost its edge literally. CSS border-radius enabled designers to carve the sharp edges into rounded corners. And take it to the extreme, the corners vanish and the shape becomes a circle.

Spotify’s app presents album and artist covers in a circular manner with the same picture faded in the background.

A screenshot of Spotify’s Mac application showing the circular album and artist covers.

This is what we’ll recreate using HTML and CSS.
(more…)

2014-06-10
100% parent, definite-width child

You want to have a 100% expanding parent while still having control over the child to have a definite width?

What’s the use for this? A 100% background not interfering with the child that has width.

[code title=”HTML” lang=”html”]
<div class="container">
<div class="content">
Content
</div>
</div>
[/code]

[code title=”CSS” lang=”css”]
.container {
background-color:red;
}

.content {
margin:0 auto; /* To center the div */
max-width:960px; /* To make it responsive in viewports smaller than 960px */
}
[/code]

And you can even add box-sizing:border-box to the content!

[code title=”CSS” lang=”css”]
.content {
max-width:960px;
box-sizing:border-box; /* Don’t forget to add the vendor prefixes */
}
[/code]

2013-04-05
CSS border box, here we come

Hey, remember that time when you switched from the table layout to div layout?

This is the time to be “out with the old and in with the new”.

We’ll be leaving behind the contraption that alleviate the pains of the CSS box model.

Just to refer to that contraption, familiar with this?
[code]
<div class="module">
<div class="module-container">
<div class="module-content">
Content
</div>
</div>
</div>
[/code]

To not worry about computing widths, we apply it to module-container and the paddings, borders, and margins to module-content.

[code]
.module-container {width:75%;}
.module-content {
margin:1em;
padding:1em;
border:1px solid red;
[/code]

This way, we know that 75% is 75% and no additional values from the other parameters.

But to get rid of module-container and module-content in the HTML markup, we simply apply a border-box:box-sizing style to module.

[code]
<div class="module">Content</div>
[/code]

[code]
.module {border-box:box-sizing;}
[/code]

This will make sure that the box follows the exact width you specify no matter how many paddings and borders you apply to the same element.

For detailed readings, read Paul Irish’s * { Box-sizing: Border-box } FTW.

2013-04-04