6 #Helpers Helpers
Somewhat explicit classes used for enhancing default styles.
kss-styleguide.scss, line 65
6.1 #Helpers.Block Block
The Block Helper displays an element as a block, with an inherited line-height to maintain vertical rhythm.
- author
- Chris Harvey
- updated
Albert Einstein was made famous by his equation E = mc2 which explains the relationship between energy and mass.
Markup
<!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/h-Block.css"/-->
<p>Albert Einstein was made famous by his equation
<b class="h-Block" style="text-align:center;">E = mc<sup>2</sup></b>
which explains the relationship between energy and mass.</p>_h-Block.less, line 7
6.2 #Helpers.Inline Inline
The Inline Helper displays an element in line, with a line-height of 0 to maintain vertical rhythm. This class is useful for creating inline lists, that is, lists whose items are each displayed in line, one right after another.
- author
- Chris Harvey
- updated
- spacetime
- black hole
- singularity
- gravity
- supernova
- neutron star
Markup
<!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/h-Inline.css"/-->
<ul>
<li class="h-Inline">spacetime </li>
<li class="h-Inline">black hole </li>
<li class="h-Inline">singularity </li>
<li class="h-Inline">gravity </li>
<li class="h-Inline">supernova </li>
<li class="h-Inline">neutron star </li>
<ul>_h-Inline.less, line 7
6.3 #Helpers.Clearfix Clearfix
The Clearfix Helper creates a line break after an element
in order to push subsequent content below the container.
This could be a container of floats, or it could simply be an inline list item.
Use this as an alternative to the br element.
The Clearfix Helper is used in the classical sense in the first example below (to clear a float). In the second example, the Clearfix Helper creates a line break after the 2nd inline item.
The last example shows an alternative to marking up postal addresses.
Instead of adding br elements to create line breaks in
postal addresses—the traditional approach—you may wrap each line of the address
with spans using the Clearfix Helper. This approach may be easier if the spans are already present,
for example, from microdata markup.
- author
- Chris Harvey
- updated
- spacetime
- black hole
- singularity
- neutron star
The White House 1600 Pennsylvania Ave NW Washington, DC 20500
Markup
<!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/h-Clearfix.css"/-->
<div class="h-Clearfix">
<div style="font-weight: 700; float: left;">gravity</div>
<div style="font-weight: 700; float: right;">supernova</div>
</div>
<div>spacetime black hole singularity</div>
<ul>
<li class="h-Inline">spacetime </li>
<li class="h-Inline h-Clearfix">black hole </li>
<li class="h-Inline">singularity </li>
<li class="h-Inline">neutron star </li>
</ul>
<p>
<span class="h-Clearfix">The White House</span>
<span class="h-Clearfix">1600 Pennsylvania Ave NW</span>
<span class="h-Clearfix">Washington, DC 20500</span>
</p>_h-Clearfix.less, line 7
6.3.1 #Helpers.Clearfix.1 Example 1
The Clearfix Helper is used in the classical sense: to clear a float.
Markup
<div class="h-Clearfix">
<div style="font-weight: 700; float: left;">gravity</div>
<div style="font-weight: 700; float: right;">supernova</div>
</div>
<div>spacetime black hole singularity</div>_h-Clearfix.less, line 51
6.3.2 #Helpers.Clearfix.2 Example 2
The Clearfix Helper creates a line break after the 2nd inline list item.
- spacetime
- black hole
- singularity
- neutron star
Markup
<ul>
<li class="h-Inline">spacetime </li>
<li class="h-Inline h-Clearfix">black hole </li>
<li class="h-Inline">singularity </li>
<li class="h-Inline">neutron star </li>
</ul>_h-Clearfix.less, line 65
6.3.3 #Helpers.Clearfix.3 Example 3
An alternative to marking up postal addresses.
Instead of adding br elements to create line breaks in
postal addresses—the traditional approach—you may wrap each line of the address
with spans using the Clearfix Helper. This approach may be easier if the spans are already present,
for example, from microdata markup.
The White House 1600 Pennsylvania Ave NW Washington, DC 20500
Markup
<p>
<span class="h-Clearfix">The White House</span>
<span class="h-Clearfix">1600 Pennsylvania Ave NW</span>
<span class="h-Clearfix">Washington, DC 20500</span>
</p>_h-Clearfix.less, line 80
6.4 #Helpers.Measure Measure
The Measure Helper constrains an element’s inline-size (width, in horizontal writing modes) to a reasonable line length.
The default style sets the max-inline-size of the block to 66 characters∗, but there are narrow and wide variants for differing cases.
The narrow variant is useful in mobile design when the user might want to zoom in on text. Reading text with too large a measure on mobile devices requires a lot of horizontal scrolling back and forth. Inversely, the wide variant is useful for large type when you might not want the text to wrap as often.
Because the block is capped at a character length, this style is responsive to font-size. The bigger the font, the larger the line length can be before the text wraps. Try adjusting your browser’s font size to see the effects.
- author
- Chris Harvey
- updated
If the measure is too short, the reader’s eyes have to dart back and forth more often, causing fatigue. If the measure is too long, the reader is more likely to lose track of the previous line.
If the measure is too short, the reader’s eyes have to dart back and forth more often, causing fatigue. If the measure is too long, the reader is more likely to lose track of the previous line.
If the measure is too short, the reader’s eyes have to dart back and forth more often, causing fatigue. If the measure is too long, the reader is more likely to lose track of the previous line.
Markup
<!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/h-Measure.css"/-->
<p class="h-Measure [modifier class]">If the measure is too short, the reader’s eyes
have to dart back and forth more often, causing fatigue. If the measure is too long,
the reader is more likely to lose track of the previous line.</p>_h-Measure.less, line 7
6.5 #Helpers.Constrain Constrain
The Constrain Helper limits an element’s maximum inline-size
(width, in horizontal writing modes), ensuring body content does not expand infinitely.
It is very similar to the .h-Measure Helper, but it is meant for large containers,
not for individual elements of prose (such as a paragraph or list).
- author
- Chris Harvey
- updated
content heading
This object is constrained to a maximum width. Expand your browser window (or zoom out) to see the effect.
Markup
<!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/h-Constrain.css"/-->
<div class="h-Constrain">
<h1>content heading</h1>
<p>This object is constrained to a maximum width. Expand
your browser window (or zoom out) to see the effect.</p>
</div>_h-Constrain.less, line 7
6.6 #Helpers.FontSize FontSize
The FontSize Helper sets the font-size of an element while maintaining vertical rhythm.
Add [class="h-Fontsize"] to an element, and then set the --font-scale
custom property (and optionally the --tracks custom property), either via inline style or stylesheet.
This Helper adjusts the line-height of the element so that track size remains unaffected.
- author
- Chris Harvey
- updated
This paragraph has a font-size of 2.25em, and an adjusted line-height so that each line of text takes up exactly 1 track. Vertical rhythm is maintained. However, this example’s font-size is too big to be read clearly.
Set the `--tracks` to an integer in order to adjust the number of “tracks” each line of text takes up. In this paragraph, each line of text takes up 2 tracks instead of the default 1. This increased leading provides a more pleasant reading experience.
Markup
<!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/h-FontSize.css"/-->
<p class="h-FontSize" style="--font-scale: 2.25;">This paragraph has a font-size of 2.25em,
and an adjusted line-height so that each line of text takes up exactly 1 track.
Vertical rhythm is maintained.
However, this example’s font-size is too big to be read clearly.</p>
<p class="h-FontSize" style="--font-scale: 2.25; --tracks: 2;">Set the `--tracks` to an integer
in order to adjust the number of “tracks” each line of text takes up.
In this paragraph, each line of text takes up 2 tracks instead of the default 1.
This increased leading provides a more pleasant reading experience.</p>_h-FontSize.less, line 6
6.7 #Helpers.Ruled Ruled
The Ruled Helper adds background lines for designing with vertical rhythm. Each line corresponds to one line of text. Lines are separated by one vertical rhythm unit (VRU).
- author
- Chris Harvey
- updated
For instance,
playing Ping-Pong on the train, one would find that
the ball obeyed Newton’s laws just like a ball on a table by the track.
So there is no way to tell whether it is the train or the earth that is moving.
The laws of science
should be the same for all freely moving observers,
no matter what their speed. This was true for Netwon’s laws of motion,
but now the idea was extended to include Maxwell’s theory. All observers
should measure the same speed of light, no matter how fast they are moving.
Gravity is not a force
like other forces, but is a consequence of the
fact that space-time is curved by the distribution of mass and energy in it.
An object in a gravitational field experiences the same effects as if it were
accelerating at a rate proportional to the strength of that gravitational field.
Markup
<!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/h-Ruled.css"/-->
<div class="h-Ruled">
<p><q cite="https://en.wikipedia.org/wiki/A_Brief_History_of_Time">For instance,
playing Ping-Pong on the train, one would find that
the ball obeyed Newton’s laws just like a ball on a table by the track.
So there is no way to tell whether it is the train or the earth that is moving.</q></p>
<p><q cite="https://en.wikipedia.org/wiki/A_Brief_History_of_Time">The laws of science
should be the same for all freely moving observers,
no matter what their speed. This was true for Netwon’s laws of motion,
but now the idea was extended to include Maxwell’s theory. All observers
should measure the same speed of light, no matter how fast they are moving.</q></p>
<p><q cite="https://en.wikipedia.org/wiki/A_Brief_History_of_Time">Gravity is not a force
like other forces, but is a consequence of the
fact that space-time is curved by the distribution of mass and energy in it.</q>
An object in a gravitational field experiences the same effects as if it were
accelerating at a rate proportional to the strength of that gravitational field.</p>
</div>_h-Ruled.less, line 7