Skip to content

A starting point for creating a unique HubSpot CMS theme with TailwindCSS, AlpineJS, and additional features.

License

Notifications You must be signed in to change notification settings

freshjuice-dev/freshjuice-hubspot-theme

Repository files navigation

🍹FreshJuice – HubSpot CMS Theme

GitHub Release GitHub last commit GitHub License

GitHub watchers GitHub forks GitHub Repo stars

A modern, clean, and minimalistic theme for HubSpot CMS themes. This theme is designed to help you get started with your HubSpot CMS theme development quickly. It includes a modern frameworks and tools like Tailwind CSS, Alpine.js.

Demo website

Purpose

This theme is designed to help developers a head start on their HubSpot CMS theme development. While most of HubSpot themes are chunky and bloated, this theme is designed to be minimalistic and load only required components. Solution for pixel perfect design and fast loading website.

Getting Started

Prerequisites

Installation

  1. Clone the repo and CD into it
  2. Run npm install (Uses Node v20.0.0 or newer)
  3. Run npm run prepare to install husky hooks.
  4. For local development, run npm run start. This will run tailwindcss, esbuild, and hs-cli to watch, and rebuild, and upload to HubSpot as you dev.
  5. For production build, run npm run build. This will run tailwindcss, esbuild.
  6. For uploading to HubSpot, run npm run upload:hubspot. This will run hs-cli to upload theme to HubSpot.

Tech Stack

  • Tailwind CSS: A utility-first CSS framework.
  • Alpine.js: Alpine is a rugged, minimal tool for composing behavior directly in your markup. Think of it like jQuery for the modern web.
  • HubSpot CMS CLI

Project Structure

  • scripts: contains helper scripts for building and uploading to HubSpot.
  • source: contains source files for the theme.
  • theme: contains the theme files that will be uploaded to HubSpot.
    • theme/css: contains the compiled CSS files.
    • theme/images: contains the images, and icons for the theme.
    • theme/js: contains the compiled JS and vendor JS files.
    • theme/macros: contains HubL macros for the theme.
    • theme/modules: contains HubL modules for the theme.
    • theme/sections: contains HubL sections for the theme.
    • theme/templates: contains HubL templates for the theme.
      • theme/templates/layouts: contains the layout templates for the theme.
      • theme/templates/partials: contains the partial templates for the theme.
      • theme/templates/system: contains the system templates for the theme.

Contributing

If you notice an issue, feel free to open an issue.

Any contributions you make are greatly appreciated. If you have any improvements, feel free to fork the repo and submit a pull request.

Versioning

We use SemVer for versioning. For the versions available, see the releases on this repository.

License

Distributed under the MIT License. See LICENSE for more information.

Here are the key points of the MIT license:

  • You can use, copy and modify the software.
  • You can distribute modified and unmodified versions of the software.
  • You can include the software in commercial products or services.
  • You have to include the same license in copies of the software.
  • You don't have to share your own code (unless you want to).
  • You don't have to notify the original authors, but it's a nice gesture.

Do bear in mind that while the license does not require you to disclose your source code, it also does not grant you any explicit patent rights.