Style The HTML Using CSS
Once the basic HTML has been created, the next step is to provide styling for each of those pages. When building a site using TACE, the HTML and CSS should be separated into different files. This allows for the design of the site to be updated without touching the HTML.
The design that I created for the site is pretty basic, but it focuses on making everything simple and easy to use. It basically consists of a header with a drop shadow, sidebars, and then important content raised up with drop shadows. The typography is just using the built in sans-serif font of the browser. I prefer to use standard fonts to minimize loading times. The font styling itself could definitely be improved but it is functional in its current form.
I tried to keep the interactive elements within CSS as much as possible. For example, the star rating system and tagging system both use checkboxes, labels, and CSS to achieve the custom styling. The mobile menu and refresh/archive modals uses simple javascript to turn HTML classes on and off. It uses a little javascript but tries to keep it as minimal as possible. There are also some CSS animations that will be used for when AJAX calls are processing that are not currently visible on these design pages.
Below is a list of each of the pages with a link to their hardcoded HTML pages and then next to those links are the styled pages which link to the styled version of the same HTML pages (a few minor HTML changes have been made from the original HTML to make certain items easier to style). The design pages should work both on desktop and mobile devices.
- Main Feed Page: HTML | Styled
- Categories List Page: HTML | Styled
- Add Category Page: HTML | Styled
- Edit Category Page: HTML | Styled
- Edit Color Page: HTML | Styled
- Add Feed Page: HTML | Styled
- Edit Feed Page: HTML | Styled
- Add Tag Page: HTML | Styled
- Edit Tag Page: HTML | Styled
- Add Word Page: HTML | Styled
- Edit Word Page: HTML | Styled
- Settings Page: HTML | Styled
- Settings Add Tag Page: HTML | Styled
- Settings Edit Tag Page: HTML | Styled
- Settings Color Edit Page: HTML | Styled
Now that the design is in place, the next step is to figure out the data structure for the app and build out the database. The building of the data structure for the app will be covered in the next post.
< Create Hardcoded HTML App Pages Build The Database Structure >