create account

Minor Graphene UI Advanced Mode CSS Tinkering (OpenLedger) by sandwich

View this thread on: hive.blogpeakd.comecency.com
· @sandwich · (edited)
$7.41
Minor Graphene UI Advanced Mode CSS Tinkering (OpenLedger)
### Preamble
The exchange on Bitshares has always made my eyes hurt. It may be the typography proportions, or maybe it's the abundance of high contrast hairline borders. It's gotten so bad, that I've started tinkering with the CSS. I've noticed @openledger has been putting some work into the GUI, which has inspired me to write this post. Here's where 10 minutes got me. 

### Before
[![bitshares-before.png](https://steemitimages.com/DQmRcsH2unrzorzTFzy5Hg49BDV2yB2DbfJPW4Y3CRF1rxx/bitshares-before.png)](https://steemitimages.com/DQmRcsH2unrzorzTFzy5Hg49BDV2yB2DbfJPW4Y3CRF1rxx/bitshares-before.png)

### After
[![bitshares-after.png](https://steemitimages.com/DQmcvRNbfia9QmmxvVDbyTz3WKdEafkZ3fzBZkf1aoUBbbb/bitshares-after.png)](https://steemitimages.com/DQmcvRNbfia9QmmxvVDbyTz3WKdEafkZ3fzBZkf1aoUBbbb/bitshares-after.png)

### Changes
- I removed as many high-contrast hairline borders as I could, making some lower contrast
- Darkened the backgrounds
- Made the alternative even/odd rows in tables lower-contrast
- Added contextual coloring to the headers of tables
- Altered heading typography by increasing the font-weight and decreasing the font-size. 
- Added a thick extra low-contrast border around the exchange tables. 

### Observations
- Important highlighted texts, such as Pair Links and 24 Hour Change, stand out more.
- Soft edges make for a less harsh experience. 
- Darker overall experience provides more depth.
- Use of contextually relevant colors allows for a more intuitive experience.
- Smaller/Bolded text for table headings are more pronounced and have a better aesthetic. 

### Wrapping up
If there is a positive response to this post, I'll put a few more hours into working concepts and stylesheets. Stylesheets  could then be appended to the DOM of OpenLedger safely in a variety of ways. 

_What do you think?_

#powerupchallenge
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
properties (23)
authorsandwich
permlinkminor-graphene-ui-advanced-mode-css-tinkering-openledger
categorybitshares
json_metadata{"tags":["bitshares","graphene","graphene-ui","openledger","powerupchallenge"],"users":["openledger"],"image":["https://steemitimages.com/DQmRcsH2unrzorzTFzy5Hg49BDV2yB2DbfJPW4Y3CRF1rxx/bitshares-before.png","https://steemitimages.com/DQmcvRNbfia9QmmxvVDbyTz3WKdEafkZ3fzBZkf1aoUBbbb/bitshares-after.png"],"links":["https://steemitimages.com/DQmRcsH2unrzorzTFzy5Hg49BDV2yB2DbfJPW4Y3CRF1rxx/bitshares-before.png","https://steemitimages.com/DQmcvRNbfia9QmmxvVDbyTz3WKdEafkZ3fzBZkf1aoUBbbb/bitshares-after.png"],"app":"steemit/0.1","format":"markdown"}
created2017-03-19 00:19:21
last_update2017-03-19 20:25:06
depth0
children1
last_payout2017-04-19 02:35:57
cashout_time1969-12-31 23:59:59
total_payout_value5.584 HBD
curator_payout_value1.822 HBD
pending_payout_value0.000 HBD
promoted1.032 HBD
body_length1,864
author_reputation7,919,075,206,622
root_title"Minor Graphene UI Advanced Mode CSS Tinkering (OpenLedger)"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd0
post_id2,762,847
net_rshares5,160,062,351,016
author_curate_reward""
vote details (43)
@pipes ·
Your [reward](https://steemit.com/steem/@tibonova/introducing-pipes) for being in `Promoted` is an upvote and 0.032 SBD extra promotion. 
Good job, keep your contents promoted! :)
👍  ,
properties (23)
authorpipes
permlinkre-sandwich-minor-graphene-ui-advanced-mode-css-tinkering-openledger-20170319t075804586z
categorybitshares
json_metadata{"tags":["bitshares"],"links":["https://steemit.com/steem/@tibonova/introducing-pipes"],"app":"steemit/0.1"}
created2017-03-19 07:58:06
last_update2017-03-19 07:58:06
depth1
children0
last_payout2017-04-19 02:35:57
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length179
author_reputation5,564,763,471,483
root_title"Minor Graphene UI Advanced Mode CSS Tinkering (OpenLedger)"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id2,765,392
net_rshares11,793,068,426
author_curate_reward""
vote details (2)