👋 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. 🥰
About Snippet
0
Comment
An Active Element is a user interface element that can be interacted with. It’s something you do something on (like click, tap, type on). A very basic example is a text link like this:
[codepen_embed height=”266″ theme_id=”1820″ slug_hash=”GpyBgM” default_tab=”result” user=”BrianSahagun”]See the Pen Text Link by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]
Or a button like this:
[codepen_embed height=”266″ theme_id=”1820″ slug_hash=”ZbvjYN” default_tab=”result” user=”BrianSahagun”]See the Pen Button Example by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]
Also a text input like this:
[codepen_embed height=”266″ theme_id=”1820″ slug_hash=”zvpLGY” default_tab=”result” user=”BrianSahagun”]See the Pen Text Input Example by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]
Categories
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.
Discussing more about Git. Personally I use GitHub Desktop when working mostly with WordPress.
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
Here at Phivolcs Building at Diliman, QC attending the Training of Trainers (ToT) for GWT.
Discussing about the WordPress basics.
Categories
Here’s my fashionista grandma with my grandpa’s 1974 Benz.
Related: