search

google / material-design-lite

Material Design Components in HTML/CSS/JS
https://getmdl.io
Apache License 2.0
32.26k stars 5.04k forks source link

Change Footer color #4006

Closed Garbee closed 7 years ago

Garbee commented 8 years ago

We should change the primary color of the footer. Snackbars are required to be attached to the bottom of the screen. They have a dark grey background as well. Which means, it is very easy to miss snackbars and toasts.

Not sure what we should do instead since Footer isn't specified. Anyone have any input here? I'm thinking we should just go with a white background footer.

RenDvila commented 8 years ago

How about the footer color is based on the overall branding tonality of MD with a slight tonal grade variation? Some fresh pastel tones are easy to identify on the CSS and pleasant to look at. You could take a look at this: #51DCC3.

Cheers!

Garbee commented 8 years ago

Yea, we should do some shade of the primary color I think. Accent colors shouldn't be used with such a large area. Should certainly not be the direct primary color, two or three shades in either direction would give it some decent contrast.

RenDvila commented 8 years ago

Agree, probably we can also apply some hue opposites based on the color wheel. || Cold tones gets a better contrast when put side to side with warm tones. The trick is to play with the opposite ends of the wheel for better composition, at times colors in between the ends tends to look nice as well. ||

I could help creating a color palette if you like? The palette could be utilized for multiple purposes, from headers, gradients, overlays, wrappers or footers. :)

colorwheel

Garbee commented 8 years ago

We don't need help creating new pallet options. MD specs it out enough. We simply need to find a good shade to use from the provided pallets.

RenDvila commented 8 years ago

Maybe I rephrase my comment in fewer words, what I meant was a curation of the tonalities from the MD palette placed in a scheme of different shades for multi purpose utilization. We can start with this general selection to further curate two colors from each palette:

pink teal green deep purple grey

From here we can now do a deeper curation to only select two tones of each palette except for the "Grey" palette where we can utilize all the tonalities mainly for the text instead of pure black and white.

Cheers!

RenDvila commented 8 years ago

My personal suggestions would be:

// Footer Background:

// Footer Text Normal:

// Footer Text Hover:

Snackbars and Toasts will do just well over the proposed Footer backgrounds, as the dark grey will surely out stand enough while remaining pleasant to look at.

Garbee commented 8 years ago

Taking a peek at our existing setup, all we need to do is use the darker primary color that is already defined. For the text color, we just use the standard contrast color.

The existing color is also right on the "two or three shades" I was considering to begin with. So, looks like a good snug fit without much extra reworking to get done.

As far as text hover color... I'm not following on that one. We don't style text on hover so what is that supposed to mean? I'd assume it should be selection but, not positive enough.

RenDvila commented 8 years ago

So it means that you know what to do then.

The hover is mainly for the footer and header text links. Unless you really don't feel it's "design friendly" to have such function added, then I would recommend that you discard that option fully as you said.

Garbee commented 7 years ago

Footer is being removed in V2 as it isn't a specified component. Therefore, closing this issue out as it is no longer relevant to the project's goals.