TGIMBA .NET Core – CSS ‘Beautification’ – What’s in a color scheme?

Git  Code Commit (all commits between last post and this commit (link))

To be beautiful, you have to have color.  But not just any color, pleasing colors.  So today, I will be picking a new color scheme for The Globe In My Bucketlist Application (TGIMBA).

I am not much of a visual artist, but I have done this before.  Last time was on the short ‘Full Stack Developer’ series (this specific post Cascading Style Sheets (CSS) post is here).  There, I picked a violet(ish) foreground color and mixed it with a background of white.  The previous TGIMBA layout did something similar, but its foreground color mixed with white was green.  Both are…hmmm…ok.  I am hoping to do a little better here 🙂

So where does one find a good color scheme that speaks to you?  You look at what others are doing 🙂

I looked at a couple of web design sites and found some great ideas.  Reference #2 had the best list and I borrowed a couple of colors from #36.  To see what it looked like, I did a mock up.  I wanted something that (in theory) would look good for desktop and mobile.  For the initial layout, this is what I got.

Full Page

1

Mobile (ish)

1

I did the prototype using HomeController.cs’s Index.cshtml.  Rest assured, I will not leave the style attributes in place and any final CSS will reside in a .css file 🙂

1

Next will be to use the server side Utility.cs -> IsMobile() (previous blog post here) and flip between desktop and mobile.

Stay Tuned!

References

  1. https://www.sessions.edu/color-calculator/
  2. http://blog.visme.co/website-color-schemes/
  3. https://www.w3schools.com/css/css_border.asp
  4. https://stackoverflow.com/questions/7572420/how-to-vertical-and-horizontal-align-a-div-inside-another-div
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s