John Fuller johnsfuller

johnsfuller / dnd-layout.css

Last active May 11, 2022 15:35

A modern, mobile-first approach to HubSpot's layout.css file

	/* required css vars
	* --site-width (site max-width)
	* --site-gutter (site container padding)
	* --site-spacing-y (site vertical rhythm)
	* --hs-grid-gap-x (horizontal gap between dnd columns)
	*/

	.dnd-section {
	padding: 4em 0;
	}

johnsfuller / hubspot-hubl.html

Created July 20, 2021 12:32

WordPress/PHP & HubSpot/HubL Comparison Cheat Sheet

	<!-- 👇 Scroll down 👇 -->

	{# variables #}
	{% set my_variable = 'Hello world' %}

	{# get variables from somewhere else #}
	{% import 'path/to/hubl-variables.html' as site_vars %}
	{{ site_vars.my_external_variable }}

johnsfuller / hubl_brightness_macro.css

Last active August 1, 2019 18:14

This hubl macro will determine text color based on a set background color. This macro is based off of this sass color function by John W Long https://gist.github.com/jlong/f06f5843104ee10006fe which is based off of this article http://www.nbdtech.com/Blog/archive/2008/04/27/Calculating-the-Perceived-Brightness-of-a-Color.aspx

	{# This macro is based off of this sass color function by John W Long
	# https://gist.github.com/jlong/f06f5843104ee10006fe
	# which gets its brightness math from this article:
	# http://www.nbdtech.com/Blog/archive/2008/04/27/Calculating-the-Perceived-Brightness-of-a-Color.aspx
	# Thanks to Matt Coley (https://github.com/mattcoley) and the HubSpot Team
	# for introducing the root filter which makes this macro possible.
	#}

	{% macro find_text_color(bg_color) %}
	{%- set rgb_array = bg_color\|convert_rgb\|split(',') -%}