At Rainmaker Digital, we build and develop a lot of WordPress themes. Obviously, every theme is built on the Genesis Framework.
But the framework itself is not a starter theme, nor should it be. That’s why I built my own, and named it, perhaps unsurprisingly, Starter Theme.
At first, I looked all over for a Genesis starter theme that wasn’t unnecessarily complicated. I found many that are powerful, but they often restrict the user to a particular workflow such as Gulp, SCSS, or LESS.
This is great for those who already use these workflows, but it makes the starter theme entirely unusable for those who like vanilla CSS, or who use a different pre-processing language.
Why wasn’t there a starter theme that not only served as a starting point for styling and function, but also kept in mind the many different workflows that developers employ?
Could there be a starter theme that was workflow-objective, yet still advanced?
I thought it was possible, so I built Starter Theme while doing my best to adhere to 5 main principles:
The theme should promote neutral design so-as to minimize influence on future themes
It should retain vanilla simplicity so that anyone, beginner to advanced, could utilize its features
The theme should be mobile-first
It should include an accessible responsive menu by default
Any automation should be an optional add-on so-as not to violate principle #2
I believe Starter Theme meets these principles well.
Although originally a personal project (the theme currently in use on this website was built using Starter Theme), I quickly realized that the Genesis community might have a use for it.
You can download the theme for free by signing up to my newsletter or via the Free Theme Downloads area.
The rest of this post is a little bit of what went into making Starter Theme. It’s a bit lengthy, but if you enjoy making-of stories, then this will be a treat.
The Making of Starter Theme
First, I don’t claim that this theme is for everyone. In fact, a lot of you have your own starter themes, and if it works for you, then there’s no need to change!
But, if you’ve been looking for a Genesis starter theme that will get your projects going quickly and with minimal interference, then this theme will likely be a big help to you.
Principle #1: Neutral Design
The one thing that I wanted Starter to accomplish was minimal interference in the way of how a theme should look.
I found that when using the Sample Theme from StudioPress, I was having to remove a lot of styles like background colors, link colors, etc…
With Starter Theme, I kept everything to a minimum.
It uses Georgia as the primary body font, and Lato from Google Fonts for headers.
I originally used Helvetica for the headers, but opted for Google Fonts since most people will be importing them anyway. Having the script enqueued by default is one less step at the start of development.
I also decided on high-contrast right out of the gate for accessibility purposes, and emphasized links by using border-bottom: 1px solid currentColor;.
I would be lying if I said there was zero design influence in Starter Theme, however.
Being somewhat of a typography nut, I included the Golden Ratio for typographic spacing and sizing, which allows for responsive scaling at different screen sizes.
I also implemented some visual defaults to the theme (found in /lib/defaults.php) that I felt were most common in theme development, such as:
Increasing the Gravatar size in author boxes to 150px
Setting the max menu-depth for Primary and Secondary menus to 3 deep
Removing the page_blog.php template from the parent theme to discourage its use
Repositioning the Secondary navigation to above the header
Though not directly effecting design, in addition I created a page-class function found in /lib/classes.php that appends a simple class to different page types for styling purposes.
The main benefit of the function lies in its ability to dynamically add a class to any additional page template that matches the template file name.
So, for instance, a page template like page-landing.php will output .page-landing to the body element.
Download Starter Theme for Free →
Principle #2: Retain Vanilla Simplicity
Like I stated at the beginning, many starter themes include pre-processing languages out of the box, even requiring users to adopt said languages.
While many developers do use automaters like Grunt, or pre-processors like SCSS or LESS, there are many talented developers who are more comfortable with traditional methods.
Because of this, I built Starter Theme to come with vanilla CSS out of the box.
There’s no need to install any terminal packages, Node scripts, or compilers in Starter Theme—that is, unless you want to. But more on that down below.
Continuing in line with retaining vanilla simplicity, I decided to inherit the naming convention of the Genesis Framework’s library folder, defined as /lib/ in the parent theme.
In addition to this folder, Starter Theme includes a templates folder and an assets folder.
Templates Folder
An obvious reason for this was maintainability and organization. While the Genesis Framework has two default templates (the blog template has been removed by default in Starter Theme), I’m planning on continually adding more templates.
Therefore, it made sense to have these housed in a folder, especially for when a user wanted to remove the included default templates. Instead of looking for them in the root, where they can easily get jumbled, you can just find them /templates/.
Assets
Bundling theme assets in a parent folder makes sense for the same reasons as above. When you have a complex theme, you can rack up quite a bit of CSS/JS and image files.
Plus, as you’ll see further down, this type of hierarchy is important for the optional automation available for Starter Theme.
Download Starter Theme for Free →
Principle #3: Mobile-First Design
I’ve written to great length on why mobile-first design is here to stay.
So it’s no surprise that Starter Theme is built on this foundational principle of necessity-first, complementary-second.
By default, the theme responds at 768px (usually tablet size) and 1200px (usually laptop/desktop size).
This is in no way to be interpreted as device-centric design. Each media query should be adjusted based on the particular design that you are creating, taking into account the user-base and specific use-cases.
That being said, these media queries are often the most common and make for a good starting point.
Download Starter Theme for Free →
Principle #4: An Accessible Responsive Menu
I felt it important to include a mobile navigation that was accessible by default, neutral enough to cover most scenarios gracefully, yet still powerful enough to offer useful features.
To do this, I forked a version of Robin Cornett’s already constructed responsive menu.
Edits include adding a menu combining function that will merge the Primary and Secondary navigations together on mobile screens, as well as moving the Menu button to inside the site header.
Of course, depending on the project, this responsive menu might not make sense.
As an example, the theme I’m using on this site doesn’t use the default responsive menu in Starter Theme as it isn’t necessary. In my particular case, creating a custom menu function made sense.
And that’s really the beauty of Starter Theme: if you don’t need something, just cut it out.
But for many cases, I believe the responsive menu will come in handy for many theme developers.
Download Starter Theme for Free →
Principle #5: Optional Automation With Gulp
My favorite part of building Starter Theme was developing a useful (and very powerful) theme development kit that includes Gulp automation and SCSS styling architecture.
Adhering to the principle, this feature is optional and can be downloaded via GitHub.
Once downloaded, added to the theme, and initiated, Gulp will automatically do the following for you:
Compress JS files in /assets/js/ and output them into a ./build/ folder with the extension .min.js appended.
Compile and compress SCSS files and output to ./style.css
Watch all JS and SCSS files in the /assets/ folder, running tasks as files change
Translate your theme and generate a POT file, outputting in ./translation/textdomain.pot
Package your theme in a ZIP file for release, excluding all the dependencies that come from running the Gulp automation
As mentioned, the kit also comes with a SCSS version of the Starter Theme stylesheet.
A big thanks here to Ozzy Rodrigues for volunteering to organize the nesting properties for me—this is truly why I love the Genesis community.
I plan to continually update the SCSS file architecture for better use in the future (think Atomic Design methodology), but for now it’ll get the job done.
If automation scares you, I would strongly encourage you try it out. Almost everything about the optional development kit is installed for you, and will streamline your development process.
Just follow my instructions and you’ll be up in running in as little as 2 command lines in the terminal.
A Starter Theme That Works
Wow, 1500 words later, and I think I’ve finished covering the details. Building Starter Theme has taught me a lot about building a product.
I may even write up a post on what I did to market theme (so far, it’s been downloaded around 250+ times).
But, in the meantime, download Starter Theme and give it a test run. If you have done this already, I’d love to know what you think!
The post The Making of a Genesis Starter Theme appeared first on Calvin Koepke.