Skip to content

Commit

Permalink
updated documentation - settings
Browse files Browse the repository at this point in the history
  • Loading branch information
Pustelto committed Oct 25, 2016
1 parent af08789 commit 7985e51
Showing 1 changed file with 45 additions and 8 deletions.
53 changes: 45 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,27 +8,64 @@ Enigma is heavely inspired by [Modular Scale](http://www.modularscale.com/) from

Enigma doesn't come with fonts or typography templates, for ready made solutions you may check other tools (like [Gutenberg](https://matejlatin.github.io/Gutenberg/)). In Enigma it is up to you to setup it according your needs as every project is unique and it's typography should be treated as such. I build this tool for my need of easy and effective way how to use modular scales and different font-sizes with ease without all the difficult calculations for line height, font-size etc. It is perfect tool for keeping your vertical rhythm consistent and prepare good looking typography with very little effort.

All math is handled by Enigma. All you have to do is to put in few basic numbers and enjoy the results - harmonious font sizes and harmonious vertycla rhythm.
All math is handled by Enigma. All you have to do is to put in few basic numbers and enjoy the results - harmonious font sizes and vertycal rhythm.

## How to use it

- include sass
- setup (setting desc)
- what to use (mixin and functions)
Include the sass files from `dist/` folder and you are ready to go.

Enigma offers few functions and one mixin to make setting up typography and vertycal rhythm easy. All you have to do is to give Enigma some basic settings for you project. (well you don't have to do it as Enigma have some defaults but if you really care about nice typography, then you will do it).

### Enigma settings

Enigma settings can be changed via SASS variable `$enigma`. This variable must defined after you load Enigma files. Full Enigma settings are (displayed values are defaults):

```SCSS
$enigma: (
'root': 16px,
'base': 16px,
'unit': 1rem,
'alfa': 1.5,
'beta': null,
'start': -3,
'stop': 5,
'line-shift': -7px,
'line-color': #15ADE6
);
```

__root__ - font size at `:root` element, value equals 1rem

__base__ - basic font size used for main body text. This size will have position 0 at modular scale.

__unit__ - unit to calculate all sizes in, currently only rem is supported and tested.

__alfa__ - primary scale to calculate all sizes from

__beta__ - (_optional_) secondary scale, if both alfa and beta are defined modular scale is created by merging these two. If only alfa is defined, modular scale is same as alfa.

__start__ - smalles index of scale - used to improve performance (sass doesn't have to calculate too many sizes). In most cases, this property doesn't have to be changed.

__stop__ - larges index of scale - used to improve performance (sass doesn't have to calculate too many sizes). In most cases, this property doesn't have to be changed.

__line-shift__ - align debug grid lines to be exactly below text, not in the middle. This is used for initial development, and exact value must be find out for each project. Each font have different height of characters, even for same font size.

__line-color__ - color of debug grid lines. Any valid CSS color should work.

### Mixin
description
_TODO_

### Functions
description
_TODO_

## To-Do:

- Test page - only typography cleanup is remaining (dashes quotes etc.), udělat JS zobrazování stylů( aby hned viděli, jak je to nastavené, vysvětlení)
- Test page - show of different enigma uses and settings
- Proper documentation.
- refactor project structure
- Support for responsive typography (CSS lock for fluid typography, different sizes for different screen sizes)
- Consider optional use of margin/padding for spacing
- refactor project structure
- custom scale (font-sizes) - need to re-think it.

## Knows bugs

Expand Down

0 comments on commit 7985e51

Please sign in to comment.