SCSS Styling

[lgraba]

There are several things I'd like to do with respect to styling:

• Refactor SCSS to provide the best consistency across all pages
• Add variables for commonly-used colors
• Make some mixins
• Create responsive media selectors for 3 or 4 different screen sizes
  • Menu sidebar will switch to the bottom on smaller screens
• Change the colors - originally I had planned on primarily greyscale with one or two accent colors
  • Accent colors peachy orange or red?
• Place my newly-created logo tastefully
  • Light background logo on menu sidebar?
• Use content space more effectively, except on welcome page
• CSS Transitions that helps guide the user
  • Example: make a header rule below my name on welcome page that expands to the right to make contact with the menu sidebar, showing the user how to navigate.
• Form styles (primarily on contact form, but could also be nice on my admin stuff)
  • I like the Awesome Form Labels
  • This would require just a little javascript?
• Nice tag styling (along with some sort of tag-based sorting on projects index page?)
• CSS loading icon for images (admin)
• HTML resume, simple
• Projects Index
• Project show

  Wireframing

I think it would be best if I were to redo some of the medium to high-fidelity wireframes for each page in the project using Photoshop or Illustrator Then I could convert these to HTML/CSS directly from there.

[lgraba]

Removed styling except for navigation, want to start fresh after site functionality is complete.

Plan:

1. Create mockups in Photoshop
2. Alter menu accordingly
3. Minimal styling for each page

[lgraba]

Responsivity Styling

• Changed main sidebar items to affix to bottom of page on screens < 800px width.
• Need to change fonts, logos, and icon sizes to scale appropriately with screen dimensions for full responsivity.

[lgraba]

Grid Framework Needed

I am looking through some different responsive grid frameworks for possible inclusion for the main content (everything except the menu sidebar). I have used Bootstrap and Foundation extensively in the past, but have also recently looked at Jeet. It could be fun to program a small grid with some SCSS pre- and/or post-processors. See what modern options are first.