Security News
Highlights from the 2024 Rails Community Survey
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
@financial-times/o-editorial-layout
Advanced tools
Layout for editorial content. Including margins for editorial typography.
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 1,605 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
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.