web-illinois / toolkit

This library provides styles and web components for creating branded UIUC websites.
18 stars 7 forks source link

Feature Split #125

Closed bryanjonker-illinois closed 3 years ago

bryanjonker-illinois commented 3 years ago

Create feature split based on zeplin files.

mwllr commented 3 years ago

Here it is in progress on Drupal: https://staging.ansc.illinois.edu/testing/test-feature-split

bryanjonker-illinois commented 3 years ago

Cool!

Does the orange gradient meet color contrast guidelines?

bryanjonker-illinois commented 3 years ago

Two quick questions:

  1. In the Zeplin files, it looks like the buttons are transparent, but the Drupal has solid backgrounds. Could you clarify what it should be?
  2. In the Zeplin files, it looks like that the images are fixed and roughly square, no matter what the copy length is. In the Drupal example, the size of the image shrinks if there isn't much copy. Could you clarify what needs to be done?
mwllr commented 3 years ago
  1. gradients are tweaking... I'll get those to you when we finalize, and yes, it will be accessible for all font sizes.
  2. Only thing I see right now is the weird spacing on buttons when it stacks inside button - see image. (lots of extra space on right side of text) Screen Shot 2021-07-20 at 11 41 04 AM
mwllr commented 3 years ago

I would like to see another test page with different images and text options. We will get you a few examples. or steal any from grainger or staging.ansc.illinois.edu

bryanjonker-illinois commented 3 years ago

Fixed the margin issue.

@mwllr -- Added some more examples from grainger. This also illustrates the default alternating pattern we talked about. I'm going to document this on the wiki.

https://cdn.brand.illinois.edu/toolkit/dev/examples/components/feature-split/alternating/index.html

bryanjonker-illinois commented 3 years ago

@mwllr -- also added a CodePen so if you want to test through that, you can.

https://codepen.io/il-toolkit/pen/PomJdrE

mwllr commented 3 years ago

https://cdn.brand.illinois.edu/toolkit/dev/examples/components/image-feature/default/index.html https://cdn.brand.illinois.edu/toolkit/dev/examples/components/image-feature/alternating/index.html

mwllr commented 3 years ago
mwllr commented 3 years ago

Big ask, but can you put in a few images on the page with icons and such so I can see different ones.

mwllr commented 3 years ago

We need to flip the blue gradient. light top, dark bottom, same colors.

mwllr commented 3 years ago

something is funny here - not centered.... Screen Shot 2021-07-30 at 2 45 39 PM