27 February 2018

HTML_OK stands for HTML Overkill. So it may or may not be okay at all.

But for some of us who likes more freedom in styling our markups, HTML_OK saves the day.

HTML_OK is a framework that utilizes “frames” or extra HTML elements like <div> and <span> for the purpose of becoming styling hooks.

The lean way (4 lines, 145 bytes):

[Insert Example]

The overkill way (30 lines, 1294 bytes):

[Insert Example]

That’s almost a tenfold increase from being lean to being overkill!

HTML_OK’s Superpower

Now, let’s see how flexible it is to style a markup with structured hooks.

[Insert Example]

---

24 September 2014

HTML Patterns is a collection of user interface patterns in plain HTML. Its goal is to simplify complex UIs by breaking down its parts into plain HTML markup.

As front-end designers, we often find ourselves working on similarly-structured UIs that differ in visual design and behavior or sometimes we design a new kind of UI to fit within our projects.

HTML Patterns acts as a tool in documenting and storing HTML markup and CSS rule-sets of particular UI patterns.

Example

As an example, a UI that has an action for a particular component (say, a table row with an editable data in it) could have the following HTML markup:

[html]
<p>Mobile Number: 800 9000</p>
<ul>
<li><a href=”#”>Add</a></li>
<li><a href=”#”>Edit</a></li>
<li><a href=”#”>Delete</a></li>
</ul>
[/html]

The ul part is what we’re going to save and name as “Action” HTML Pattern. To reuse, we’ll simply copy and paste the HTML markup and modify as needed in our projects.

We could also save a different variation of that example wherein we modify some elements to extend the adaptability of the markup to more types of usage:

[html]
<div class=”action”>
<p class=”heading accessible-name”>Action Heading</p>
<ul class=”action-list”>
<li class=”action-item”>
<a class=”action-link” href=”#”>
<span class=”label”>Action Label 1</span>
</a>
<li class=”action-item”>
<a class=”action-link” href=”#”>
<span class=”label”>Action Label 2</span>
</a>
</ul>
</div>
[/html]

Now, we have a reusable Action HTML Pattern that we could refer to whenever we would need such a pattern.

How is this different?

There are lots of resources already out there on the internet – examples are SimpleBits’s Pears and Brad Frost’s Responsive Patterns – to name a few.

HTML Patterns is another way of interpreting complex UIs into basic HTML markup. It has emphasis on semantics and content structure.

---

1 October 2014

Replicating Facebook Login

Disclaimer: This is only a crude attempt at replicating the Login form of Facebook. One should consider that for accessibility and added semantics, there must be ARIA attributes in the HTML markup.

Here’s a demonstration on the process of writing the HTML markup first (with importance on the content structure) before writing the stylesheet. Although I had to make some adjustments by going back and forth from CSS to HTML, I tried my best to maintain the original content structure or the arrangement of elements from top to bottom – I just had to add some containers here and there for easy selection in CSS.

It is a real challenge for us, front-end designers, to separate the workflow of writing HTML from CSS. Sometimes it must be practived just so that we could value their respective focuses (HTML – information and semantics, CSS – presentation – visual design or otherwise).

One could argue that for web apps, content structure doesn’t matter much since what must be achieved ultimately are the visual design and functionality requirements. Personally, I think that as long as a markup language such as HTML is used, there is an unchanging guiding principles at the very base of it. And yes, there are always exceptions to rules and most of what we have in the web today are mere guidelines. Much important than consistency of following guidelines is for designers and developers to push the limits of technology – to see what it can do, to see how it can evolve.