New design is now live!

It has taken me a couple of weeks but I've finally finished the new theme for Rick's code.

I was tired of the old theme and wanted to start one from scratch with code performance in mind. No extra CSS and no extra JS inherited from a third-party theme.

πŸ‘¨β€πŸ’» How did I build it?

I used underscores.me which generates a clean WordPress theme with no styles. Just the PHP templates files.

Using Bootstrap 4 as a starting point I've made small adjustments to the variables file plus some additions of my own.

πŸ’― If we write CSS, let's write it well

I wanted to make sure I followed a proper code styling, so I added a stylelint configuration file which is picked up by VSCode as well as the build linting task.

{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": null,
    "at-rule-no-unknown": [true, {
      ignoreAtRules: ["include", "mixin"]
    }],
    "selector-max-specificity": "0,3,0",
    "selector-max-compound-selectors": 4,
    "declaration-no-important": true,
    "declaration-property-unit-whitelist": {
        "font-size": ["rem", "%"]
    },
    "no-missing-end-of-source-newline": null,
    "max-nesting-depth": [
      3,
      {
        "ignoreAtRules": [
          "include",
          "media"
        ]
      }
    ]
  }
}

πŸ”₯ packages.json

The coolest thing on the project was probably setting up the frontend build.

{
  "name": "ricks-code",
  "version": "1.0.0",
  "description": "Rick's Code Theme",
  "author": "Rick Torres",
  "license": "GPL-2.0",
  "private": true,
  "scripts": {
    "build": "npm-run-all lint css minify",
    "css": "npm-run-all css:precompile css:autoprefix",
    "css:autoprefix": "postcss --use autoprefixer --no-map --replace style.css",
    "css:precompile": "node-sass --omitSourceMapUrl true --include-path src src/style.scss style.css",
    "lint": "stylelint \"src/components/**/*.scss\"",
    "watch:css": "npm run lint css && onchange \"src/**/*.scss\" -- npm-run-all lint css",
    "watch:lint": "npm run lint && onchange \"src/components/**/*.scss\" -- npm run lint",
    "minify": "cleancss -o style.css style.css"
  },
  "devDependencies": {
    "autoprefixer": "^8.0.0",
    "clean-css-cli": "^4.1.10",
    "eslint": "^4.17.0",
    "node-sass": "4.7.2",
    "npm-run-all": "4.1.2",
    "onchange": "3.3.0",
    "postcss-cli": "5.0.0",
    "stylelint": "8.4.0",
    "stylelint-config-standard": "18.0.0"
  },
  "engines": {
    "node": "^8.0"
  }
}

What is happening here?

  • Lint the code based on stylelint configuration
  • Watch for SCSS files and compile them
  • Run the build task to create a minified version of the CSS

The full theme code can be found here https://github.com/quicoto/ricks-code

About Rick

Senior Front-end Software Engineer from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.

Leave a Reply

Add <code> Some Code </code> by using this tags.

*
*