Front End Developers often juggle multiple projects at a time. Starting a new project can be time consuming: Between selecting a framework, creating necessary CSS, JavaScript, and SASS files, it’s a process. Setting aside a few hours now to create a base project theme would both save exponentially more time down the line, as well as keep project consistency.
The first step for creating a base theme is deciding if a base framework will be used. Several great ones exist, however using one is not required. They do tend to speed up development time, especially if the base is responsive out of the box (which most are these days). Bootstrap is great, being actively maintained with a wealth of documentation, and Sage is a wonderful blank slate for a WordPress project.
SASS is one of the better ways to organize CSS. From individual files, folders, and the ability to utilize atomic design principles, there are many ways to organize the theme. It’s important to add the details of how you organized the theme to the readme file, allowing other developers and project maintainers ease when onboarding and updating. If the theme is going to be used within an organization that utilizes a specific style guide, those styles can also be placed within the appropriate files to ensure consistency.
Gulp is a great base option due to its ease of installation and ability to scale. From compiling styles to minifying code and image optimization, it can handle just about anything. It is the perfect base for a new Front End Developer since documentation is plentiful. Webpack is another good compiling option, and while it also can do a multitude of processes, it has a steeper learning curve.
If this base theme is being set up primarily for a Drupal environment, base template files and general theme info files can be added as well. Similarly for WordPress, it's a good idea to include a functions file with commonly used code.
Once all the pieces are selected and base files created, it’s critical to create a readme file. Document detailed information on compilers, config files, style organization, etc., allowing for another developer to smoothly transition onto the project. It’s also helpful to include any additional steps that need to be taken when setting up a local environment, or quirks to a specific environment.
Storing each base in a git repo for easy access and updating is ideal, especially if it will be used within a team. While technologies and techniques are always changing, keeping documentation will allow for upkeep of historical data. If you aren’t currently starting projects with a base theme, test it out for project consistency, to keep developers on the same page, and to drastically shorten project ramp up.
It's a good time to be in web development with a plethora of reusable framework options. What's your current setup? Any ways you prefer to streamline?
