Styling the Soup To Bits!

[adamfortuna]

trafficstars

The Soup to Bits for this course is coming along on the soup_to_bits branch. The plan for it as it stands now is that we'll be building out the "blog" page in this Soup to Bits, but also making some style changes which will affect the index.html page as well. The goal is to start making it look less bootstrap-y, which also using what we learned in the course to make a new page. After that, we'll deploy our site (either using FTP like FeF, or using GitHub Pages). I'm leaning towards GH pages, but we'll see.

I was wondering if someone on the design side could give it a look over and maybe give some suggestions / colors / feedback on the CSS side of things? We'll be writing every line of css in the css/main.css file. I've defaulted much of the color choice to be similar to my blog for now (choosing colors is hard)! Would be interested in suggestions from the design side on what we could do to make it stand out from other Bootstrap sites. The biggest questions/concerns are:

• Any color suggestions for the navigation, fonts, hover color, h1, leads, blasting off, footer.
• Planning on using Google Fonts and adding "Open Sans" as a good way to make your site stand out. Any other fonts we should consider instead (want to keep it to 1 font). I kine of like this one because we can say "You can use the same font as Code School!".
• The footer css is crazy hacky right now. It's grabbed from the bootstrap example on sticky nav, which I kind of like as a starting point so people can get the hang of going there and building on it. Any feedback on how it's done or changes we could make to this?

Here's some screenshots of the site as it stands now! I'm still working on it, until next Thursday where we're set to film. Any chance someone could give a bit of feedback on Monday or Tuesday? :) cc @drewbarontini

[drewbarontini]

Sure thing! I'll take a look over it on Monday morning and give you some feedback :smile:

[drewbarontini]

• [x] Navigation: I'd probably drop the black border and just do straight blue.
• [x] Navigation: You could make the 'About' and 'Archives' text a desaturated light blue that hovers to white.
• [x] Headings: I'd make the headings a bit darker to contrast against the body text color.
• [x] Hover: I'd probably just do a text-decoration: underline on all links since it's a really clear blue.
• [x] Footer: I like the darker color used in the second screenshot.
• [x] Footer: I think it could used a little more padding on the top and bottom, like the last screenshot.
• [x] Footer: Also, the grid feels spaced too much. I'd give more width to the 'Who We Are' and 'Contact Us' sections that have wider content. This can be tricky to deal with in footers, though.
• [x] I like the use of Open Sans. I think that works well.
• [x] For the buttons, I'd suggest doing some super-rounded ones (border-radius: 20px or so) in order to steer away from Bootstrap-style ones.
• [x] I'd try working in some lighter grey on things like the subtitle of the index page. It'll help give some nice contrast to the text.

Hopefully that helps! Let me know if you need anything else :smile:

[adamfortuna]

Awesome, thanks for the feedback! Still need to add some content to the blog about section, but other than that it's coming along. The only one on here I wasn't easily able to implement was the bigger buttons one. Here's where it's standing now. If you see any other suggestions, feel free to add them in. Will be chipping away at it until thursday.

Notes:

• The background-color for the header items is the same as the default bootstrap button hover color for primary links. Was thinking about showing people how to choose alternate colors from a base color choosing that as the base.
• Footer link hover colors is the same as navigation un-hovered links.

I'm pretty happy with it right now. The only thing that might warrent changing is the footer link color. I'm wondering if it's a bit too dark and not enough contrast. Any thoughts?

[adamfortuna]

Ops, just noticed the first screenshot is in "medium" mode, but the 2nd and 3rd are in "small" mode. The footer should be the same for all of them in the same mode though.

[drewbarontini]

Yeah, I agree. You could bump up the blue in the footer to a lighter color so that the contrast is a little higher.

[adamfortuna]

Cool thanks, I think it's coming along!

[drewbarontini]

Yeah, that definitely helps a lot!