Style guide + visual redesign

[jrubenoff]

Alright, here's a start.

Right now, the dvl-core app mostly serves as a visual unit test and outdated pattern library. This PR:

• Contains a new, consistent visual design
• Adds a design spec and guidelines for developers
• Organizes every existing component and brings the markup up-to-date
• Moves many styles for common components into here from Screendoor

Our apps will need some adjustment before merging this in, but this PR is intended to have as little external impact as possible. I'll be renaming components, changing others, and generally saving other "breaking changes" for subsequent releases.

This is mostly about how things look, so anyone on @dobtco/team is welcome to give feedback. Just follow these steps:

1. Clone this repo
2. Open Terminal.app, navigate to this folder
3. Type script/bootstrap, then script/server
4. Visit http://dvlcore.dev in your browser

[ajb]

:clap:

Great job! This is truly a masterpiece... I really like how you've refined the visual styles. All of my feedback is minor:

Feedback on the content of the styleguide

• [x] I'm not so sure about orange as a primary button color. Am I the only one that feels this way? EDIT: How about our brand color, navy blue?
• [x] Dropdown_select hover state http://take.ms/OnNYd
• [x] There's a perceptible delay when checking radios and checkboxes (http://take.ms/bAvAt)
• [x] Native <select> isn't filling 100% height (http://take.ms/Vb2Xp and http://take.ms/9OEKy)
• [x] Input group text padding http://take.ms/3WCCD
• [x] Subtle class? http://take.ms/6E4SI
• [x] Small vs mini http://take.ms/IimZL
• [x] Rename button size http://take.ms/3aCzV
• [x] Nav input border color http://take.ms/M2Y45
• [x] Filter dropdown thick border http://take.ms/yvB4V
• [x] Modal close vertical alignment http://take.ms/LmtWQ
• [x] http://dvlcore.dev/splash is super funky :)

Feedback on the styleguide itself

• [ ] http://dvlcore.dev/headers is hard to parse. Maybe if we put each example in a well, or another kind of visual container?
• [x] The hero unit header is kinda annoying to scroll through on every page. Should we consider only using it on the homepage?
• [x] I'm impressed with what you've done with Erector and the helpers you've written here. Can I refactor some of them though? :)

[kariannemah]

The copy here is a bit confusing. In this particular example, does the minus icon indicate that more than one response has been selected and Clay is assigned to some of the them but not others?

[ajb]

Some other thoughts...

• The navbar went from 52px to 64px tall. (when rendered at desktop viewports) While I'm :+1: on making our font sizes bigger, the fact that we're using fixed navbars in a lot of places makes me want to keep it a bit smaller, in order to give ourselves more viewport space to work with. If you look at Screendoor's formbuilder when rendered with the new dvl-core, the navbar + bottom_status_bar probably take up 150px of vertical space in total, which negatively impacts the usability of the formbuilder, IMO.
• What about flashes? (https://github.com/dobtco/dvl-core/pull/83)

[jrubenoff]

Thanks, Kari and Adam! Addressed most of your comments. Some of these problems occurred because I didn't specify Source Sans Pro correctly, so I'd recommend you take another look at headers, etc.

There's a perceptible delay when checking radios and checkboxes

Can't reproduce this in Safari, FF, or Chrome. What browser are you using?

Rename button size http://take.ms/3aCzV

It's supposed to be that large, to match the h2.

Filter dropdown thick border

We can change to this if it's really an issue, but IMO it's uglier:

---

As for the splash footer, I wanted to take that out of dvl-core, but let me redesign it instead.

Let's create two variants of the hero image. Not sure how to change the layout depending on each page... can you handle that?

Feel free to refactor the partials... as long as the design doesn't change, I don't care.

Also, I barely touched flashes. Didn't want to step on the work you've done. We can merge that in after this.

[ajb]

As for the splash footer, I wanted to take that out of dvl-core, but let me redesign it instead.

We can take it out, but if we do, we should put it in a repository somewhere where all of the apps using it can vendor it in. (Splash, knowledge base.... maybe that's it.)

[ajb]

Can't reproduce this in Safari, FF, or Chrome. What browser are you using?

Chrome. This "issue" exists in master too, but I think I'm noticing this here because the element is bigger. The transition on the checkbox and radio icons just makes them feel sluggish. Maybe we can speed them up a little bit? I don't know, there has to be a reason why they feel more sluggish in this branch....

---

It's supposed to be that large, to match the h2.

Right, I think it's too prominent for a button that will maybe be clicked once. Can we just remove the border maybe?

---

We can change to this if it's really an issue, but IMO it's uglier:

Unfortunately I think it is an issue... especially when combined with the "multiple sections" (visible in the assignment dropdown w/ teams) it looks really off.

---

Let's create two variants of the hero image. Not sure how to change the layout depending on each page... can you handle that?

Yup, of course.

---

I'm not so sure about orange as a primary button color. Am I the only one that feels this way?

You checked this off, but I don't see any code changes, or any response to this in your comments.

---

---

I finally grokked the thing about .subtle buttons being hidden instead of disabled... I still don't totally get why that behavior exists, or when we'd use it. But maybe that's just me.

---

[ajb]

Actually, the radio / checkbox behavior appears to be a lot better in Screendoor than in the style guide... maybe we should investigate during our check-in today.

[aviv]

This looks great! Looking forward to having more re-usable components and design patterns/guidance.

[jrubenoff]

I'm up for changing the filter dropdown, but since I don't have a problem with it, I wanted to make sure we're talking about the latest commit:

Is that still too weird? If so, no worries. I'll change it.

Just fixed everything else you mentioned.

[ajb]

No; that solves my only real problem with it. I think I can get used to the thick border.

It looks like pretty much all of the comments have been addressed, besides the ones about the styleguide itself. I can work on those today.

[ajb]

As you mentioned yesterday, I think we should add some documentation around icons. I'm not really sure how we're using font-awesome and our own iconset at the same time.

[jrubenoff]

Currently we're not using them at all, I just committed the fonts and styles to the repo as a starting point.

How about we delete the icons, merge this, and then add them back in a subsequent PR?

[ajb]

That would certainly make sense :D

[ajb]

Just made some commits where I said I would. Two more unimportant comments:

---

[ajb]

Are cssgradients the only thing we're using modernizr for? If so, I'd like to replace our build with this one: http://modernizr.com/download/#-cssgradients-cssclasses

[jrubenoff]

Sure, I just need those CSS classes.

On Thu, Jul 2, 2015 at 11:28 AM, Adam Becker notifications@github.com wrote:

Are cssgradients the only thing we're using modernizr for? If so, I'd like to replace our build with this one: http://modernizr.com/download/#-cssgradients-cssclasses

— Reply to this email directly or view it on GitHub https://github.com/dobtco/dvl-core/pull/105#issuecomment-118117027.

[jrubenoff]

I think we can merge this in whenever Screendoor's PR is ready.

[ajb]

I think the content of this PR is ready, but I'd like a chance to quickly refactor a couple of things before merging:

• [x] Tweak modernizr build
• [x] Remove custom iconset

Can you also address this one item from above?

• [x] nav dropdown placement

[ajb]

Another question: Adding .modal_footer_actions touches a lot of code, and I'm not entirely sure why we need it: https://github.com/dobtco/dvl-core/blob/redesign/vendor/assets/stylesheets/dvl/components/modals.scss#L145-L166

The comment on line 145 says "Footer (for actions)". And what's the different between footer_actions and footer_link?

[ajb]

Here are some bugs in IE9 (sorry):

• [x] Dropdown carets http://take.ms/BZgsR
• [x] checkbox checks http://take.ms/WR3qn
• [x] icon vert align http://take.ms/dx0oH
• [ ] really grainy logos http://take.ms/eSTzs
• [x] more icon alignment http://take.ms/P7qio
• [x] even more icon alignment http://take.ms/5L2tF

Is there a way that we're vertically aligning things that doesn't work in these older browsers? I'd like to know, too...

[ajb]

Just caught a code issue:

We appear to be distinguishing between our two pagination components using + .pagination_status like so:

This strikes me as not very maintainable and not very performant. Why not just create two separate components?

[jrubenoff]

I just added vertical alignment mixins for margin-top and top, to fix IE9 issues.

I was waiting to refactor .pagination_status in a future PR to minimize code changes in Screendoor, but since we apparently only use it once, I just refactored it. Also renamed the modal footer containers to .modal_footer_primary and .modal_footer_secondary... they're for primary and secondary actions.

You can add -ms-interpolation-mode: bicubic for images, which I just did, but it still looks pretty bad. To improve it further, I think we would need to use IE filters, which require extra inline styles, so I'd rather not.

That's everything.

[ajb]

It works in IE9! Consider me extremely impressed :)

Here's one bug though:

[jrubenoff]

Just fixed that.

[ajb]

I know Screendoor's PR has a couple of outstanding issues, but it seems like this one is good to merge.

[ajb]

• [ ] selects in filter forms:

I'm not sure why there is a margin being applied, so I'll wait to make any changes.

[ajb]

Merged in #114.