From dcfb172704f3afb68a30425029ec834be2883274 Mon Sep 17 00:00:00 2001 From: bt Date: Sat, 8 Jun 2024 13:22:19 -0400 Subject: More content porting, on-going markdown changes for lowdown support --- build/improving-githubs-new-design/index.html | 68 ++++++++++++++------------- 1 file changed, 36 insertions(+), 32 deletions(-) (limited to 'build/improving-githubs-new-design') diff --git a/build/improving-githubs-new-design/index.html b/build/improving-githubs-new-design/index.html index 6f4aa02..36f2eb9 100644 --- a/build/improving-githubs-new-design/index.html +++ b/build/improving-githubs-new-design/index.html @@ -1,52 +1,55 @@ - + Improving Github's New Design - - + + +
-

Improving Github's New Design

+

Improving Github’s New Design

+

2020-07-07

+

Like many other Github users, I am not a big fan of their recent repository page redesign. In my mind it seems like a change just for the sake of change - the original UI worked perfectly fine.

+

Sigh.

+

I was planning on recreating the original Github layout with custom CSS but decided against it. Tackling such a big change in design would cause headaches if Github ever changed even one simple class or id on a given element. My final conclusion was to just improve their new design with my own personal quality of life improvements.

-

So, enough chit-chat. Let's get into it.

-

Current Design (2020)

-

The default view for a repo's homepage and ticket items are locked at a set max-width. This causes some visual strain in comparison to the full-width headers and navigations directly above. I use a decently sized montior when using your app Gitub - let me use all the space available to me!

-

-Current Github design -
The current design of a repo's homepage. (direct link to image)
-

-

-Github ticket design -
The current design of a ticket item (direct link to image)
-

-

My Improvements

-

Your users shouldn't have to jump around the page looking for the important information they want to see. Resetting the basic repo information to the left side of the screen allows user to instantly read-up on the project details. (This design is catered towards left-to-right readers mind you).

-

We now also utilize all the available screen space, dependent on the user's browser window size.

-

-Current Github redesign -
The repo's homepage now uses all available space (direct link to image
-

+ +

So, enough chit-chat. Let’s get into it.

+ +

Current Design (2020)

+ +

The default view for a repo’s homepage and ticket items are locked at a set max-width. This causes some visual strain in comparison to the full-width headers and navigations directly above. I use a decently sized montior when using your app Gitub - let me use all the space available to me!

+ +

My Improvements

+ +

Your users shouldn’t have to jump around the page looking for the important information they want to see. Resetting the basic repo information to the left side of the screen allows user to instantly read-up on the project details. (This design is catered towards left-to-right readers mind you).

+ +

We now also utilize all the available screen space, dependent on the user’s browser window size.

+

We make similar updates to the ticket item view and also remove the out-of-place margin-bottom from the project link headers.

-

-Github ticket redesign -
Github ticket items now align better with their header siblings (direct link to image)
-

-

Try It Yourself!

+ +

Try It Yourself!

+

You can very easily implement these custom CSS changes with an extension for the browser of your choice:

-

Firefox: Stylus - Chrome: Stylebot

+ + +

Then create a new custom CSS file to target github.com with the following properties:

+ 
.container-xl {
     max-width: 100%;
 }
@@ -59,7 +62,7 @@
     flex-direction: row !important;
 }
 
-.repohead > div.d-flex {
+.repohead > div.d-flex {
     margin-bottom: 0 !important;
 }
 
@@ -74,7 +77,8 @@
     width: 100%;
 }
-

That's it! Feel free to improve on this and further make it your own! I might create a new repo for this project if I end up adding even more improvements to the core CSS.

+ +

That’s it! Feel free to improve on this and further make it your own! I might create a new repo for this project if I end up adding even more improvements to the core CSS.