alfredxing/brick — pull request #36 by JacobJWBurden (2014-04-07 03:24:24+00:00)
Title:  A few front-end code fixes, replacing multiple IDs with a single, reusable div. Using data-ui-component to keep sections sensible.

# Front-end code fix

## Replacing 3 IDs with a single div.
I thought it would be a better idea to have one reusable class for the style rules shared among three IDs . So part of #hero was replaced into .content__header and the rest of #hero, #features, and #mission was replaced into the .content object. Generally, IDs should be used only for hooking JS into a site since they aren't reusable.
#hero --> .content__header
#hero, #mission, #features --> .content

## How has describing the site's content changed?
The ID names seemed sensible enough. #features had content describing the features, and #mission had the mission statement. To not lose this sensibility while reading the code, I used the data-ui-component="" attribute. Example, data-ui-component="features".

## What's next?
There are still changes that can be made with the same mindset. Styling elements can lead to be hazardous as a site grows. We can change this by making more sensible, abstract, loosely coupled classes and only using IDs for JavaScript hooking. However, I believe this was a good start. I'd also like to see if we can find a better responsive web design solution for smaller screen sizes.

*Hopefully this makes sense, didn't break anything, and you enjoy these ideas, Cheers!*