Re: [pgadmin-hackers] [Design update] Style guide for pgAdmin4 - Mailing list pgadmin-hackers

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. 

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.

Is there anything I'm missing?

Shirley

On Tue, Apr 18, 2017 at 12:11 PM Shirley Wang <swang@pivotal.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