Shadows 2.0 global margins?

[William Davis]

Is there any reason why Shadows 2.0 global margins are so wide?

Is it a responsive/multi device resolutions issue better left untouched or developer preference?

[Matt Zimmermann]

Hi Bill,

Default margins are set by the base unit measure in Shadows. The base unit of measure in Shadows is 16px. It was chosen based on the average default text size used by browsers across platforms and devices; not to mention that some of the most popular screen sizes are divisible by 16 evenly. I had looked at using an 8px base, but at the time it seemed a little overkill and would add to making the leaning curve a little higher when going from v1 to v2. You could create your own base version using the Developer Edition or add in utility classes to modify the existing margins if you'd like to.

[William Davis]

Hi Bill,

Default margins are set by the base unit measure in Shadows. The base unit of measure in Shadows is 16px. It was chosen based on the average default text size used by browsers across platforms and devices; not to mention that some of the most popular screen sizes are divisible by 16 evenly. I had looked at using an 8px base, but at the time it seemed a little overkill and would add to making the leaning curve a little higher when going from v1 to v2. You could create your own base version using the Developer Edition or add in utility classes to modify the existing margins if you'd like to.

Thank you, it makes perfect sense.

[William Davis]

Hi Bill,

Default margins are set by the base unit measure in Shadows. The base unit of measure in Shadows is 16px. It was chosen based on the average default text size used by browsers across platforms and devices; not to mention that some of the most popular screen sizes are divisible by 16 evenly. I had looked at using an 8px base, but at the time it seemed a little overkill and would add to making the leaning curve a little higher when going from v1 to v2. You could create your own base version using the Developer Edition or add in utility classes to modify the existing margins if you'd like to.

So thinking out loud, having Shadows global header go on a diet being that it currently takes up about 1/3 above the fold real estate for something leaner (by 50%, e.g.: Target, Amazon, Walmart) could get very complicated very quickly?

I wouldn't remove the global promo header, that's crucial for sale promotions when visitors land on a page other than the storefront. But there is a lot precious white space that might be better suited for a longer search bar field to accommodate products with longer names and possibly strike price in autocomplete display, stacking sign-in icon/name, adopting a slimmer cart/badge design, and in our case replace tabs with a mega menu. Too complicated?

[Matt Zimmermann]

Hi Bill,

Not too complicated, but it will require a decent amount of custom CSS.