@financial-times/dotcom-ui-base-styles
Advanced tools
This package provides the global document styles for FT.com, including normalisation styles, basic typography, and grid styles, provided by [Origami](https://github.com/financial-times/origami) components.
This package provides the global document styles for FT.com, including normalisation styles, basic typography, and grid styles, provided by Origami components.
npm install --save @financial-times/dotcom-ui-base-styles
After installing the package you can use it to embed the progressive font loading hooks and document styles into your pages on the server-side and initialise the font loading on client-side.
dotcom-ui-base-styles provides styles which should be imported into your application's main stylesheet:
@import '@financial-times/dotcom-ui-base-styles/styles';
dotcom-ui-base-styles allows apps to HTTP-preload Origami's fonts, and provides baseline styles to be rendered as a style attribute on the <html> tag, to reduce flash of unstyled content (FOUC).
If you are using React to render your app, render the LoadFontsEmbed component along with the loadCustomFontsClassNames and documentStyles variables to integrate font loading and document styles with your pages:
import {
documentStyles
LoadFontsEmbed,
loadCustomFontsClassNames
} from '@financial-times/dotcom-ui-base-styles'
export default (props) => (
<html className={loadCustomFontsClassNames} style={documentStyles}>
<head>
<meta charSet="utf-8" />
<title>My Amazing Website</title>
<LoadFontsEmbed />
</head>
<body>
...
</body>
</html>
)
Otherwise, you can insert the code snippet into a <script> element:
const {
documentStyles
loadCustomFontsJS,
loadCustomFontsClassNames
} = require('@financial-times/dotcom-ui-base-styles')
function page() {
return `<!DOCTYPE html>
<html className=${loadCustomFontsClassNames} style=${documentStyles}>
<head>
<meta charset="utf-8">
<title>My Amazing Website</title>
<script>${loadCustomFontsJS}</script>
</head>
<body>
...
</body>
</html>`
}
dotcom-ui-base-styles's font loader requires client-side Javascript to work. Import the package in your client-side entry point, and call the .init() method:
import * as baseStyles from '@financial-times/dotcom-ui-base-styles'
baseStyles.init()
[!WARNING]
n-ui-foundations, the predecessor ofdotcom-ui-base-styles, provided common Origami dependencies for apps and components.dotcom-ui-base-stylesonly supports apps. For components, you should directly depend on and use the Origami components you require.
FAQs
This package provides the global document styles for FT.com, including normalisation styles, basic typography, and grid styles, provided by [Origami](https://github.com/financial-times/origami) components.
The npm package @financial-times/dotcom-ui-base-styles receives a total of 1,510 weekly downloads. As such, @financial-times/dotcom-ui-base-styles popularity was classified as popular.
We found that @financial-times/dotcom-ui-base-styles demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 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
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.