Heading 1
Heading 2
This is a paragraph with beautiful typography.
A typography styles library based on Pico CSS
npm install @retronew/typographyA foundational typography styles library built with SCSS, based on Pico CSS. Provides comprehensive typographic styles and utilities for modern web applications.
- šØ Comprehensive Typography Styles - Well-designed typography styles for headings, paragraphs, lists, blockquotes, code blocks, tables, and more
- š Theme Support - Built-in support for light and dark themes with automatic color scheme detection
- šÆ Modular Architecture - Modular SCSS structure for easy customization and tree-shaking
- š¦ Framework Agnostic - Works with any framework (Vue, React, Svelte, etc.) or vanilla HTML
- šØ CSS Variables - Uses CSS custom properties for easy theming and runtime customization
- š± Responsive - Mobile-first approach with responsive typography
- ā” No Build Required - Pure SCSS, no JavaScript dependencies for the library itself
``bash`
npm install @retronew/typographyor
pnpm add @retronew/typographyor
yarn add @retronew/typography
> Note: This package requires sass as a peer dependency. Make sure you have it installed:`
>
> bash`
> npm install -D sass
>
Import the main stylesheet in your SCSS file using @use:
`scss`
@use '@retronew/typography';
`scss
// Main entry - includes all typography styles
@use '@retronew/typography';
// Full Pico styles
@use '@retronew/typography/pico';
// Pico with color utilities
@use '@retronew/typography/pico.colors';
// Colors only
@use '@retronew/typography/colors';
// Access settings/variables
@use '@retronew/typography/_settings';
`
You can customize the library by forwarding with configuration:
`scss`
@use '@retronew/typography' with (
$semantic-root-element: 'body',
$enable-semantic-container: true,
$enable-responsive-typography: true // ... other custom variables
);
For more granular control, import specific modules directly:
`scss
// Typography content only
@use '@retronew/typography/scss/content/typography';
// Code styling
@use '@retronew/typography/scss/content/code';
// Tables
@use '@retronew/typography/scss/content/table';
// Theme colors
@use '@retronew/typography/scss/themes/default';
// Helpers
@use '@retronew/typography/scss/helpers/mixin';
@use '@retronew/typography/scss/helpers/functions';
`
Simply use semantic HTML elements and the typography styles will be applied automatically:
` This is a paragraph with beautiful typography.html
Heading 1
Heading 2
This is a blockquote with elegant styling.
const hello = "world";

| Header 1 | Header 2 |
|---|---|
| Cell 1 | Cell 2 |
Requirements
- Sass:
>=1.23.0 (peer dependency)Project Structure
`
scss/
āāā _index.scss # Main entry point
āāā _settings.scss # Global settings and variables
āāā pico.scss # Full Pico bundle
āāā pico.colors.scss # Pico with colors
ā
āāā colors/ # Color system
ā āāā _index.scss
ā āāā utilities/
ā āāā _background-colors.scss
ā āāā _colors.scss
ā āāā _css-vars.scss
ā āāā _utils.scss
ā
āāā content/ # Content styles
ā āāā _code.scss
ā āāā _embedded.scss
ā āāā _figure.scss
ā āāā _link.scss
ā āāā _misc.scss
ā āāā _table.scss
ā āāā _typography.scss
ā
āāā helpers/ # SCSS helpers
ā āāā _functions.scss
ā āāā _mixin.scss
ā
āāā layout/ # Layout styles
ā āāā _document.scss
ā
āāā themes/ # Theme definitions
ā āāā _default.scss
ā āāā default/
ā āāā _dark.scss
ā āāā _light.scss
ā āāā _schemes.scss
ā āāā _styles.scss
ā āāā _theme-colors.scss
ā
āāā utilities/ # Utility styles
ā āāā _accessibility.scss
ā āāā _reduce-motion.scss
ā
āāā components/ # Component styles (extensible)
`Theming
The library supports automatic light/dark theme switching based on user's system preference:
`scss
// The default theme automatically responds to prefers-color-scheme
@use '@retronew/typography';
`You can also manually control the theme using CSS classes or data attributes on your root element.
Browser Support
This library uses modern CSS features including:
- CSS Custom Properties (CSS Variables)
-
prefers-color-scheme media query
- prefers-reduced-motion` media querySupports all modern browsers (Chrome, Firefox, Safari, Edge).
This library is based on Pico CSS - Minimal CSS Framework for semantic HTML.
MIT
Retronew