Calculate and preview the perfect spacing scale in web apps.
This project is the culmination of some space exploration in web apps. I've attempted to find a suitable space system while also trying out some ideas while retaining responsiveness.
The primary goal of this exploration was to determine whether it was feasible to:
- Consolidate margin and padding utility classes across screen sizes
- Determine the appropriate scale to implement in Zipline
- See the effect of implementing Text Crop to set consistency between line-heights and space
Secondary goals shaped some of the technology decisions. I wanted to:
- Try Parcel for bundling assets
- Get more practice with TypeScript
- Use as few frameworks as possible, thus imitating the Elm Architecture or Redux Pattern in
update.ts - Learn CSS Custom Properties
- Add githooks for index and dist
- Add some UI elements to the bottom of the page for a space + typography side-by-side comparison
Golden Scale is built on a Node Environment. You'll need a copy and Node and NPM. Personally, I've used Yarn for this project.
Install the project by running yarn in the CLI.
Start the NPM server with yarn start and visit http://localhost:3000.
The page is packaged with Parcel and hosted on Github Pages. For technical reasons the "dist" folder is in the root folder (for now). You'll see index.html and hashed javascript and CSS files.
To create a new build:
- Run
yarn build - Commit the build to
master branch - Push the changes
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent