https://github.com/oddbird/accoutrement-type
Font helpers
https://github.com/oddbird/accoutrement-type
Last synced: about 1 year ago
JSON representation
Font helpers
- Host: GitHub
- URL: https://github.com/oddbird/accoutrement-type
- Owner: oddbird
- License: mit
- Created: 2014-10-30T06:35:46.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2024-01-29T16:36:47.000Z (over 2 years ago)
- Last Synced: 2024-10-29T18:48:44.502Z (over 1 year ago)
- Language: CSS
- Size: 1.26 MB
- Stars: 2
- Watchers: 5
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
Accoutrement-Type
=================
Sass typography and webfont helpers
by [OddBird][oddbird].
Gather all your fonts into a single map,
access them by name,
and easily import the webfonts.
Also includes helpers for accessibility
and pseudo-elements.
[oddbird]: http://oddbird.net/
More Accoutrement Tools
-----------------------
- [Init](http://oddbird.net/accoutrement-init/)
provides light-weight browser-normalization.
- [Color](http://oddbird.net/accoutrement-color/)
provides color-palette management and contrast-ratio utilities.
- [Scale](http://oddbird.net/accoutrement-scale/)
helps manage scale patterns like font-sizes, margins, and gutters.
- [Layout](http://oddbird.net/accoutrement-layout/)
provides layout utilities such as
box-sizing, intrinsic ratios, z-index management,
named media-queries, and a clearfix.
Quick Start
-----------
Install the package with npm or yarn:
```bash
npm install accoutrement-type
yarn add accoutrement-type
```
Import the library:
```scss
@import '/accoutrement-type/sass/type';
```
Configure your font settings:
```scss
// Define what webfont formats need importing
$font-formats: 'woff' 'ttf';
// Set the a path to your fonts directory
$font-path: '../fonts/';
$fonts: (
// describe locally-hosted font files for import and access
'heading': (
'name': 'maven',
'stack': ('helvetica', 'arial', sans-serif),
'normal': 'maven/maven_pro_regular-webfont',
'bold': 'maven/maven_pro_bold-webfont',
),
// describe CDN fonts for access
'body': (
'name': 'Source Sans Pro',
'stack': ('Helvetica Neue', 'Helvetica', 'Arial', sans-serif),
),
// provide aliases for any font you need
'alias': 'body', // create aliases when useful
);
```
Import one font at a time with `font-face()`
or all your local webfonts with `import-webfonts()`:
```scss
// Import one font by configuration key, with custom formats
@include font-face('body', 'otf' 'svg');
// Import all local fonts
@include import-webfonts;
```
Set your font-family anywhere,
using the semantic names you defined earlier:
```scss
html {
@include font-family('body');
}
h1, h2, h3 {
@include font-family('heading');
}
```