👋 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
Categories
I’m currently researching on how to design the content structure of article bylines – that section wherein you see the author’s name and the date the article was published.
The byline on a newspaper or magazine article gives the date, as well as the name of the writer of the article.
Byline from Wikipedia
References
Chikka v6.2 is here – featuring Group Chat.
Categories
As of this moment, HopScotch has gotten 1,470 downloads since it launched on November last year – and for that, thank you and I hope this theme has been useful for your web sites.
I am currently refactoring HopScotch for the following reasons:
- updates in content structure
- improvements in standardization (element naming for HTML and CSS)
- development towards being “pluggable” both in WordPress platform and in CSS
This endeavor will affect current users of this theme especially if you’ve customized it directly or through a child theme.
My only suggestion is when the update comes is to update to version 3.
Discovery has always been part of our experience in using web sites and apps. They could be in any form:
- clicking an ambiguous icon to find out what it does
- going through multiple pages to find information
- finding out what’s causing an alert icon beside a label
- learning and memorizing keyboard shortcuts
…and the list goes on.
One UI element that helps us in most discovery processes is the tooltip. Users of Windows or Mac have surely encountered it when you hover your mouse cursor on certain items in your computer desktop (maybe by chance or out of curiosity if you don’t want to click something). It is in the form of a box with text label or description.
The Elements of Style Sheets aims to categorize CSS properties into three elements: Nature, Theme, and Layout. It could help a front-end designer’s mental model of building the CSS on top of HTML.
Nature
Nature refers to the individual characteristics of an element.
- Display (display)
- Dimensions (padding, width, height)
Theme
Theme refers to the visual design of an element.
- Colors (color, background-color)
- Typography (font-size, font-family)
- Decor (border, border-radius, box-shadow)
Layout
Layout refers to the relationship of elements with one another.
- Position (float, position)
- Spacing (margin)
Update
Animation
As an example, after building the Content Structure in HTML, the front-end designer, in a mobile-first approach, will focus on styling individual elements – by their Nature first (usually, width is set at 100%). And then style according to Theme and lastly, as the viewport goes wider, the front-end designer styles the Layout.
—
In general, label and icon combination is helpful in making an action easier to remember and depict.
Take a look at the left menu of this WordPress Dashboard:
And when there are no icons:
Without icons, you would need to read the labels one by one until you see what you’re looking for. The icons beside the labels definitely ease the effort in reading and recognizing the actions.
The Content Structure
How do we design the label and icon combination? First question we have to ask: with only HTML, is it important to represent the icon? For example, should it be contained in img, span, or a special character (think: icon fonts)?
If your answer is the same as mine, which is: only the text label is important enough to be represented in HTML, then we could simply use a to contain the label; the icon would be displayed using background-image.
Let’s use “Settings” for example:
[codepen_embed height=”102″ theme_id=”1820″ slug_hash=”EawKOb” default_tab=”result” user=”BrianSahagun”]See the Pen Label and Icon Combo by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]
The icon was attached using the pseudo-element ::after.
[css]
.settings-action-link::after {
content: ”;
position: absolute;
width: 1rem;
height: 1rem;
background-image: url( ‘../img/icon.png’ );
}
[/css]
Commenting is disabled.