Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@financial-times/o-editorial-layout
Advanced tools
Layout for editorial content. Including margins for editorial typography.
Readme
Typography styles and layout for editorial content.
o-editorial-layout builds on o-editorial-typography to provide margin and layout for editorial typography for specific contexts such as an article page.
o-editorial-layout currently provides margins between typographical elements, asides, and figures. It could be expanded to include the layout of article pages themselves.
Check out how to include Origami components in your project to get started with o-editorial-layout
.
Headings 1-5 are provided with their margin with the class o-editorial-layout-heading-level-[level]
:
<h1 class="o-editorial-layout-heading-level-1">Heading level 1</h1>
<h2 class="o-editorial-layout-heading-level-2">Heading level 2</h2>
<h3 class="o-editorial-layout-heading-level-3">Heading level 3</h3>
<h4 class="o-editorial-layout-heading-level-4">Heading level 4</h4>
<h5 class="o-editorial-layout-heading-level-5">Heading level 5</h5>
For paragraphs use the o-editorial-layout-body
class:
<p class="o-editorial-layout-body">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
Adjacent figure
, aside
, and div
elements will have margin applied.
A wrapper class o-editorial-layout-wrapper
may be used to style child elements based on their semantic meaning. This includes headings, paragraphs, lists, figure captions, footers, blockquotes, and more. See a full example in the wrapper registry. Only direct children, and in some cases the children of paragraph elements, are styled.
<div class="o-editorial-layout-wrapper">
<h1>heading 1</h1>
<h2>heading 2</h2>
<p><a href="#">Lorem ipsum dolor sit amet consectetur</a> adipisicing elit.</p>
<blockquote>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, quaerat!</p>
<footer><cite>Lorem, ipsum dolor.</cite></footer>
</blockquote>
<p><em>Some italic copy</em> adipisci consectetur.</p>
<p>Quas<sup>sup</sup> and dolorem<sub>sub</sub> harum tempora omnis.</p>
<ol>
<li>Lorem ipsum adipiscing elit.</li>
<li>Sed feugiat turpis at massa tristique.</li>
<li>Curabitu r accumsan elit luctus.</li>
</ol>
</div>
Include all o-editorial-layout styles by including the oEditorialLayout
mixin.
@import "@financial-times/o-editorial-layout/main";
@include oEditorialLayout();
To include just the styles you need we recommend setting the options $opts
argument.
For example to include only heading levels 1-3 and body copy styles.
@include oEditorialLayout($opts: (
'body': true,
'headings': (1, 2, 3),
'wrapper': true
));
We recommend including styles with oEditorialLayout
and using default markup to reduce duplicated CSS in your project. However you may also use oEditorialLayoutHeading
and oEditorialLayoutBody
to apply styles to your own markup (note: placeholders are used, which ay effect the source order of your CSS).
For example to output a heading:
.my-h2-with-margin {
@include oEditorialLayoutHeading(2);
}
See the o-editorial-layout Sassdoc for more details.
State | Major Version | Last Minor Release | Migration guide |
---|---|---|---|
✨ active | 2 | N/A | migrate to v2 |
⚠ maintained | 1 | 1.4 | N/A |
If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #ft-origami or email Origami Support.
This software is published by the Financial Times under the MIT licence.
FAQs
Layout for editorial content. Including margins for editorial typography.
The npm package @financial-times/o-editorial-layout receives a total of 2,343 weekly downloads. As such, @financial-times/o-editorial-layout popularity was classified as popular.
We found that @financial-times/o-editorial-layout demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 10 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.