Skip to content

Commit

Permalink
feat: add sassdoc integration
Browse files Browse the repository at this point in the history
via sassdoc and custom comment syntax, we can document our
Sass variables, mixins and functions and output that as html
documentation on a dedicated website. The output is compiled
to the `dist/` folder.

refactor!: rename global Sass config map

BREAKING CHANGE: rename `$FLUIDMS-GLOBAL-CONFIG` to `$FLUIDMS-CONFIG`
as the uppercase notation already indicates its global scope.

build: make npm script platform-agnostic

as the `rm` command is a bash command, this will not work in
default Windows environments. adding the `rimraf` npm package,
we make it platform-independent.

docs: correct mixin docs

provide correct mixin documentation for the sassdoc output.
  • Loading branch information
csshugs committed Feb 3, 2020
1 parent 27e309e commit 7152506
Show file tree
Hide file tree
Showing 9 changed files with 4,128 additions and 226 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
.DS_Store
node_modules/
dist/
18 changes: 9 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -182,21 +182,21 @@ With Fluid Typography, you basically define a viewport range in which all the fo

#### Defining the viewport range

You can define the range in which the typography is fluid with the `min-viewport` and `max-viewport` entries in the `$FLUIDMS-GLOBAL-CONFIG` Sass map:
You can define the range in which the typography is fluid with the `min-viewport` and `max-viewport` entries in the `$FLUIDMS-CONFIG` Sass map:

```scss
$FLUIDMS-GLOBAL-CONFIG: (
$FLUIDMS-CONFIG: (
min-viewport: 480px,
max-viewport: 1280px,
) !default;
```

#### Defining the base font-size

This means that on every viewport that’s between `480px` and `1280px` wide, the typography will be fluid. How big the font-size is below and above this range can be defined with the `min-font-size` and `max-font-size` entries in `$FLUIDMS-GLOBAL-CONFIG`:
This means that on every viewport that’s between `480px` and `1280px` wide, the typography will be fluid. How big the font-size is below and above this range can be defined with the `min-font-size` and `max-font-size` entries in `$FLUIDMS-CONFIG`:

```scss
$FLUIDMS-GLOBAL-CONFIG: (
$FLUIDMS-CONFIG: (
min-font-size: 16px,
max-font-size: 24px,
min-viewport: 480px,
Expand All @@ -214,12 +214,12 @@ Below a viewport of `480px`, the font-size will be `16px` and not smaller. Above
}
```

then the minimum and maximum font-size should of course be bigger. How much bigger it is can be defined via the `ratio` entry of the `$FLUIDMS-GLOBAL-CONFIG` Sass map:
then the minimum and maximum font-size should of course be bigger. How much bigger it is can be defined via the `ratio` entry of the `$FLUIDMS-CONFIG` Sass map:

#### Defining a font-size ratio

```scss
$FLUIDMS-GLOBAL-CONFIG: (
$FLUIDMS-CONFIG: (
min-font-size: 16px,
max-font-size: 24px,
min-viewport: 480px,
Expand All @@ -237,7 +237,7 @@ If we use the mixin with `$ms: 2`, this font-size will be again 1.1x bigger than
What seems like a good ratio on small screens might not be suited on larger screens as the different font-sizes are too similar to each other related to the viewport size. In this case you can optionally change the ratio for different breakpoints:

```scss
$FLUIDMS-GLOBAL-CONFIG: (
$FLUIDMS-CONFIG: (
min-font-size: 16px,
max-font-size: 24px,
min-viewport: 480px,
Expand All @@ -253,10 +253,10 @@ Our default ratio is still `1.1`, but above screens of `1024px`, our ratio is in

#### Defining a set of scales

In order to even be able to use different font-sizes, we need to define a set of different font-size entities. For that, we add a `scales` list to the `$FLUIDMS-GLOBAL-CONFIG` map.
In order to even be able to use different font-sizes, we need to define a set of different font-size entities. For that, we add a `scales` list to the `$FLUIDMS-CONFIG` map.

```scss
$FLUIDMS-GLOBAL-CONFIG: (
$FLUIDMS-CONFIG: (
min-font-size: 16px,
max-font-size: 24px,
min-viewport: 480px,
Expand Down
Loading

0 comments on commit 7152506

Please sign in to comment.