search

ItsJonQ / g2

✨ An experimental reimagining of WordPress components
http://g2-components.com/
MIT License
105 stars 12 forks source link

Design Tools: Typography #65

Open ItsJonQ opened 4 years ago

ItsJonQ commented 4 years ago
Screen Shot 2020-10-15 at 4 31 38 PM

Currently working through some ideas (both design and code) for Typography design tools.

Below are a collection of Story/prototypes. It's all very work-in-progress. Each prototype experiments with a different aspect of the control experience (e.g. UI or interaction or layout)

Think of these as a collection of "frames" or "artboards" a designer may have in Figma or Sketch.

1. Options

https://g2-components.xyz/iframe.html?id=designtools-typographytools--options&viewMode=story

2. Plus/Minus

https://g2-components.xyz/iframe.html?id=designtools-typographytools--plus-minuss&viewMode=story

3. BaseLine

https://g2-components.xyz/iframe.html?id=designtools-typographytools--base-line&viewMode=story

4. BaseLine + Steppers

https://g2-components.xyz/iframe.html?id=designtools-typographytools--base-line-stepper&viewMode=story

5. Plus/Minus Inline

https://g2-components.xyz/iframe.html?id=designtools-typographytools--plus-minus-inline&viewMode=story

6. Plus/Reset Inline

https://g2-components.xyz/iframe.html?id=designtools-typographytools--plus-reset-input&viewMode=story

7. Plus/Minus Inline + Truncate Labels

https://g2-components.xyz/iframe.html?id=designtools-typographytools--plus-minus-inline-truncate&viewMode=story

8. Presets and Colors

https://g2-components.xyz/iframe.html?id=designtools-typographytools--ellipsis-with-color-alt-theme&viewMode=story

9. Color Palette with Select dropdown

https://g2-components.xyz/iframe.html?id=designtools-typographytools--alt-theme-with-palette-dropdown&viewMode=story

10. Panels

https://g2-components.xyz/iframe.html?id=designtools-typographytools--alt-theme-with-panels&viewMode=story

11. Color Panels: Shaded background on expand

https://g2-components.xyz/iframe.html?id=designtools-typographytools--shaded-color-panel-expand&viewMode=story

12. Color Panels: Bordered on expand

https://g2-components.xyz/iframe.html?id=designtools-typographytools--bordered-color-panel-expand&viewMode=story

ItsJonQ commented 4 years ago

The latest one is "Presets and Colors". This one has been updated several times after a few design iteration cycles :)

https://g2-components.xyz/iframe.html?id=designtools-typographytools--ellipsis-with-color-alt-theme&viewMode=story