
Sing App – Open Source Admin Dashboard Template with Stylish Design - PhilipDaineko
https://flatlogic.github.io/sing-app/
======
elvirs
as someone who is struggling to modify the sh.t out of metronic to make it
look good and usable while fitting all needed information on the screen of our
saas ecommerce app I have to say this design suffers from the same issue
others do: little contrast between background color and text color as well as
very thin font. my eyes hurt trying to look up a button or a link or trying to
read text.

------
ChankeyPathak
In case you're looking for alternatives, this thread might be of some help:
[https://news.ycombinator.com/item?id=17241487](https://news.ycombinator.com/item?id=17241487)

------
midoreigh
AskHN: Which is your go-to free Admin Dashboard template?

~~~
jtreminio
I have been building my FOSS using Tabler:
[https://tabler.github.io](https://tabler.github.io)

~~~
elvirs
looks neat. whats the terms if i wanted to use it for commercial purposes?

~~~
jtreminio
The dev was great enough to use MIT:
[https://github.com/tabler/tabler/blob/dev/LICENSE](https://github.com/tabler/tabler/blob/dev/LICENSE)

~~~
elvirs
thank you

------
tommoor
Hey @PhilipDaineko – just an FYI there are a number of spelling mistakes on
the landing page, "custorem" "accountign"

------
sandGorgon
Very very cool. I wish people built reactjs dashboard templates. I would
literally throw money at it.

~~~
dsego
Aren't there plenty already? For example
[https://sigma.batchthemes.com](https://sigma.batchthemes.com)

~~~
sandGorgon
oh pretty cool. thanks for this!

------
d--b
Why do all these dashboard app waste so much space?

There's not a lot of info on that screen, and yet it doesn't fit in my
laptop... I could fit 3 times as much in an Excel spreadsheet...

~~~
retSava
My pet peeve is low contrast, makes it really hard to quickly distinguish
between parts of the page.

Simply by changing the light grey background for something much darker makes
the individual charts and boxes pop out, making it so much easier to
compartmentalize the information.

edit: [https://imgur.com/a/2cUQAXr](https://imgur.com/a/2cUQAXr)

~~~
dvfjsdhgfv
The reason why designers don't do that is rooted in the modern guidelines
advising against higher contrast as "bad style". That's why on many websites
we need to read dark-grey text on light-grey background. Black and white are
frowned upon in the UI design community.

~~~
jdietrich
Which guidelines? W3C's Web Content Accessibility Guidelines specifically
recommend a minimum contrast ratio of 4.5:1. Most web style guidelines that
I'm familiar with inherit this recommendation, including Material.

[https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-
cont...](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-
contrast.html)

[https://material.io/design/usability/accessibility.html#colo...](https://material.io/design/usability/accessibility.html#color-
contrast)

------
dsego
Washed out, thin fonts, horrible contrast. What's not to like?

~~~
icemelt8
I have yet to find an admin theme which uses proper legible fonts.

~~~
TomMarius
What fonts are good in your opinion?

~~~
dmitriid
Standard system fonts

~~~
TomMarius
What system? What standard fonts? My system has no standard fonts and I
wouldn't want to use fixed-width fonts on a website anyways; I'd also be very
unhappy if the website changed based on what device/system I'm using (I often
don't have control over that device).

------
gregoriol
Is there a dark mode?

~~~
distantsounds
Yeah, somewhat odd creating a dashboard catering to sysadmins and not have a
dark theme.

------
bobbydreamer
mdbootstrap has good samples and admin to has anybody used that.

------
vortico
I increased contrast, removed the nonsense drop shadows, decreased the global
font size. [https://i.imgur.com/r8CegSS.png](https://i.imgur.com/r8CegSS.png)
Still far from perfect, but just wanted to see how easily I could recover this
unfortunately nonfunctional design.

~~~
ainiriand
Yeah still a bit more to do but definitely an improvement. Sorry to ask, but
would you mind sharing this work with us? As a fork of the original?

~~~
vortico
I'm not sure if I can, since I just edited some things in Web Inspector. I
only changed the following though.

\- body color to black

\- removed all instances of "drop-shadow"

\- set backgrounds to white

\- reduce global font

I would recommend further to

\- slightly reduce padding between boxes

\- use a font designed for the screen. This one might have been, but it is not
as readable as certain other fonts.

A principle in web design is that _everything is rectangles_ , but you usually
don't have to actually make the rectangles visible. The eye can usually make
out the "boxes" of the page by glancing at the layout of the text.

~~~
ainiriand
Thanks for the hints, really appreciate it. I'm not that good with CSS
nowadays.

