https://github.com/timmybytes/rational-design
A tool for creating ratio-based style systems built in React.
https://github.com/timmybytes/rational-design
font-size react responsive-design scss
Last synced: 3 months ago
JSON representation
A tool for creating ratio-based style systems built in React.
- Host: GitHub
- URL: https://github.com/timmybytes/rational-design
- Owner: timmybytes
- License: mit
- Created: 2020-12-27T22:16:31.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-03-08T17:09:21.000Z (over 3 years ago)
- Last Synced: 2025-04-09T16:45:02.791Z (about 1 year ago)
- Topics: font-size, react, responsive-design, scss
- Language: JavaScript
- Homepage: https://timmybytes.github.io/rational-design/
- Size: 11.6 MB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
A tool for ratio-based design
Built with ❤︎ by
Timothy Merritt
Rational Design is a tool for generating type-scales for greater consistency in
design systems or web design projects. It’s built with React Hooks, SCSS,
Webpack, and npm scripts, and is fully responsive.
## About
Design systems often use a set mathematical ratio in how elements of different
sizes relate to one another, particularly with the use of type. Rational Design
let's you demo various type scales based on classical geometric and musical
ratios. These scales can then be applied to your own projects via a CSS, SCSS,
or JSON copy-to-clipboard function, ensuring your project has an underlying
guide for scaling consistency.
## Usage
### Web App
Use the [live web app](https://timmybytes.github.io/rational-design/) to create
a ratio-based type scale. You can click the **info button** in the app for more
details. Play around with the settings to generate different scales.
#### Select a ratio
Choose a ratio from the dropdown menu to define the increments of your scale.
The ratios included come from musical-based ratios, as well as Orthagon ratios.
You can
[read more about using ratios in your layouts and designs here](https://alistapart.com/article/content-out-layout/).
#### Choose a base size
Choose a base font size (in pixels). The rest of your scale will be calculated
starting from this number by applying your chosen ratio to each increment.
#### Choose a scale
The **scale** determines how many ratio increments the app should output. The
default is 3, but you can go up to 99.
#### Chose colors
A color chooser is incorporated into Rational Design as well. Use the color
pairings to see your type scale in different color contrasts.
#### Copy your type scale
The settings you create can be copied as SCSS, CSS, or JSON data, and pasted
right into your project. You can use the resulting increments as a system for
consistency in your projects:
##### Copied settings as SCSS variables
```scss
// Color Variables
$foreground: #444444;
$background: #8bbbff;
// Type-Scale Variables
$base-font-size: 12px;
$ratio: 1.118;
$size-1: 12px;
$size-2: 13.42px;
$size-3: 15px;
```
#### Hide settings
You can also hide the settings panel altogether by clicking the **hide** button.
---
### Local Development
To run and configure locally, follow these steps:
#### Fork and Clone Repo
Fork and clone the repo to your local machine:
```sh
git clone https://github.com/timmybytes/rational-design.git
```
`cd` into the repo, and install dependencies:
```sh
cd rational-design/
npm install
```
#### Development
To start a development environment:
```sh
npm start
```
## Contributing
Feel free to submit a pull request if you want to add features or changes.
## License
Rational Design is available under the [MIT license](./LICENSE.md).