Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/solis-lab/postcss-type
https://github.com/solis-lab/postcss-type
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/solis-lab/postcss-type
- Owner: solis-lab
- License: mit
- Created: 2018-02-21T04:07:15.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-09-21T06:07:37.000Z (about 6 years ago)
- Last Synced: 2024-10-01T15:08:20.325Z (about 2 months ago)
- Language: JavaScript
- Size: 82 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# PostCSS Typography [![Build Status][ci-img]][ci]
[PostCSS] plugin to support responsive typography shorthands..
[PostCSS]: https://github.com/postcss/postcss
[ci-img]: https://travis-ci.org/solis-lab/postcss-type.svg
[ci]: https://travis-ci.org/solis-lab/postcss-type
Input:
```css
@custom-media --mobile-m (min-width: 420px);
@custom-media --mobile-l (min-width: 600px);
@custom-media --tablet (min-width: 768px);
@custom-media --tablet-l (min-width: 1024px);
@custom-media --desktop (min-width: 1280px);
@custom-media --desktop-l (min-width: 1440px);
.foo {
/*
* You can omit media query parameter.
*
* Line-height pixel values will be converted into unit-less ratio
* relative to font-size.
*
* Letter-spacing pixel values will be converted into `em`.
*
* If you specify a rootSize option in pixel unit, font-size will
* be converted into `rem`.
*/
@type 10px 15px 1px;
/* You can omit font-size or line-height by using `/`. */
@type --mobile-m 12px / 0;
/*
* When you omit font-size, it is on you to provide your preferred unit
* for line-height and letter-spacing.
*/
@type --desktop / 1.875 0.01em;
}
```
Output:
```css
@custom-media --mobile-m (min-width: 420px);
@custom-media --mobile-l (min-width: 600px);
@custom-media --tablet (min-width: 768px);
@custom-media --tablet-l (min-width: 1024px);
@custom-media --desktop (min-width: 1280px);
@custom-media --desktop-l (min-width: 1440px);
.foo {
/* `@type 10px 15px 1px;` */
font-size: 10px 1.5 0.1em;
/* or in case `@type 10px 15px 1px;` with rootSize: 16px */
font-size: 0.615rem 1.5 0.1em;
/* `@type --mobile-m 12px / 0;` */
@media (--mobile-m) {
font-size: 12px;
letter-spacing: 0;
}
/* @type --desktop / 1.875 0.01em; */
@media (--desktop) {
line-height: 1.875;
letter-spacing: 0.01em;
}
}
```
## Usage
Because this plugin relies on [custom media queries](http://cssnext.io/features/#custom-media-queries), you are recommended to run it before `postcss-cssnext` or `postcss-custom-media`
```js
postcss([ require('postcss-type')({rootSize: '16px'}), require('postcss-custom-media') ])
```
See [PostCSS] docs for examples for your environment.