CMS Development

MHussain8
Participant

How to build custom code template

How to build custom code template with beautiful UI design. If you have ha souce code of  any template, please send me.

0 Upvotes
2 Replies 2
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

How to build custom code template

Hi @MHussain8,

building a theme - especially with beautiful UI(it's always up to your preferences) can take up an enourmous amount of time. There are companies that are working for several months/years upon one theme, always optimizing it to the newest standards and user-requirements.

 

Developing a custom theme can be a great but pricy invest since custom themes can start from 4-5k(depending on the developer and requirements, timeline and briefings).

 

But this doesn't mean that you can't do it yourself. As @Jnix284 mentioned, HubSpot provides the "theme boilerplate" which gives you a good basis for a custom theme. 

 

But if you really want to do everything by yourself here's my streamlined approach of developing custom themes:

 

  • get all requirements from the client
  • let them approve those (double check to minimize the potential scope-creep)
  • get all design assets(logo, colors, fonts, icons, everything you need for the design/UI ... )
  • create a design in Figma or Adobe XD (while designing think of repetative elements like headlines, cards, images, buttons... so you'll have a consistent design-language while coding)
  • get the approval on the design
  • start with the bare minimum of a theme fields.json: colors, font settings, buttons, forms, spacings
  • create a theme.css file with all those variables and dependend classes
  • create custom modules like cards, button, headline-text combos... whatever you need to have in the theme
  • drop the custom modules in the templates
  • debug
  • optimize
  • debug
  • get approval from client
  • get paid

 

since you want to have it for yourself you can skip the many steps but I highly recommend you to start by designing the theme first since moving pixels is always easier and faster than moving code 🙂 

 

If you want to save time and money - check out the theme marketplace. There are a ton of ready-to-use themes (free & paid) available. Once you've created a child-theme of a downloaded/purchased theme you can customize it to your needs.

 

 

hope this helps

 

best, 

Anton

Anton Bujanowski Signature
Jnix284
Most Valuable Member | Diamond Partner
Most Valuable Member | Diamond Partner

How to build custom code template

Hi @MHussain8 

 

If you're new to creating templates in HubSpot, I recommend starting with the HubSpot theme boilerplate and definitely checking out the resources available in the developer blog and HubSpot Academy (there are two certifications for CMS developers).

 


If my reply answered your question please mark it as a solution to make it easier for others to find.



Jennifer Nixon - Director of Revenue Operations at WORQFLOW

connect with Jen on Linkedin