Workflow
Benefits of Developing an Optimized Workflow
If you can find a way to streamline production than do it. There are some concepts in web development that are key. One that comes to mind right off the bat is “mobile first”. The philosophy of preparing for smaller scale devices when writing markup and code. Another idea is the standardization of a look & feel to a particular website, which can be done by grouping css selectors and maintaining a “standard” design of color & form.
As a side note I should say that I use Ubuntu Linux, so some of this (mainly NPM & nodejs & node-sass) will have to be considered if you are using a different operating system platform. You will have to figure out how to install the Node Package Manager yourself, but the rest will be easy. I installed nodejs, which will install NPM and through npm, node-sass, which is responsable for SASS.
Below is a succinct listing of the key parts of the workflow I have been using as well as an overview of their benefits.
- “Standardized” css selector names used for Bootstrap
- Bootstrap has a “grid” layout
- Bootstrap has layouts for different device screen sizes
- SASS
- variables
- nested element selectors
- modularize code by separating *scss files (they compile into 1 file)
- Bootstrap is made for customization via SASS!
- NPM
- using commands to facilitate development (like “watch”)
- compressing (minifying) files for efficient delivery to the client device
In the near future, I will post code snippets pertaining to the simplist way I could find to install and begin using NPM, nodejs, & SASS. From there we will go on to code examples of implementing Bootstrap on your website structure and moving on to customizing the Bootstrap files for your particular situation. All of this will be given as a way for you to be quickly up and running with this simple formula, and believe me, it is actually a very simple formula that scales incredibly well. Now pair it all with a CMS (again I use WordPress, if you’re using something different, which you can, you’ll have to figure that system out on your on), and you have the whole picture, or most of it anyways.
