Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alexandremasy/postcss-salt-typography-parser
Salt - Typography Parser utility
https://github.com/alexandremasy/postcss-salt-typography-parser
postcss postcss-plugin salt
Last synced: about 2 hours ago
JSON representation
Salt - Typography Parser utility
- Host: GitHub
- URL: https://github.com/alexandremasy/postcss-salt-typography-parser
- Owner: alexandremasy
- License: mit
- Created: 2017-06-05T06:40:40.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-06-06T11:34:26.000Z (over 7 years ago)
- Last Synced: 2024-11-06T19:55:50.681Z (about 2 months ago)
- Topics: postcss, postcss-plugin, salt
- Language: JavaScript
- Homepage:
- Size: 13.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# [WIP] Salt - Typography Parser utility
> PostCSS plugin that walk through you css declarations to find the dynamic font values and enforce a predefined one. This plugin is part of [Salt](https://github.com/alexandremasy/salt), a collection of tool to help you enforce a set of rule througout your application.
## Getting started
Installation is as easy as:
```shell
npm install postcss-salt-typography-parser
```
**PostCSS**
Include the plugin in you build process:
```
@TODO
```
**Gulp**
Include the plugin in your build process:
```
@TODO
```
This plugins depends on :
- [PostCSS](https://github.com/postcss/postcss)
- [Salt - Typography - Helper](https://github.com/alexandremasy/postcss-salt-typography-helper)
- [Salt - Layout - Breakpoint](https://github.com/alexandremasy/postcss-salt-layout-breakpoint)
## Functionalities
Walk through your typographic css declarations to find the dynamic values and enforce a predefined one;
```css
html
{
#font-family: ;
#font-weight: ? / ;
#font-size: ? / ;
#line-height: ? / ;
#font-style: ? / [italic | oblique | none];
}
```
------
### #font-family
Define a font-family.
```css
#font-family: ;
```
| Property | Type | Description |
| --------------------- | ------ | ---------------------------------------- |
| `domain` **required** | String | the name defined in the [font definition option](https://github.com/alexandremasy/postcss-salt-typography#configuration). If the given value is not found in the definition, the plugin will throw an exception. |
**will yield**
```css
font-family:
```
| Property | Type | Description |
| -------- | ------ | ---------------------------------------- |
| `family` | String | The family value in the [font definition option](https://github.com/alexandremasy/postcss-salt-typography#configuration). |
------
### #font-weight
Define a font-weight
```css
#font-weight: ? / ;
```
| Property | Type | Description |
| --------------------- | ------ | ---------------------------------------- |
| `domain` *optional* | String | the name defined in the [font definition option](https://github.com/alexandremasy/postcss-salt-typography#configuration). If not provided, we'll take the first entry in the font definition. If the given value is not found in the definition, the plugin will throw an exception. |
| `weight` **required** | String | One of the [allowed weight values](https://github.com/alexandremasy/postcss-salt-typography#weight). |
**will yield**
```css
font-weight:
```
| Property | Type | Description |
| -------- | ------ | ----------------------------- |
| `weight` | Number | The weight of the given font. |
------
### #font-size
Define a font-size
```css
#font-size: ? / ;
```
| Property | Type | Description |
| -------------------- | ------ | ---------------------------------------- |
| `domain` *optional* | String | the name defined in the [font definition option](https://github.com/alexandremasy/postcss-salt-typography#configuration). If not provided, we'll take the first entry in the font definition. If the given value is not found in the definition, the plugin will throw an exception. |
| `scale` **required** | String | One of the scale you defined in your font definition option. |
**will yield for a singular scale value**
```css
font-size:
```
| Property | Type | Description |
| -------- | ------ | ------------------------- |
| `length` | Number | The defined length value. |
**will yield for a dual scale value**
```css
font-size: calc(( * ) + ( - ) * (100vw - ) / ( - ));
@breakpoint('>')
{
font-size: * ;
}
@breakpoint('<')
{
font-size: * ;
}
```
| Property | Type | Description |
| ------------------ | ------ | ---------------------------------------- |
| `font-first` | Number | The first value in the scale declaration. |
| `font-last` | Number | The last value in the scale declaration. |
| `unit` | Number | The unit used for the font-size, computed from the scale declaration. |
| `breakpoint-first` | Number | The first value in the breakpoint declaration. |
| `breakpoint-last` | Number | The last value in the breakpoint declaration. |
------
### #line-height
Define a line-height
```css
#line-height: ? / ;
```
| Property | Type | Description |
| -------------------- | ------ | ---------------------------------------- |
| `domain` *optional* | String | the name defined in the [font definition option](https://github.com/alexandremasy/postcss-salt-typography#configuration). If not provided, we'll take the first entry in the font definition. If the given value is not found in the definition, the plugin will throw an exception. |
| `scale` **required** | String | One of the scale you defined in your font definition option. |
**will yield for a singular scale value**
```css
line-height:
```
| Property | Type | Description |
| -------- | ------ | ------------------------- |
| `length` | Number | The defined length value. |
**will yield for a dual scale value**
```css
line-height: calc(( * ) + ( - ) * (100vw - ) / ( - ));
@breakpoint('>')
{
font-size: * ;
}
@breakpoint('<')
{
font-size: * ;
}
```
| Property | Type | Description |
| ------------------ | ------ | ---------------------------------------- |
| `height-first` | Number | The first value in the scale declaration. |
| `height-last` | Number | The last value in the scale declaration. |
| `unit` | Number | The unit used for the font-size, computed from the scale declaration. |
| `breakpoint-first` | Number | The first value in the breakpoint declaration. |
| `breakpoint-last` | Number | The last value in the breakpoint declaration. |
------
### #font-style
Define a font-style
```css
#font-size: ? / [italic | oblique | none];
```
| Property | Type | Description |
| ---------------------------------------- | ------ | ---------------------------------------- |
| `domain` *optional* | String | the name defined in the [font definition option](https://github.com/alexandremasy/postcss-salt-typography#configuration). If the given value is not found in the definition, the plugin will throw an exception. If not provided, we'll take the first entry in the font definition with the given style. It no entry is found, an exception will be thrown. |
| `italic` `oblique` `normal` **required** | String | One of these value. |
**will yield**
```css
font-style: [italic | oblique | normal]
```
| Property | Type | Description |
| -------- | ------ | ------------------------- |
| `length` | Number | The defined length value. |