This Genesis-powered child theme is for Know the Code. It is specifically designed for our website. The view files for the templates and menus are custom for our needs.
Not really, but kinda. Why? It's specifically designed for Know the Code. However, you can use it as inspiration for your project or theme. Use the architecture, task runner setups, Sass structures, etc. Modify the view files for your needs and strip away what you don't need.
This theme includes the following features:
- Genesis-powered
- ModularConfiguration architecture
- Sass-powered styling
- UpGulp - gulp for task running lint, concatenation, optimization, and minification.
This child theme is dependent upon the following:
- The Genesis theming framework from StudioPress.
This theme uses Fulcrum and Help Center plugins. Why? Fulcrum gives us some functions such as login page stylesheet handler, development environment, and parent-child. The Help Center is specific to Know the Code.
Depending upon your project, you may want Fulcrum. Typically though, you do not need these plugins. The theme includes a checker to determine if these are loaded. If no, it loads a dependency helper file.
- Open up terminal and navigate to the
themesfolder. - Then type:
git clone https://github.com/KnowTheCode/KTC-Child-Theme - Change the folder name to
ktc - Navigate into the new folder
cd ktc - It will now run.
To make styling changes, navigate to assets/sass. There you will find each of the partial files which contain the CSS styling.
The variables are setup for our color scheme. Therefore, you want to use the variables found in the utilities/variables/_variables.scss file. For example, let's say that you want the background-color to be our branding green color. You would use $green as the color. This variable holds the hex color.
When you are actively making styling changes, you need to convert the Sass files into a compressed CSS file. The first step is to make sure that you have all of the node modules installed, i.e. that are defined in the package.json file. To install, you will need npm and node installed in your machine. Automating Tasks with Gulp walks you through the process.
Once everything is installed, then you type gulp watch. You can now make changes to the Sass files and have them compiled into native CSS. Two files will be stored in the theme's root directory: style.css and style.min.css. The minified version is loaded within the theme as it's more optimized and will download faster to the viewing devices.
All feedback, bug reports, and pull requests are welcome.