Media Query Sass Mixin [code snippet]
The sass mixin below has default variable values for common breakpoints. But this mixin also allows you to write a custom value if needed.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | // default breakpknts $xs: "480px"; $sm: "600px"; $md: "799px"; $lg: "1010px"; $xl: "1280px"; @mixin media-min($size) { @media (min-width: $size) { @content; } } @mixin media-max($size) { @media (max-width: $size) { @content; } } // Using a variable @include media-max($sm) { body {color:red} } // Custom value @include media-min(300px) { body {color:red} } |
Category: Code Snippets
How Do You Get the URL Parameters and Append to Href or Src of Another Element?
Do you want to grab the url parameters and pass them to a button href or iframe src? This is common when you are running a paid ad campaign to a landing page that links to a form on another page. You want to track the source of the form submission by duplicating the url… Read more »
Category: Code Snippets
How to Have a HubSpot Menu Load the Default Menu When Transferring to Another Account
Problem: When transferring a HubSpot theme or template file to another portal global module’s menu disappears. The code snippet below sets the default menu tag to pull a default if it is not selected.
1 2 3 4 | {% set menu = module.menu is truthy ? menu(module.menu) : menu('default') %} {% menu "menu" %} |
Category: Common Questions
How Do You Convert Text to Outline Shapes in Adobe XD?
If you are wanting to export a text based graphic icon or text symbol it is a good idea to convert it to outlines before exporting. If you don’t, when you embed the svg it will be looking for the web font being used and not look right. Select the text box containing the graphic… Read more »
Category: Common Questions
HubSpot Themes vs Templates – What is the Difference?
Previously it was possible to download HubSpot template packs from the HubSpot marketplace. These were a collection of landing page, website page, blog, and email templates. The downside of these packs is they did not share any unified settings and they were not very portable between accounts. Now a group of templates, custom modules, and… Read more »
Category: Common Questions
10 Benefits of Building Your Website on HubSpot CMS
Your website is the front door to your business. Choosing the right content management system (CMS) is essential for your business growth. HubSpot CMS consists of tools that all work together to give control of all your web assets. Basically, it takes the pain out of managing your website. Instead, it helps you focus on… Read more »
Category: Articles
Console Log JavaScript Objects to See Data Structure [code snippet]
When working with JavaScript objects and arrays it is often tricky to reference the correct index of the data you need. These console functions allow you to visually see the structure so that job is a bit easier. Writes your object as a data table and also dropdown menu
1 2 3 | console.table($yourObject); |
Writes your object as a… Read more »
Category: Code Snippets
Uncaught TypeError: Cannot read property ‘msie’ of undefined when upgrading to WordPress 5.5
Recently when upgrading an older site to WordPress 5.5 I noticed a javascript error in the console that read Uncaught TypeError: Cannot read property ‘msie’ of undefined. If you have a plugin or script that relied on an older version of jQuery it will no longer work because WordPress updated their jQuery version. In order… Read more »
Category: Code Snippets
What is the Average Cost for a Freelance Hubspot CMS Developer?
Below are common ranges you will find the hourly rate. As you might imagine the rates depend on various things like the value given to the client, how busy the freelancer is, and the economic status of the country of the developer. You also have to factor in the working relationship of time-zones and language…. Read more »
Category: Common Questions
Throttle or Delay JavaScript Functions When Window is Resized [code snippet]
Underscore.js has a popular method for throttling and debouncing functions to prevent them from firing multiple times when a window is resized. I found this delay function that works for times when you don’t need to load the entire underscore library to achieve a similar effect.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | // delay function to use on resize to prevent multiple resize events var delay = (function () { var timer = 0; return function (callback, ms) { clearTimeout(timer); timer = setTimeout(callback, ms); }; })(); // Add the delayed functions here const delayedFunctions = function () { console.log('delayedFunctions running'); } // document ready $( document ).ready(function() { // delayedFunctions on load delayedFunctions(); }); // window resize window.onresize = function(event) { delay(function(){ console.log('Window Resize...'); delayedFunctions(); }, 500); }; |
Category: Code Snippets