# soratra

> tools for responsive typography

Latest version **0.12.3** (published 2019-08-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install soratra
pnpm add soratra
yarn add soratra
bun add soratra
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.12.3 |
| Published | 2019-08-16 |
| First published | 2019-08-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 33.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Anthony Michel |
| Maintainers | thonymg |
| Keywords | css, eyeglass-module, mixins, sass, scss, Typo, Vertical Rhythm, responsive, modular-scale |

## Links

- npm: https://www.npmjs.com/package/soratra
- Repository: https://github.com/thonymg/soratra-responsive
- Issues: https://github.com/thonymg/soratra-responsive/issues
- npm.io page: https://npm.io/package/soratra

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.12.3 (latest) — 2019-08-16
- 0.12.2 — 2019-08-16
- 0.12.1 — 2019-08-16

## README

# Soratra responsive — Tools for responsive typography in Sass/Scss

## Install

1. Clone `soratra` somewhere to your project:

   ```sh
   https://github.com/thonymg/soratra-responsive.git
   ```

2. Include it in your main Scss file:

   ```Sass
   @import "soratra.scss";
   ```

### Installing with npm and using a Node-based asset pipeline

1. Add Soratra as a dependency:

   ```bash
   npm install --save soratra
   ```

1. If you’re using [eyeglass], skip to Step 3. Otherwise, you’ll need to add
   Soratra to your node-sass `includePaths` option.
   `require("soratra").includePaths` is an array of directories that you should
   pass to node-sass. How you do this depends on how node-sass is integrated
   into your project.

1. Import Soratra into your Sass files:

```scss
@import "soratra";
```

if you are some trouble, try

```scss
@import "path/to/node_modules/soratra/core/soratra";
```

or

```scss
@import "~soratra/core/soratra";
```

[eyeglass]: https://github.com/sass-eyeglass/eyeglass

## Config

Soratra-responsive use compass & modular-scale mixins, variables & function.

you can use different modular-scale configuration for each device.

```scss
// Modular scale variables

$tmg-mobile-ms: 13px 14px, $octave;
$tmg-tablette-ms: 14px 16px, $octave;
$tmg-desktop-ms: 16px 18px, 1.25;
$tmg-large-ms: 18px, 1.25;
$tmg-x-large-ms: 18px, 1.25;
```

you can configure the compass vertical rhythm.

```scss
// Compass Vertical Rhythm variables

$base-line-height: 24px;
$rhythm-unit: "rem";
$rem-with-px-fallback: true;
```

### config

The first option corespond to modular-scale \$ms-base variable used in h6 selector, soratra-responsive automaticaly calculate each other heading size

```scss
$tmg-mobile-ms: 13px;
```

the second option corespond to modular scale $ms-ratio. By defaut soratra-responsive use $golden if any option is passed

```scss
$tmg-mobile-ms: 13px, $golden;
```

the third option corespond to modular-scale starting point. generaly you don't have to change the default value. By default soratra-responsive starts at 6 (the modular-scale starting count) and decrement this value.

```scss
$tmg-mobile-ms: 13px, $golden, 8;
```

### use

[Demo](http://www.sassmeister.com/gist/756b142d9fe22a4d211c116fbf9a51ef)

for the responsive typography

```scss
@include tmg-base-vertical-rhythm();
```

Mixins for easy heading style

```scss
@include tmg-base-heading-style() {
  color: red;
}
```

Mixins for easy heading style with a selector

```scss
@include tmg-select-heading-style(".truc") {
  color: blue;
}
```

Mixins for easy block container style with selector

```scss
@include tmg-others-block-container(".foo") {
  color: green;
}
```

### my other project

my library for advanced [bem selector](https://github.com/thonymg/fotsy-sass-bem)

### alternative

other library for [responsive typography](https://github.com/corysimmons/typographic)

---

### other documentation

See the [modular-scale](http://www.modularscale.com/) & [compass](http://compass-style.org/reference/compass/typography/vertical_rhythm/) documentation

Je suis un peuple d'Anosibe. [follow Anosibe on twitter](https://twitter.com/anosibe/).
Or [follow me on twitter](https://twitter.com/thonyMg/).

---

Paix et Guerisons - with 💘 [Thony](https://github.com/thonymg)

---
_Source: https://npm.io/package/soratra · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._