Box design about vanilla-framework HOT 14 CLOSED

@yaili what should the default box style be?

from vanilla-framework.

grey border, white background?

from vanilla-framework.

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 <
[email protected]> wrote:

grey border, white background?

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

from vanilla-framework.

Yes. And rounded corners?

from vanilla-framework.

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 <
[email protected]> wrote:

Yes. And rounded corners?

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

from vanilla-framework.

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?

from vanilla-framework.

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.

from vanilla-framework.

Totally, thank you.

On Fri, 19 Feb 2016, 12:43 Inayaili de León Persson <
[email protected]> 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)
.

from vanilla-framework.

Sounds good.

On Fri, 19 Feb 2016, 13:09 Anthony Dillon [email protected] wrote:

Totally, thank you.

On Fri, 19 Feb 2016, 12:43 Inayaili de León Persson <
[email protected]> 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)
.

from vanilla-framework.

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, …

from vanilla-framework.

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

from vanilla-framework.

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

from vanilla-framework.

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

from vanilla-framework.

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.

from vanilla-framework.