Re: [Design update] Style guide for pgAdmin4

Hi,

As I was going through the app, I noticed some inconsistencies with tables
in popups, namely the height of each row and width between icons.

Unclear as which should be considered the right one.
[image: current_styles.png]

I propose documenting this:

- Even spacing between icons
- height of each row is always at 28px, regardless if there's a drop down
menu or not.
[image: dropdown-icons_spaced.png]

[image: text_input-icons_spaced.png]

Is there anything I'm missing?

Shirley

On Tue, Apr 18, 2017 at 12:11 PM Shirley Wang <swang(at)pivotal(dot)io> wrote:

> Hello Hackers,
>
> We've started to work on creating a style guide for pgAdmin4.
>
> Our goals with the style guide are to:
> - have a single source of truth for visual design and workflows
> - make it easier when adding or updating a section to the app to maintain
> consistency
>
> How we'll know we're successful:
> - conversations about design are more high level, driven by user needs and
> pains
> - decreasing (or at least not adding to) current css bloat due to
> templating and overwrites
>
> Process for creating a style guide
> We're going to start from the smallest building blocks of the site and use
> that to define larger and larger components. Currently, we're taking
> inventory of current styles in the app, including colors, typography,
> buttons, dialogs etc.
>
> Given how the front end is currently structured, we were thinking that
> static documentation of styles would be a good MVP, at least until we
> determine what the best documentation for developers on the community would
> be. Attached is the inventory of styles as of now, including a Sketch file
> (a tool for creating design mockups, also where I've been keeping track of
> styles). You can also access files here on Google drive here:
> https://drive.google.com/drive/folders/0B7jMyxF3NH5lb2JxREUxclp1Unc?usp=sharing
>
> Please feel free to edit the Sketch file- my only ask is new versions hare
> named accordingly.
>
> *If you have worked on front end features in pgAdmin before, we'd like to
> chat with you about your process and what it was like to implement styles. *Let
> us know some times for a chat!
>
> Thanks,
> Shirley
>
>