[RFC] Define max-width for prosilver

[hanakin]

"thats just like your opinion man"

[Master_Cylinder]

Yeah, we need more memes...

[MattF]

Late to the party. But going max width without addressing the surroundings is a design oversight. Here are some options that provide content borders with reduced contrast to the background for less eye strain.

One has inset shadows to give it some pop and depth, the other is flat. (These were made in a rush so ignore the flaws at the very top of them)

Screen Shot 2014-06-24 at 11.15.45 AM.png (150.52 KiB) Viewed 645 times

Code: Select all

html, body {
	min-height: 100%;
	background: #e8e8e8;
}

#wrap {
	margin: 10px auto;
	padding: 12px;
	max-width: 1080px;
	border-style: solid;
	border-width: 1px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	border-color: #a0a0a0;
	background: #fff;
	-webkit-box-shadow: inset 0 -10px 15px #e0e0e0, 0 0 3px #a0a0a0;
	-moz-box-shadow: inset 0 -10px 15px #e0e0e0, 0 0 3px #a0a0a0;
	box-shadow: inset 0 -10px 15px #e0e0e0, 0 0 3px #a0a0a0;
}

Screen Shot 2014-06-24 at 11.20.51 AM.png (148.79 KiB) Viewed 645 times

Code: Select all

html, body {
	min-height: 100%;
	background: #e8e8e8;
}

#wrap {
	margin: 10px auto;
	padding: 12px;
	max-width: 1080px;
	border-style: solid;
	border-width: 1px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	border-color: #a0a0a0;
	background: #fff;
}

[MattF]

Lighter bg and border color
This border color is the same as used for HR tags and H3 tags, so it matches the other border lines

Code: Select all

html, body {
   min-height: 100%;
   background: #f5f7fa;
}

#wrap {
   margin: 10px auto;
   padding: 12px;
   max-width: 1080px;
   border-style: solid;
   border-width: 1px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   border-color: #ccc;
   background: #fff;
}

[hanakin]

I would say something more like this and I bumped the max-width to 1512px to accommodate those who have issues with 1152 fullscreen on 1680 to 1920 widths

Code: Select all

html, body {
    color: #536482;
    background-color: #F5F7FA;
}

#wrap {
    min-width: 650px;
    max-width: 1512px;
    margin: 15px auto;
    padding: 15px;
    border-radius: 6px;
    background-color: #FFF;
    border: 1px solid #D3DCE9;
}

Screenshot 2014-06-24 20.55.02.png (204.28 KiB) Viewed 620 times

Or with a lighter border of e6e9ed

Screenshot 2014-06-24 21.00.16.png (202.92 KiB) Viewed 619 times

[keith10456]

Personally, I like the first one in this post.

[nextgen]

Have you thought as you will see on mobile devices?
Before you can modify something should also make modifications to the responsive style.

[naderman]

Personally, I like the first one in this post.

That one is fine but I prefer the one with the lighter border.

[MattF]

I would say something more like this and I bumped the max-width to 1512px to accommodate those who have issues with 1152 fullscreen on 1680 to 1920 widths

Screenshot 2014-06-24 20.55.02.png

Or with a lighter border of e6e9ed

Screenshot 2014-06-24 21.00.16.png

I think too light... might as well be all white, which is what we are trying to avoid.

The original image in the PR was the best it has looked IMO. It's a shame it got derailed and that PR went in the wrong direction.

Throwing random colors at this to try and make it lighter or darker or whatever is not the way to approach this (my own ideas posted above included). Prosilver's entire color scheme should be taken into deep consideration. The background, the border colors all must have relevance to Prosilver's existing color scheme, and should blend and contrast with it seamlessly. It should look like it was meant to be, not something that has been tacked on.

That said, these changes should really be left to somebody with true graphic design experience, as everybody's tastes will differ and the only real solution to this will be an educated one, not a personal one. If there is no one truly qualified here to make such design decisions, then none should be made, until there is, IMO.

[Kamahl19]

Hanakin's first image is really great, second one is too light. I really like it and it reminds me first versions of prosilver from 2005 or 2006 if I remember correctly