This task is becoming exponentially more involved.
After much more reading and trying to determine if my coding architecture was efficient and fast, I realized that using a framework would save a lot of time and effort. In a framework, someone else has created all the structures and components, saving a lot of time in implementing a clean, efficient website.
So then I researched frameworks, mostly focusing on Bootstrap, Foundation, and Bulma. Bootstrap is by far the most popular, making it fairly easy to use and with a wide-base community of pre-build components and support. However, it is not inherently mobile-first, and does not natively support media queries. It is also older and not really updated to work with flex box. It is also much bigger and tends to run slower.
Foundation was the best choice based on it’s mobile-first design, flex box inclusion, media query support, speed, and size. I spent the weekend choosing a skeleton WP/Foundation theme on which to build our site, followed by learning the dependencies I would need to install.
These dependencies were one of the reasons I though it would be necessary to use a php library for SASS. However using a php library is not nearly as wide-used because it is much more complicated and leads to more possibilities for issues later. So this decision to use Foundation was a commitment on my part to learn Node.js, NVM, NPM, and Gulp in addition to SASS and SCSS. All of those technologies are command-line installed and run, and they all use various plugins and packages to accomplish tasks. In addition, I had to find a way to manually install these services on the shared host, which I was able to accomplish with the help of Google.
The point is: This was a huge undertaking. However, not only is it a lot of study and work, but it provides me with new skills at a whole new level of web design and management.
So this was accomplished this week:
- Choice of CSS Framework
- Choose of WP/Framework skeleton template
- Installation on Hostgator of NVM, NPM, SASS, and Gulp.
- Installation on localhost of NVM, NPM, SASS, Gulp, and various developer plugins to assist in local development.
- Planning of file structures for best maintainability.
