You know what I can’t stand for 4 minutes? Listening to classical music radio station while driving. We try it, Jaycelle and I, from time to time if we can stand it. At times, when we’re word-battling, we don’t notice the music in the background. But at times when you put your ears into it? Nah, next channel.
Author: Brian Dys
-
3 Layers of an Active Element
Imagine this ombre cake:
Photo by sackerman519 on Flickr. 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:
[html]
<a>Label</a>
[/html]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:
[html]
<div> <!– Frame for positioning –>
<a>
<span> <!– Frame for textual element –>
Label
</span>
</a>
</div>[/html]
Here’s a demo to show a floated button:
Oh and by the way, here’s an ombre potato:
Source: Ombre Potato and Cheese Torte on Green Gourmet Giraffe -
GWT Training: Day 2
Discussing more about Git. Personally I use GitHub Desktop when working mostly with WordPress.
-
Padding
Padding
Imagine a 16 x 16 px home icon that also has a 16 x 16 px active area. This little thing is prone to be missed upon activating (clicking or tapping) especially when laid out side by side with other active elements with similar dimensions.
See the Pen A Small Icon with a Small Active Area by Brian Dys Sahagun (@BrianSahagun) on CodePen.
Providing ample space around it away from other elements might lessen the chance of mistakenly activating something else but it won’t make it easier to hit. This is where Padding comes in.
Padding refers to increasing, at least to a minimum of 38 x 38 px the dimensions of the active area of an element. This technique prioritizes the usability of that active element in such a way that it is easily clicked by a pointing device or tapped by touch because of it’s big-enough area.
See the Pen A Small Icon with a 38 x 38 px Active Area by Brian Dys Sahagun (@BrianSahagun) on CodePen.
Padding: Responsive Wrap
A type of Padding wherein the active area, apart from having minimum dimensions, its size is being determined by its content. The active area at 38 px is wrapped around a content but if the content is bigger than the minimum of 38 px, the container will respond.
Characteristics
- initial fixed height
- width is determined by content and horizontal padding
[html]
<div class="axn_cr">
<a href="#">
<span class="label">Label</span>
</a>
</div>[/html]
[css]
a
{
display: inline-block;
padding-left: 1rem;
padding-right: 1rem;
height: 48px;
min-width: 48px;
box-sizing: border-box;
}
[/css]Related Terms
- Activate
- Active Area
- Active ELement
-
Building a Technical Vocabulary
As front-end designers, we are using patterns over and over again – we are employing specific techniques to answer specific needs. But what we lack is a term, a name tag for those methods.
It’s simply like the Flying V of The Mighty Ducks!
A t-shirt print design by MrTWilson at Redbubble. So far, I’ve added Padding and Framing to my vocabulary.
Let’s try another one. Say for example, I need the following for my website’s header:
- Fixed-height header
- Responsive width
- The content of the header are all vertically-aligned in the middle
- If the content of the header exceeds the fixed height, then it will respond
What kind of solution does this need and what can we name the technique?
-
GWT Training: Day 1
Here at Phivolcs Building at Diliman, QC attending the Training of Trainers (ToT) for GWT.
Discussing about the WordPress basics.
-
InVision’s Making a Product Designer: Chapter 4
The success of a product’s interface was dependent upon how well the designer understood 2 parties: the human using it, and the capabilities of the machine on which the software ran.
~ Scott Hurff -
1974 Cavite City Plate Number
Here’s my fashionista grandma with my grandpa’s 1974 Benz.
Felicia Ricasata standing beside a Mercedes-Benz automobile in 1974 at A.R. Technical Institute, Cavite City. 
A 1974 Cavite City Plate Number recreated from a photograph. Related:
-
Increasing the Active Area of FB Likes and Comment
A common problem in apps is when active elements have active areas the size of the content.
For example, a small text at around 12px will be easy to miss when tapped. Apart from this, it presents anxiety to the user that he/she might miss it when it needs to be tapped.
The solution is simply increasing the size of the active area thru Padding.
See the Pen Increasing the Active Area of FB Likes and Comment by Brian Dys Sahagun (@BrianSahagun) on CodePen.
-
I Passed the GWT Accreditation Exam!
GWT stands for Government Web Template and I applied to be a trainor for its WordPress version of the template.
I still have to attend a week-long training to complete the accreditation.
Wish me luck!