tomasesquivelgc/golden-ratio-fonts

Small single page app that calculates the golden ratio of any given number. Intended for font sizing.

Golden Ratio Calculator

📗 Table of Contents

• 📖 About the Project
  • 🛠 Built With
    • Tech Stack
    • Key Features
  • 🚀 Live Demo
• 💻 Getting Started
  • Prerequisites
  • Setup
  • Install
  • Usage
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• 📝 License

📖 Golden Ratio Calculator

Golden Ratio Calculator is a Single Page Application that aims to help web developers choose the right font size for their own projects. As developers and designers, one of our biggest tasks is choosing the right size for elements and texts ensuring a harmonious and cohesive blend. For this, I propose the Golden Ratio as a clear solution. To use this application simply introduce the font size you wish to scale up or down and it will calculate a list of numbers you can use, as well as showcasing the result on screen.

🛠 Built With

Tech Stack

• React.js
• TailwindCSS
• JavaScript

Key Features

• Golden Calculator
• Choose to scale up or down with one button
• Showcase of fonts in real time

(back to top)

🚀 Live Demo

• Live Demo Link

(back to top)

💻 Getting Started

You don't need to install this app to use it, simply go to the live demo and bookmark it for everyday use. But if you wish to install it on your local machine follow this steps:

Setup

Clone this repository to your desired folder:

  cd my-folder
  git clone [email protected]:tomasesquivelgc/Golden-ratio-fonts.git

Install

Install this project with:

  npm install

Usage

To run the project, execute the following command:

  npm run dev

(back to top)

👥 Authors

👤 Tomás Matías Esquivel

• GitHub: @tomasesquivelgc
• Twitter: @EsquivelTomas
• LinkedIn: Tomas Esquivel

(back to top)

🔭 Future Features

• Change scale button will recalculate results for better UX

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

If you like this project please give it a star and remember to bookmark the live demo!

(back to top)

🙏 Acknowledgments

I would like to thank my family and friends for always supporting me. I would also like to thank icons8.com for providing the favicon of this page.

(back to top)

(back to top)

📝 License

This project is MIT licensed.

(back to top)

golden-ratio-fonts's Issues

Add linters to project

ESlint and Stylelint are to be installed

Add about and Contact sections

Navbar will toggle display of Contact, Calculator and About sections.
This project will be a SPA.

calculate right proportions for design

Since the golden ratio will be at use, the best way to layout the page is using phi.
The task is to calculate the golden ratio for every element. Calculate every golden ratio percentage such as:
GR1 = 61.8%
GR2 = 38.2
GR3 = 23.6

ETC...

Add stylings

Functionality works. Styles are needed to give coherence.

Change scale button should recalculate font sizes

Create calculate function

A function that calculates 5 different values is needed. each time dividing the previous number by 1.618

Add "change direction" button

A button that changes the "direction" of calculated buttons. instead of going from highest to lowest, it changes to calculate from lowest to bigger numbers.

Add footer

Add "change units" button

A button to change the units of the fonts. For example, instead of px, rem, em or vw