Bootcamp II ⛰️

Bootcamp II is a wordpress theme (as well as an inside joke) designed to suit the needs of foothillschurch.com. It makes use of webpack, Babel, Sass, Tailwind, Browsersync, PostCSS, ESLint, Stylelint, Prettier and more. It is meant for that site, but if you can use it by all means go for it.

Features and Benefits

General

• Webpack. Built on webpack, this template allows for a modern development workflow + a production ready build.
• Minification. Complete with webpack's native features and CSSNano, this gets your CSS and JS files smaller than things in 40 degree water.
• Prettier. An opinionated code formatter. It automagically formats all your code on save so that it always looks the same. This forces everyone's code to look the same, so no more arguing about tabs vs spaces.
• BrowserSync. Browsersync synchronises browsers, URLs, interactions and code changes across devices and automatically refreshes all the browsers on all devices on changes. If you have never used this it'll blow your mind.
• [Sourcemaps.]() Webpack generates sourcemaps for all js and css files. This helps with debugging simply because when you don't have them enabled your code hides from you like slenderman.
• Configuration. All of the config files have been neatly organized into /webpack to keep them out of the way of the main files. Webpack.config being the exception.

CSS

• PostCSS. PostCSS allows for some code to be injected after the fact, most noteably...
• Autoprefixer. Remember those CSS vendor prefixes you didn't add? Well autoprefixer has you covered.
• TailwindCSS. Tailwind is the CSS framework all the kids are tweeting about. If you aren't familiar, it basically generates like 4.8 million CSS classes so you never have to write CSS again. And it cleans up after itself, which is nice.
• Sass. Technicaly SCSS. But we call it sass. Compiles Sass down into CSS so browsers can read it.

JS

• BabelJS. Allows you to use next gen Javascript by transpiling it (dumbing it down) to something IE 4 can understand (that claim isn't tested).

Requirements

• Node.js
• NPM
• Yarn

Install

# 1-- Set up a local instance of Worpress in Local or something.
# 2-- Clone this into your themes folder (as a new theme)

$ git clone https://github.com/Myzwer/foothillschurch

# 2-- Edit the BrowserSync settings in `webpack.config.js`. Ya can't miss it.
# 3-- Install yarn and all the project dependencies

$ yarn install

# 4-- Run a command and start making some magic.
yarn dev
yarn dev:watch
yarn prod
yarn prod:watch

Happy coding!