Primitive's Hubspot Starter Theme ✨

Set up 🔨

1. Install Hubspot CLI 🔧

   If you don't have the hubspot cli installed yet
   npm install -g @hubspot/cli

2. Initialize Hubspot theme with Hubspot Account 📦️

   Run this command and follow the prompts
   hs init

3. Initial Upload Command 🚚

   Upload the website theme to hubspot
   hs upload website-theme website-theme
   This will upload the theme to the hubspot portal you are currently logged into under the name "website-theme". You will be able to see the theme in the design tools in hubspot.

4. Watch Command 🧐

   After the initial upload you can run this command to upload dynamically as you make changes
   hs watch website-theme website-theme

5. TailwindCSS Watcher 🎨

   In another terminal run this command
   npx tailwindcss -i ./website-theme/css/main.css -o ./website-theme/css/output.css --watch

Hubspot Dev Tips 📝

• Module Creation 🗃️

  The easiest way to create a new module is to create one through the design tools in hubspot
  Once you have created the module and its fields you can then run this command below
  hs fetch website-theme website-theme
  

• CSS Development 🎨

  Anything added to main.css will be auto compiled with the TailwindCSS Watcher command and outputted to output.css. output.css is pulled in through the base.html layout Any specific css for a module should be placed in the module css file.

• JS Development ⚡️

  In order to keep the JS files short and to the point for easy readability, create any JS code in the module js files. Global JS code can be placed in main.js. Any other code should be made into its own file and or directory to avoid spaghetti code.

• Partial Includes 📄

  {% include /website-theme/templates/partials/component-here.html %}