See the Pen RE:Creation No. 2: Nutrition Facts Label | HTML (Round 1) by Brian Dys Sahagun (@briandys) on CodePen.
[ntt_percept post=”nutrition-facts-label” “ntt_rec_nav”]
<div class="group-name"><div>, mark up the group of form elements in <form><div class="text">One thing to consider when designing the visuals of a timeline is that the highlight (in the form of a bullet point) must be on the date.
See the Pen Timeline Visual Design on Article Dates by Brian Dys (@briandys) on CodePen.
There are initial points to take into consideration in order to make sense of the connection between HTML elements (<p>, <a>, <div>, etc.) and CSS properties (display, font-size, background-color, etc.).
You might notice that it is all about HTML elements. This is because HTML elements already have implicit CSS rules in them thru the browser. It is called the User Agent Styles or browser default styles.
Now your question borders around creating your own styles, thus, overriding the default styles.
(more…)Do not use <br>. Repeat: do not use <br>.
HTML is about content.
<br> is an HTML element but it is about the presentation of a break (visually a line break – not sure about aurally).
MDN sees the use of <br> in poems and addresses wherein the division of lines is important.
Does the HTML markup of your website has an accessibility function in the form of “Skip to Content”? If yes, then you would notice that it is located at the topmost of the markup. This is as such in order to make it the first focus when using keyboard to navigate.
Now you may ask, “Shouldn’t the document title be at the topmost of the document?”
Not when you put this accessibility function into the context of its intended use. The user, upon arriving at your website might have come from a link or have typed a URL into the web browser. That could’ve served the purpose of document title that ensures the user where they are going to or arriving at.
The second part of this context is the user being able to go directly to the content — skipping every element that isn’t part of their purpose for visiting the website.
Imagine this ombre cake:
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:
Similar to UI State (which only has active or inactive), UI Condition can be anything to describe the condition of an object.
To denote that an article entry does not have content, we add the class ui-cond__entry--blank which translates to “the UI condition of entry is blank”.
<div class="ui-cond__entry–blank"> … </div>