Box design

[richmccartney]

A box styles to vanilla.

[anthonydillon]

@yaili what should the default box style be?

[yaili]

grey border, white background?

[anthonydillon]

That's what I was thinking. Something super simple for Vanilla. This sound
right?

border: 1px solid $warm-grey;
padding: 20px;
background-colour: $white;

On Mon, 15 Feb 2016, 19:12 Inayaili de León Persson <
notifications@github.com> wrote:

grey border, white background?

—
Reply to this email directly or view it on GitHub
#186 (comment)
.

[yaili]

Yes. And rounded corners?

[anthonydillon]

Oh yea, not sure. I think You and Spencer should talk about the default
style.

On Tue, 16 Feb 2016 at 09:38 Inayaili de León Persson <
notifications@github.com> wrote:

Yes. And rounded corners?

—
Reply to this email directly or view it on GitHub
#186 (comment)
.

[yaili]

I think that vanilla should include both simple and highlighted box styles. I think for now we might have to say:

• default vanilla is what is currently on ubuntu.com in terms of rounded corners
• current square juju style is a variation

Not sure what the default vanilla drop shadow is, but if Juju is more consistent that ubuntu.com we could decide that juju style is the default one for vanilla.

Make sense?

[yaili]

Thinking about this again, the header style is square in vanilla, so perhaps it makes more sense to have square cornered boxes in vanilla with added rounded corners to ubuntu, in that case Juju would be following plain vanilla style.

[anthonydillon]

Totally, thank you.

On Fri, 19 Feb 2016, 12:43 Inayaili de León Persson <
notifications@github.com> wrote:

I think that vanilla should include both simple and highlighted box
styles. I think for now we might have to say:

• default vanilla is what is currently on ubuntu.com in terms of
  rounded corners
• current square juju style is a variation

Not sure what the default vanilla drop shadow is, but if Juju is more
consistent that ubuntu.com we could decide that juju style is the default
one for vanilla.

Make sense?

—
Reply to this email directly or view it on GitHub
#186 (comment)
.

[anthonydillon]

Sounds good.

On Fri, 19 Feb 2016, 13:09 Anthony Dillon me@anthonydillon.com wrote:

Totally, thank you.

On Fri, 19 Feb 2016, 12:43 Inayaili de León Persson <
notifications@github.com> wrote:

I think that vanilla should include both simple and highlighted box
styles. I think for now we might have to say:

• default vanilla is what is currently on ubuntu.com in terms of
  rounded corners
• current square juju style is a variation

Not sure what the default vanilla drop shadow is, but if Juju is more
consistent that ubuntu.com we could decide that juju style is the
default one for vanilla.

Make sense?

—
Reply to this email directly or view it on GitHub
#186 (comment)
.

[yaili]

Agreed styles:

• .box (part of Vanilla)
  • background: transparent
  • border: warm-grey
  • no rounded corners (this is added by theme)
• .card (part of Vanilla)
  • background: white
  • radius: 2px
  • border: drop-shadow @faooful @spencerbygraves can you clarify, I had "grey" in my notes, but that doesn't sound right
• .box-overlay (part of Vanilla)
  • background: white
  • background opacity: 0.85
  • padding: 20px
• .card-resource (part of Ubuntu theme)
  • example: http://www.ubuntu.com/cloud/openstack/managed-cloud (end of page)

Utility class:

• .layer: defines drop shadow
  • mentioned using 200…900 but this was not agreed. Perhaps easier to use 1, 2, 3, …

[faooful]

@yaili #CDCDCD is the colour that we use for the border with a 2px radius.

[yaili]

@faooful in the .card too? what is the spec for the shadow?

[faooful]

@yaili oh for the card, sorry, we just have drop shadow + the 2px radius.

[barrymcgee]

The dev team is meeting next week to discuss Vanilla naming & structure which will heavily inform how this issue will be actioned.

It would also seem to be that "boxes" and "cards" are two distinct patterns and shouldn't be conflated? More info is needed here so de-prioritising for now.